mermaid
role
time
tools
goal
founding designer
january 24 - oct 24
figma, figjam, miro, jira, adobe suite
redesign the current app state and lead a visual rebrand of the product
impact
deliver a full-fledged product ready to release onto iOS and Android along with the creation of marketing and communication materials
research
Style Guide
Primary Screens
01. Home
Objective
The objective for the Mermaid app is to create a platform to connect boat owners and boat cleaning service providers and providing a simple experience that allows for quick, easy communication to develop a business partnership and to establish a service.
As of right now, boat owners who also go fishing run into the issue of needing to clean their boats after a long day out. There is currently no platform that allows for boat owners to quickly find a potential service provider and reach out to them as well, so Mermaid aims to fulfill that purpose.
Service providers also seem to not be very involved in social media marketing and may just have a regular clientele rather than expanding their business. Mermaid aims to allow service providers to be more ‘seen’ and attract more customers for those providers as well.
Product Vision Statement
The vision statement for Mermaid is to be a successful mobile app with a steady number of regular users and business transactions happening through the app.
With constant users who frequent Mermaid, that would prove that we have provided a platform to both boat owners and service providers thus solving the problem of not being able to find a reliable service provider or generating enough business as a service provider.
Financially, we strive for a steady amount of users who participate in our Subscription feature to generate revenue.
Target Audience
Our audience is separated into two groups - boat owners and boat cleaners. We are specifically targeting young and middle aged men of mid-high economic backgrounds. We’ve curated buyer personas of the types of buyers who would benefit from our product.
The first type boat owner we’re targeting is social, affluent, busy, active, and spontaneous. They likely don’t have time to meticulously clean their boat but possess disposable income. The second type of boat owner is middle class, family man, outdoorsman, with less disposable income and fewer resources.
The first type of boat cleaner we’re targeting are the established business owners who have their own storefront and years of experience. The second type are the freelance cleaners who are starting out and seeking out new clientele.
User Goals
03. More
Within the More page, users can report a Crime Tip, Report an Issue, use Bill Payment, or find Public Meetings.
Choosing what features was based on the executive decision from a client, reasoning that local citizens used the old app most for these features.
Users can find more features within the Menu page and explore the current members in office as well as discover new job opportunities. Admin can also update and add information like in the All Departments page.
MyMontclair features other capabilities like exploring municipal job opportunities, finding more information for economic development or permits, and more. App users will be able to locate whatever they intend with the search feature as well.
Research was also conducted on boating season specific to geographic regions in the US, as well as how often boats are typically cleaned and used.
With the two different groups of our targeted audience, we anticipate separate user goals as well.
Users with a boat will be using Mermaid to find a suitable boat service provider, whether it be for a boat cleaning, repair, or service. As of right now, Mermaid only supports the cleaning service and will possibly implement boat repairs and services as well in future updates. Boat users will also be looking to contact potential providers to scope out pricing ranges, specific cleaning services, and setting appointments for services as well.
Users who provide a cleaning service will be using Mermaid to promote their business and connect with potential new clientele that they can service. Providers will use Mermaid to communicate with potential boat user customers to establish their available services, price ranges, as well as setting appointments for servicing.
Both users can also see past services/orders and rate their experience as well to let other users know about their own experiences.
Once the primary screens were complete, I moved on to create the rest of the app - totaling 44 screens. I worked directly with the development team and communicated with our client to finalize what we wanted included in the final product, what needs to be adjusted accordingly, and what needs to be removed.
About 20+ screens were scrapped or needed to be readjusted to the client’s desire. Many decision choices and research points were given in a final product presentation to the client.
At this current stage, the app is in it’s final development. There were more than two phases of a design QA to locate any bugs and design inconsistencies using TestFlight, as shown here.
final designs
Additional to the standard design are premium themed designs available to clients as well. Proposed by our CEO as another product add-on, I designed primary screens for 6 holiday themes as well.
My process on how to create these themes was to embody the colors that people envision when they think about the holiday. After selecting a simple color palette to abide by, I standardized which features would be modified and created a design style sheet catered to the developers.
Primary, secondary, tertiary, and quaternary colors were highlighted and their hex codes were visible so the dev team can quickly modify the design to the desired theme.
All the themes I have designed have been WCAG 2.0 AA tested and passed their accessibility checks.
MyMontclair is in its final stages of development and soon to be released on both iPhone and Android devices. As of right now, my role as founding designer is complete and awaiting the next steps to continue moving forward.
Besides the UX work for the mobile app, I also designed the ConnectedCity website; ConnectedCity is the brand over MyMontclair, offering other cities, districts, and government sectors a clean, customizable mobile app. You can explore the website by clicking here.
I also designed promotional pieces for the product, ranging from a product brochure to App Store screenshots to logo design and general branding. For any questions or if you’d like to see more of my work, feel free to contact me!
introduction
Mermaid is a product requested by a client working with us at PNJ Tech, interested in tipping their toes in a relatively untouched market while bringing in the modernity of technology to a platform. Directed at boat owners and cleaners, Mermaid is designed to bridge the gap between the two demographics and allow them to connect for services.
My participation in Mermaid was to present my own design based off the current design to revamp the overall flow, look, and experience so that users can be interested from the get-go with a sleek design. My goal was to highlight an aquatic, beachy theme while also combining other aspects like Tinder’s swipe feature - as directed by our client’s desires - in one mobile app that is easy to navigate and use.
Due to the time constraint and my later addition to the team, my team directed me to focus on the UX Design aspect; as a result, I did minimal user research and worked based on the parameters set from the C-suite and the client.
designing
The Home page is shown when users first open the app. Users can quickly view upcoming events and public meetings, as well as access commonly used features like Crime Tip, Issue Report, and more.
With dynamic elements such as a scrolling home slideshow, current date, and a feature carousel under Quick Access, I consolidated the most commonly used features in the home page.
The Navigation Bar is organized into Home, Explore, More, Search, and Menu and is a sticky feature that stays on the bottom of the screen throughout all pages of the app.
02. Explore
The Explore page harbors a calendar with upcoming events relevant to the city. Users can also find different amenities like parks, landmarks, or a map with geolocation.
Users can quickly see at a glance what days have events related to Montclair, and find more information on said events as well. Information regarding city infrastructure like parks, landmarks, and facilities can be discovered with hours, directions, and descriptions - or it can be found in a map using the user’s geolocation.
04. Search
For easy and quick access, users can look for features in the Search page.
Users will be displayed popular searches that are frequently used, as well as auto-complete when typing in the requested search item.
In the instance that a user is unable to quickly locate the feature for their intended use-case, we implemented a search engine within the app to help speed up this process and eliminate any possible frustration.
