Helping local retail economies thrive in the post-pandemic world
El Locale, 2024
Connecting local businesses and customers online
The Problem
During the COVID-19 pandemic, small brick and mortar stores without a strong internet presence struggled as customers shifted to shopping online. Many customers wanted to support local businesses but lacked an easy way to shop from their homes.
Even after the pandemic, these businesses have not regained their pre-pandemic success. The world has changed. And another pandemic is always possible. If small brick and mortar stores are to survive, they’ll need to connect with customers online, too.
The Solution
El Locale is a startup building an e-commerce platform for small businesses — beginning with its home of Portsmouth, NH — to share their products with customers online, and to encourage a flourishing local economy in the face of uncertainty.
The Challenge
Design of the platform was already underway when I came on board. The company had done substantial research into e-commerce platforms and customer behavior and drafted key screens as a proof-of-concept. But it needed help refining its designs and developing additional screens to create a complete prototype for testing.
Stepping into the project
My Role
I led a team of three designers — Stephanie Hua, Leah Kusumalayam, and Gautam Reddy — translatiing the company’s research into user flows, synthesizing the CEO’s feedback, and knitting our collective screens into a prototype in Figma.
Taking stock
Determining Scope
The company’s research offered insights into customers’ needs and the mental models they lean on in using e-commerce platforms. We identified a core set of tasks that customers would have to perform in order to navigate El Locale successfully:
Creating an account
Searching for an item/business by name/category
Adjusting search results by distance
Saving an item/business for later
Adding an item to the cart/editing the cart
Purchasing an item
Seeing account details
Updating an order
Saving a credit card to the account/editing the credit card
Adding/updating billing/shipping information
I mapped out these tasks in a series of user flows that helped us identify the screens that still needed to be designed and how the prototype would fit together.
Example: Purchasing an item
Completing the Flows
The flows revealed a number of additional screens that needed to be designed. For instance, there were existing designs for checkout screens that offered users the option of creating an account while completing a purchase, but there were no designs for screens accounting for creating an account before checkout. I consulted e-commerce giants for patterns.
Features:
Account creation/signin accessed through an “Account” link in top-level navigation on all screens
Clicking on “Account” triggers a popup with a signin button and an account creation link
The signin button and account creation links take users to separate pages
Verifies new users through a text message
Features:
Account creation and signin accesssed through a “Sign in” link in top-level navigation on all screens
Clicking “Sign in” triggers a popup form for signin that also has an account creation button
Verifies new users through email
Ideation
Designing the Remaining Screens
Armed with our research, we borrowed and adapted the patterns that made sense for El Locale. The Amazon account creation/signing flow, for instance, was simpler and cleaner than Etsy’s and better batched the aesthetic of El Locale. But we also made use of Etsy’s verification process for new users because it didn’t prioritize phone interaction.
Flow in Amazon:
Flow in El Locale:
Iterating Existing Designs
New research and new designs also revealed limitations of existing screens and components. For instance, the original navigation header didn’t account for location, favorites, or searching by categories. We went through several iterations.
Original:
Intermediate refinement:
Final:
Original home screen:
Final home screen:
Validation
Coming into Alignment
We’d presented our work to the CEO for input throughout the process, then presented the full prototype for approval prior to usability testing, to ensure that the team’s understanding of the product matched the company’s.
Feedback:
The CEO requested no major changes, validating our design direction
Some screens needed simplification because certain features weren’t needed for launch
Final Design
Easy to Build, Easy to Use
Based on tried and true e-commerce platforms, the prototype screens prioritize simplicity of interaction and a minimalist aesthetic that can translate easily across devices, making the platform suitable for all ages and user types.
Sample Screens
Item search results:
Individual item:
Business search results:
Individual business:
Purchase complete:
Payment methods:
Prototype
Insights
Existing patterns foreground the contents, not the platform.
Small businesses may sell unique and handmade products, but an e-commerce platform for small businesses doesn’t need to call attention to itself as artisanal, as well. What users need is a platform that’s largely invislbe, letting the products shine.
The realities of a platform’s launch affect the MVP.
We designed more than was needed for the MVP because we hadn’t taken into account the fact that the initial roster of businesses listing their products on the platform would be small and carefully curated. Additional features could be added in time.