Helping local retail economies thrive
E-commerce Platform | 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 their local businesses but lacked an easy way to shop from home.
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 over the internet, too.
▻ The Solution
El Locale is a startup building a location-based e-commerce platform for small businesses — beginning with its home of Portsmouth, NH — to share their products with customers online, and to encourage flourishing local economies in the face of uncertainty.
Stepping into the project
▻ The Challenge
Design of the platform was already underway when I came aboard. The company had researched e-commerce platforms and customer behavior and drafted screens as a proof-of-concept. But it needed help refining its designs and developing additional screens to build a prototype for testing.
▻ My Role
I led a team of three designers — Stephanie Hua, Leah Kusumalayam, and Gautam Reddy — translating the company’s research into user flows, gathering and synthesizing feedback from the CEO, and knitting our collective work into a prototype in Figma.
Understanding the customer’s journey
▻ Synthesis of Existing Research
The company’s research offered insights into customers’ needs and the mental models that they leaned on when using e-commerce platforms. We determined a core set of tasks that customers would have to perform in order to use 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/editing a credit card
Adding/updating billing/shipping information
I mapped out these tasks in a series of user flows that helped us to identify screens that still needed to be designed and how the prototype would ultimately fit together.
Purchasing an item
Designing the remaining screens
▻ Additional Competitive Analysis
We found that a number of new screens would need to be designed: for instance, screens for account creation. The platform was already heavily inspired by the e-commerce giants Amazon and Etsy, so we consulted them for tried-and-true patterns to adapt.
Features:
Account creation/signin accessed through an “Account” link in top-level navigation on all screens
Clicking “Account” triggers a popup with a signin button and an account creation link
Verifies new users through a text message
Features:
Account creation/signin accessed through a “Sign in” link in top-level navigation on all screens
Clicking “Sign in” triggers a popup form for signin with an account creation button
Verifies new users through email
▻ New Screens
In the case of account creation/signin, Amazon offered a simpler flow than Etsy and better matched El Locale’s aesthetic. But we also borrowed Etsy’s verification process for new users because it didn’t require phone interaction and thus facilitated desktop use.
Flows in Amazon (top) and El Locale (bottom)
▻ Updates to Existing Designs
New designs also revealed the limitations of certain screens and components that had already been designed. For instance, the original navigation header didn’t account for the user’s location, favorites, or searching by categories. This had to be remedied.
Original (top) and final (bottom) navigation bars
Original (left) and final (right) home screens
Validating the prototype
▻ Company Feedback
After completing the new screens and updating the existing ones in Figma, we at last had a prototype. We’d already gathered the CEO’s feedback throughout the design process, but a final round of feedback was needed for identifying any gaps before full-scale usability testing.
Feedback:
The CEO requested no major changes, validating our design direction.
Some screens needed simplification, because certain features would be rolled out after the launch of the platform.
▻ Final Screens
The prototype prioritized simplicity of interaction and a minimalist aesthetic that would translate easily across devices, making the platform suitable for all types of customers.
Item (top) and business (bottom) search results
