Helping {brand} improve their {experience/flow}.
User Research
Product Strategy
UI Design
Interaction Design
Usability Testing
Figjam
Notion
Maze
Figma
Otter
5 weeks
Keep the Success and Revamp the Rest
A successful brand desires to go through a complete app redesign. I was lucky to be on the two-person design team to take on the task; from ideation to hi-fi prototype.
Co-Designer
UX Design
UI Design
User Testing
Miro
Figma
Click-Up
Slack
1 year
The Problem
An upgraded mobile design was needed that combined all the capabilities developed over the course of the companies growth into one visually cohesive and user-centered experience.
The Solution
Developing a landing page consolidates the application journey for the consumer while highlighting the app's multifaceted capabilities.
Refining the focus of the menu bar to provide greater clarity for the user.
User testing affirms the necessity for a riveting new addition that amplifies the product's efficiency.
Usability Review
Business & User Frustrations
Users were unaware of many offerings within the app experience. Also, the application flow was restricted to only users who had purchased the MEATER product. The stakeholders at the company sought to remove these barriers to user experience.
Primary Frustration
Users exploring the possibility of the product could not navigate the app at all. This limitation also did not allow the app to be featured in the IOS app store (80% of the companies user base.)
Secondary Frustration
A prevalent pain point for users with multiple MEATER probes who wished to use the products in one type of cook: They have to go through the set-up process multiple times.
Competitor Benchmarking
A look at our direct and indirect competitors: gauging ease of use, design, feedback, content quality and CTA design.
Ideation
Design Inspo, Research, Crazy Eights, User Journeys, Stakeholder Feedback and a Whole-Lot-of Drawing on Whiteboards.
An easy, direct CTA that would keep the main function of the product central to the new landing page design. A new feature for multi-probe cooks for ease of use.
Upgrade colors and streamline design to be cohesive. Streamline of the navigation bar and a new overlay effect for the menu.
User Flows
Using two studies, one of a chef who has used the MEATER devices regularly and the other of a new user who is cooking food at home for a family meal, we took stock of the individual needs of each user. A simple user map of a happy path was also created (referenced below.)
Rapid Prototyping
To place the fruit of the ideation process clearly in the minds of our stakeholders. Two rapid prototyping versions were created:
Evolution- not straying too far off the proposed wireframes. Less innovation in component use and design.
Revolution- A premium user centered design that got our design juices flowing with fresh components and mobile functionality.
Delightfully, stakeholders were on board with the latter!
Styles & Components
New color suite to tie branding into the app flow and new components (like a parallax scroll and video elements) to mirror the latest developments in UI design capabilitties.
High Fidelity Prototype
The final design was created in both an iOS UI kit and a Material UI kit to make the handoff to developer collaborators as smooth as possible. I believe strongly in the the importance of working hand in hand with the engineering team to achieve not only the best possible design but also foster comradery in the workflow.
The design required an overhaul of our mobile files, on both the design and engineering end. But we were able to create something which seamlessly embedded itself within the MEATERverse while generating exciting new components and gifts for new and returning users alike.
Usability Testing
We created a script that took our participants through three cooking scenerios. We tested new assets and gathered feedback and insights along the way.
Test Outcomes
Having tested the prototype, I learned that the ability to add more cooks needs to be highlighted on multiple pages which should enhance the users knowledge of multi-probe cooks and lead to more sales.
Three Key Learnings
I have learned so much over the course of this project but here are my top three:
1. Trust the UX design process (don't rush ahead or assume)
2. Organization is key (from labeling frames to clarity in dev mode)
3. Always be researching (even when you are scrollin' on the weekend!)
Next Steps
If given the chance to reiterate the current version of the design, I would advance the new color palette forward to include some animated mesh gradients in the mix.