Role
UX Research
UI Design
Interaction Design
Prototyping
User Testing
Tools
Figma
Swift UI
Timeline
12 weeks
The Problem
A new landing page was needed before the biggest sales day of the year.
We had already been working on a complete app redesign, so we took pieces of our newly designed user flow, namely the lading page which featured a parallax scroll.
But this created a few more problems to solve, what would be the exciting new content be to hold the focal point, the header that disappears behind the parallax scroll, and how will the user search content from this new page?
The Solution
Iterate new features, based on user research, and test them within our team. In conclusion, a new horizontal scroll that would confirm for the user that they have ongoing cooks would ease a pain point. It allows the user to scroll the new landing page with the peace of mind that their chicken will not be overcooked!
Business & User frustrations
A new landing page allows users to visually see all of what MEATER has to offer, with a new search feature and landing page, while also keeping track of their personal cooks.
Primary Frustration
Secondary Frustration
Competitor Benchmarking
We were highly inspired by the UI of the Apple App Store landing page, search functions were referenced from sites such as Spotify and Uber, content was referenced from competitors such as Typhur and iChef.
Problem Space
Stakeholders desired a new landing page for the app. It should allow users to access the MEATER app without needing to pre-purchase a device (as it previously existed.) It should streamline content on the app into one page for easy browsing. It should incorporate current UI trends and feature a search bar for ease of use.
A sketch of our brief:
How Might We… Insert an new landing page into the current user journey that both fits seamlessly into the trusted user experience while also inspiring confidence in our forward thinking vision.
Ideation
After choosing to move forward with our ongoing cook card to be the focal point of the landing page, we began to ideate on the mesh gradient, states of current cooks and search function designs.
We were highly inspired by the UI of the Apple App Store landing page, search functions were referenced from sites such as Spotify and Uber.
And, as always, we got out the sticky notes (virtual and paper ones!)
What can we add
more direct way for users to access cooks and proceed to set up a cook.
What can we improve
Design and content accessibility.
Rapid Prototyping
Styles & Components
We created assets for both tablet and mobile designs, giving options for both Android and iOS interfaces.Incuded in the assets were new galss cards to act as the "Ongoing Cook Card" and new styles of icons to the design library for the search functionality.
Design Handoff
Landing screens were annotated in detail for Mobile and Tablet format for both Android and iOS.
High Fidelity Prototype
Initial Developed interface
The dev teams first version of the new landing page. Still a lot of kinks to work out, including animated mesh gradient, search functionality and glass cards. But it is on it's way!
Always a magical moment when you begin to see your designs begin to exist in coded beauty.