El Locale
An e-commerce platform designed to help small businesses connect with consumers
Overview
The Problem
In the post-pandemic world, small businesses still struggle to regain their sales levels, as consumers favor online shopping for its convenience, etc. El Locale is a startup building an e-commerce platform to help small businesses reach consumers online.
The Challenge
For this project, I stepped into a design process that had already begun. The company had conducted preliminary research and drafted screens, but it needed help organizing, refining, and completing its work to create a prototype for testing.
My Role
I led a team of three designers: Stephanie Hua, Leah Kusumalayam, and Gautam Reddy. I translated company research into user flows, delegated design tasks, synthesized the CEO’s feedback, and knit our collective work into a prototype in Figma.
Process
Stepping into an existing design process is an opportunity to identify and fill gaps. I had the team focus on understanding the work that had been done before we began the project and tackling the work that was still needed for completing an MVP.
Research
Determining Scope
The company’s research offered valuable insights into users’ needs and the mental models they’d bring to an e-commerce platform. We identified a core set of tasks that consumer users would have to perform in order to use the platform successfully:
Create an account
Search for an item / business by name
Search for an item / business by category
Adjust search results by distance
Save an item / busienss for later
Add an item to the cart / remove the item
Purchase an item
See account details
Update an order
Save a credit card to the account / delete the credit card
Add / update billing information
Add / update shipping information
To translate these tasks into a set of screens, I developed user flows that mapped out the tasks from start to finish.
Example flow: Completing a purchase
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 contents.
Small businesses may sell unique, often handmade products, but an e-commerce platform for these businesses doesn’t need to call attention to itself as unique, too. What users need is a platform that’s largely invislbe and lets 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.