overview
Mercato is a grocery delivery service aimed at providing delivery solutions for independent and local grocers.
Through Mercato, customers can access their favorite local grocers and specialty shops and have their orders delivered right to their doorstep the very same day.
the team
Sam Colonna • Julia Purcell • Veronika Krasnolenska • Doug Forsythe
the tools
Figma • UserTesting.com • Google Forms • Hotjar • Illustrator
the methods
User Interviews • User Surveys • Usability Testing • Contextual Inquiry • Competitive Analysis • Affinity Mapping • Persona Development • Journey Mapping • Feature Prioritization • Design Studio • Rapid Prototyping
my role
Lead UX Researcher • UX/UI Designer
the problem
For many small businesses, COVID-19 was a death knell
The COVID-19 pandemic was devastating not only to those inflicted with the disease, but also to those small businesses who were crippled by lockdown restrictions.
For many independent grocers, however, Mercato proved to be a lifesaver.
The platform focused specifically on elevating this subset of merchants and offering them an opportunity to not only survive the pandemic, but compete with larger grocers who had begun to deliver directly to customers.
However, the native product exhibited major usability issues that made it challenging for users to find the groceries they needed.
A company rebrand offered our team the perfect opportunity to give our app a refresh…
the process
1 discover
User Surveys • User Interviews • Contextual Inquiry • Competitive Analysis • User Flow Analysis
2 define
Affinity Mapping • Identification of Trends & Insights • Persona Development • Problem Statement Formulation
design 3
MoSCoW Map/Feature Prioritization • Design Studio • Mid Fi Wireframing • Mid Fi Prototyping • Usability Testing
deliver 4
Hi Fi Mockup • Hi Fi Prototyping • Spec Doc • Stakeholder Presentation
1 discover
Our team conducted extensive research into native app’s usability issues. This research included:
3 different User Surveys
5 Contextual Inquiries/Ride-alongs
More than 20 usability tests
From this research, the team identified 6 primary areas of issue:
Consumers need a faster way of finding the products they need
Consumers need a better way of discovering new merchants
Consumers want to be guided to relevant merchants and products
Consumers need to be filtered by their specific goals earlier in the flow
Merchants need a way to offer special deals to customers
Our team needed to update UI patterns to match the company’s rebranded identity
Competitive Analysis
User Flows
To better identify how we could optimize our shopping flow, I mapped out the flow for our app as well as those for multiple competitors and comparators, including Shipt, Instacart and Uber Eats.
These flows showed us the flaws in our app’s navigation scheme, as well as ways in which we can create a more intuitive experience for our users.
2 define
The team used the insights gleaned from our interviews and analytics to craft a persona representing the typical Mercato consumer. This persona would later be used to guide our design process. Meet Maddy:
Problem Statement
When people shop for groceries online, they want to buy all their groceries quickly and easily.
Maddy has trouble shopping on Mercato because she can’t find her favorite shops, nor the items she needs.
How might we help Maddy get the groceries on her list in the quickest, most efficient manner?
3 design
After extensive research, we felt there were a number of table stakes UX improvements that needed to be made to the product.
Using the MoSCoW Method, the team categorized features in terms of the impact they would have on the user’s experience as well as the effort required for their implementation.
Based on the needs identified in our research, our team looked to include:
With the features defined, we were ready to design a product that would more efficiently connect our customers with the merchants and products they needed.
By dividing the grid of items into carousels labeled by aisles, we gave users the ability to easily scan a range of product categories and quickly find the items they need without having to navigate away from the store’s home page.
Similar to the product carousels, store carousels allow the user to scan through categories of merchants based on the products they’re looking for. The carousel layout can be alternated based on the user’s shopping habits and/or company goals.
We hoped to accelerate our users’ shopping experience and encourage repeat shopping by giving them quicker access to the stores they shop at and the items they typically buy.
Coupons allowed merchants to create their own deals, promote specific items in their store, and engage with their loyal customers more directly.
Banners allowed our team to show off our new brand identity and provided a consistent space to advertise new promotions.
The team hoped to remove confusion regarding the search function and give users more control over their experience by allowing them to specify whether they were searching for an item or a store
By giving users more ways to filter both store and product results, we allowed users to narrow their options to those that were most relevant, facilitating a speedier shopping experience.
4 deliver
Prototype
Next Steps
Usability Testing
In order to ensure an optimal user experience, further testing is required. This testing would either confirm or refute the changes made to the app and allow us to tweak anything that confuses the user..
Alternating Splash Pages
To reinforce the new brand, delight the user and provide a fresh and engaging experience, we would look to create a rotating set of splash pages that greet the user differently each time they open the app.
Implementation
Once the designs have been tested and any experience issues have been resolved, the designs will be ready for handoff and implementation. A spec doc will be provided, listing all specifications regarding spacing, sizing, colors and interactions.