Helping local retail economies thrive

E-commerce Platform | El Locale, 2024

Connecting small 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 almost exclusively online. Many customers wanted to support their local businesses but lacked an easy way to shop from home.

After the pandemic, these businesses didn’t simply regain 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 via the internet, too.

▸ The Solution

El Locale is a location-based e-commerce platform for small businesses — launched in its home base 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 El Locale startup had researched e-commerce platforms and customer behavior and drafted screens as a proof-of-concept. But it needed help refining 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 startup’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 startup’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 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.

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 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