MOBILE APP
E-COMMERCE
DESIGN
7 LEAVES CAFE
A reimagined user experience and interface design of the 7 Leaves mobile app, a popular destination for coffee and tea enthusiasts.
2024
YEAR
Figma
PLATFORM
ROLE
Designer
SUMMARY
In this project, I reimagined the user experience and interface design of the 7 Leaves mobile app, a popular destination for tea enthusiasts. Focused on enhancing usability, functionality, and visual appeal, my goal was to create a seamless and delightful tea ordering experience for users.
Through user research, wireframing, and prototyping, I crafted a modern and intuitive design that aligns with 7 Leaves' brand identity while introducing innovative features to elevate the app's performance. From extensive iterations, every aspect of the redesign was meticulously crafted with user-centered design principles to deliver a refreshing and delightful tea-sipping experience in the palm of your hand.
THE PROBLEM
The placement of "How to Use the App" disrupts the user flow.
The verbiage used is unclear and confusing; for instance, the meaning behind "Show QR-code" is ambiguous.
The images within the menu appear densely compacted and cramped.
The side drawer suffers from poorly designed animation and transition effects when opening and closing.
The map view is visible in the background underneath stores’ drop down suggestions.
THE PROCESS
The process below begins with my initial wireframes, mockups, and then to the high-fidelity prototype.
USABILITY TESTING
I then brought my idea to an interactive digital low-fidelity prototype and presented it to five potential users to collect feedback. I conducted a user testing session on 10 participants. I then took the responses through a card sorting exercise to find common themes among the participants.
LO- FIDELITY PROTOTYPES
SOLUTION
Homepage:
The "How to Use the App" section was moved to achieve a more intuitive flow.
Verbiage was revised to provide clearer guidance.
Changed "Show QR-code" to "Ordering in-store? Show QR-code to collect Leaves!" for improved clarity.
Side Drawer:
Opening/ Closing
Users can access the side drawer by tapping on the burger menu icon. To close the side drawer, users can tap on the dimmer or swipe the drawer to the side.
Map/ Store Locator:
Improve ergonomics by enabling users to seamlessly switch between viewing the map and the list of stores, facilitating easy access to the information they require. This would help reduce attention redirection and allow the user to easily refer to the map without interrupting their workflow or dividing their attention.
Optimize the user journey by providing customers with the ability to filter locations based on immediate needs, such as "Currently Open."
DESIGN CHANGES
Based on the user testing, I iterated on the previous design and created another iteration of the design. I made 2 major changes based on the user feedback.
Help Icon
In the first iteration (original design), the user would be able to learn more about how to use the app by clicking on an informational video. However, following user feedback, a simple help icon was preferred. I iterated the design and removed the video entirely. This decision was made considering that the video might be irrelevant for experienced users, and the app should ideally be intuitive enough for newcomers. For users needing support, the help icon is now conveniently located at the top left of the app's home screen and in the footer of the side drawer
Carousel
In the first iteration (original design), the "Redeem with Leaves" section was structured in a search and filter format. However, users recommended a carousel design to maintain consistency with the "Top Picks" section above.
DESIGN SYSTEM
HI- FIDELITY PROTOTYPES
FINAL DESIGNS
WHAT I LEARNED
Throughout my time working on this project, I’ve learned the importance of gathering as much user feedback in the early phase of a project. In this project, I started to gather user feedback a few weeks into working on the project, which helped provide strong first-hand evidence on decision-making.
GREAT DESIGN IS ITERATION
OF GOOD DESIGN
M. COBANLI