The Product: Leafly is the world’s most trusted destination to discover cannabis products and order them from legal, licensed retailers. More than 100 million people visit Leafly each year to learn more about cannabis and order online with local businesses. Leafly is powered by a strong mission to be a force for positive change in our world and the cannabis industry.
The Team: The team for this project consisted of the native team Engineering Manager, iOS Developer and myself as sole Product Designer.
Overview: Our native application was in serious need of an overhaul, with countless outdated patterns, disparity with web functionality and many usability issues. When I joined the team in Fall 2021, the native team was extremely understaffed and the app was in need of serious design help!
My Role: As Senior UX Designer, I worked as a main contributor to the project by initiating and conducting an in-depth audit of our native app, conducting research and completing design iterations as well as defining release phases and testing plans.
Objectives: Our main objectives were to create consistency and functional parity between our native app and website, as well as creating a very intuitive and expected native experience in line with OS guidelines set out by Android and Apple.
The Problem: "Our native apps are not in parity with our web experience and do not conform to OS guidelines.”
Native Audit: The first step in my design process was to conduct an in-depth audit of how our native apps align with both Apple and Material design guidelines in order to identify potential platform inconsistencies.
After reading through Material Design Guidelines and Apple Human Interface Guidelines, I used Figjam to note all areas of nonconformance within our applications. I grouped sticky notes under main categories such as interactions, navigation, search, etc.
From there, I worked closely with Design Management and stakeholders to prioritize areas of focus. From that audit, we identified the need to lay a stable foundation for our apps and determined that navigation is a huge area for improvement.
Navigation Findings: One of the main areas our apps needed updating was navigation. Not only was the main navigation inconsistent between Android and iOS, but both apps utilized outdated sidebar navigation with ungrouped and cluttered menu items.
Per Apple guidelines, it is recommended to only use bottom navigation if possible and to not utilize a sidebar - which we’re seeing less and less of in native apps.
By rearranging and relocating core navigation items like Bag and Account, I was able to consolidate menu items and do away with our current More menu.
There were also serious usability concerns with our existing bottom navigation - the unselected tab colors did not meet minimum required contrast levels for ADA compliance. As part of this update, I have adjusted the colors which greatly improves contrast and legibility.
Search: The number one most tapped on menu item within our app is Search. Our current search is lacking in core functionality to help the user find what they are looking for. Adding recent search history, helpful predictive text and organized results will make it much easier for users to navigate our experience.
We have also changed the name of our search menu item to Browse and added in functionality to the main search hub. Users can now launch right into searching the app, but are also greeted with categories and suggestions to provide additional guidance.
These new additions can be personalized per user based on past search history, be updated during holidays or special promotions as well as provide Leafly with additional revenue streams with sold content or advertisements.
Final Designs:
Visit Leafly App Store