CLIENT
Oja Express, a grocery delivery service for hard-to-find cultural ingredients. They have an existing app with loyal customers, but a website with a high cart abandonment rate.
CHALLENGE
We were asked to improve the user experience of their mobile website.
DELIVERABLES
Domain research, user research, mobile mid-fi prototype, usability testing, annotated wireframes for mobile, future recommendations, heuristic evaluation
TIMELINE
4 weeks
THE CHALLENGE
The Client’s Challenges:
Products are known by multiple names and are hard to find.
The target customers are first and second generation immigrants who know products by many different names based on their culture and the language they speak. This can make finding a specific item difficult.
How can we help users find items that have several different names?
Accommodate the future onboarding of additional stores to the website.
Oja Express plans to onboard more stores for users to choose to shop at, but due to business constraints, users can only shop at one store per transaction.
How can we make it clear to users that they are locked into shopping at one store?
Increase “stickiness” for first time users.
Oja Express has loyal customers on their mobile app, but they see a high cart abandonment rate on their website. They want more people to complete their purchase.
How can we build trust with the users and make their experience delightful?
The Users’ Challenges:
Quickly find what they need, no matter how they search or browse.
Users expect an online shopping experience similar to what they’ve experienced on other sites.
How can we support users no matter their searching and browsing preferences?
Get what they want, exactly how they want it.
Certain recipes often call for a specific meat cut. Users need Oja Express to deliver on those special preferences.
How can we give users the ability to communicate their preferences?
THE APPROACH
A high level overview of our design process.
We took a user-first approach.
We found the good, the bad, and the ugly.
9 interviews with current customers gave us insights into how they search for items, what they like, and what their pain points are when using Oja Express. We wanted the final product to align with the customers’ expectations and preferences.
We conducted usability tests on the current site after discovering a bias among customers.
We decided to pivot and conduct 8 usability tests on the current site that weren’t initially in our research plan because the customers we first interviewed held a heavy bias. They knew the owners and were willing to forgive inaccurate orders and other small inconveniences. We didn’t feel comfortable basing the project off their opinions alone, so we conducted the tests with non-customers to round out our data set.
We defined the user and the problem.
The problem statement guided us through every step of the remaining design process.
People who shop for culturally diverse foods on Oja Express need a trustworthy, white-glove experience to find and purchase groceries because they delight in discovering significant items and want to feel confident entrusting that responsibility to an online platform.
We affinity diagrammed after user interviews to identify significant patterns and insights to ensure the final solution solved the users’ problems.
We stayed agile.
We stayed on paper as long as possible.
In the interest of time and efficiency, we waited as long as possible to go digital. White boards and paper and pencils were our best friends as we collaborated on the site map, explored user flows, and converged pieces of concepts.
We created a quick paper prototype and did guerilla testing before investing time prototyping in Figma.
No ideas are sacred. Iterate fast and often.
We ideated by sketching on paper and whiteboards. In all, we sketched 93 different concepts as a team with the intention of narrowing down concepts and combining ideas to test with users. After every round of user feedback, we scrapped unappealing ideas and tweaked ideas as users found necessary while still aligning with business goals.
I facilitated our team’s effort to narrow down our concepts to wireframe and test with users.
THE DISCOVERIES
Mobile is a busy user’s best friend.
Users prefer to browse for groceries on mobile because, as busy professionals with families, they are constantly on the go. They only visit the website if they aren’t near their phone.
Cultural representation brings delight.
We tested the concept of browsing products by region. When users saw their region represented, they felt seen and delighted. Cultural representation helps users build a bond with Oja Express.
Heavy reliance on images to make sure they’ve chosen the right product.
Users rely on images to properly identify a product. User interviews confirmed what the clients told us: many products are known by several names. We also learned that current customers prefer to use the app over the mobile website because the app features larger photos.
Users need the ability to specify preferences.
Users need their meat cut in a specific way for certain traditional recipes from their culture. A pain point of the current site is that users can only order meat cut one way per transaction.
SOLUTIONS
To transform our insights into a prototype, we first whiteboarded user flows to understand the different ways the user would accomplish their main task: to find a specific item and purchase it. We then white boarded wireframes to ensure our design patterns were consistent from feature to feature. This allowed us to create a cohesive, flexible design system that can scale as Oja Express grows.
Meeting Users Where they are: On the go.
Mobile-first design
We designed the website to be mobile-first, not only due to best practice, but also because that’s where users get the most value and convenience.
Leading the user through the browsing process
Prioritized navigation
We simplified the existing navigation by keeping essentials in the hamburger menu and moving non-essential links to the footer menu in order to guide the user through the shopping experience. We included an “Our Mission” page so that users can familiarize themselves with Oja Express and build trust before placing their order.
BEFORE: There were two top navigation menus with 15 menu options between the two. Several menu options repeated themselves.
AFTER: We narrowed the main navigation options to four and prioritized them based on what we want the user does first on the site.
AFTER: Users have four ways to browse: Region, department, special preference, and store.
AFTER: The site didn’t have bottom navigation, so we took advantage of the screen real estate and added the important but not urgent links to the footer.
Delight through a culture-forward approach
Search by region
The search by region function tested extremely well with users. It guided them through the browsing experience with minimal effort while also making users feel represented and delighted.
These tiles are easily replicable as Oja Express carries more products from more regions.
Let’s get visual, visual
Visual first design
Because users rely on visuals to identify the correct product, we made images the first thing a user sees on the page. We have also designed the “search by region” section to be image-forward as well.
A large product photo is displayed first on the page since users rely on photos to identify the correct product.
It takes a village
Crowdsourced product names
After learning from both the clients and the users that products are known by many different names, we created a way for users to add product names that can be searched by others. This feature will increase search accuracy and help users find what they’re looking for.
Crowdsourced names allow users to contribute to the Oja Express community as well as help others find products by new names.
Pick your preference
Meat preferences selection
This feature allows users to choose their meat, cut size, and add multiple types of meat cuts to one transaction--a concept that was well received in concept testing. We implemented this feature into the final design because it allows the user to feel confident that they are going to receive exactly what they want, thus building long-term trust and delight.
Users can toggle between cut sizes and see photos of what the cuts look like. They can now add multiple cuts to a single transaction.
Preparing for future growth
Store selection user flow
The current business model only allows users to shop at one store per transaction, which becomes a challenge as multiple stores are onboarded onto the website. We came up with several user flows that guide users to choose a store to shop at no matter where they begin their browsing or searching journey.
Example of two user flows. Users need to choose a store before they can shop, no matter how they enter the flow.
OUTCOMES
Designing for the future
Our team’s user-first approach and willingness to pivot and iterate allowed us to provide solutions to our client’s and users’ biggest problems, as well as get ahead of future needs.
We delivered a scalable design system
Oja Express plans to grow and onboard new stores, so we designed the entire design system to easily scale for additional stores. We outlined changes that would need made to our designs if they add additional ways to browse and search on the site, which will help them make informed decisions in future iterations.
Heuristic evaluation for a trustworthy experience
We conducted a heuristic analysis on the current website and handed it off to our clients to help educate them about UX best practices. Although we found 32 heuristic violations and we addressed 20 of them in our prototype, we encourage the clients to address the remaining eight violations as they continue working on the site.
Grab the low hanging fruit: Customers want to shop by recipe
Throughout user interviews and concept testing, users repeatedly mentioned their desire to shop by recipe. Oja Express shares recipes on social media and on their blog, so we recommend they provide recipes on the site and internally link the ingredients. This provides users an additional way to browse and find delight in the website with minimal effort to implement.
SEE MORE WORK
Bon Voyage
Travel app UX and UI design.
Logos
Workshop planner desktop app