El Locale - One Month Contract

El Locale is an e-commerce platform that connects consumers with local businesses and artisans, making it easy to discover and purchase quality, locally made products while supporting community and small business growth.

Problem:

Prepare the El Locale platform for launch by developing a cohesive design system, refining Figma components, and delivering essential assets such as a clickable prototype and badge designs. We also included a comprehensive audit of the existing information architecture and created multiple new brand logo variations.

The Team: 

Kyle Tanner, Skylr McCormick-Isom, Poonam Hota, Vincent Le, Matthew Page

Objective 1:

Create a cohesive design system that would establish a consistent visual aesthetic and streamline the ongoing development of both the website and mobile app.

We began with a disorganized collection of components and outdated style guides inherited from previous design teams. While these materials offered a starting point, it was clear that significant work was needed to build a unified system.

Our first step was to understand the client’s vision for the design system. Based on this input, we selected a template to use as a foundation and reference. The design team then divided the work into manageable sections, collaboratively building out the system over the course of ten days. By the end of this process, the design system had reached a level of polish and functionality that met the client’s expectations, allowing us to shift focus to the next phase of project deliverables.

Full Design System

Timeline:

4 weeks

Final Outcomes:

• Delivered a polished, functional design system that met the client’s expectations.

• Created a scalable foundation that supports ongoing project development.

• Enabled the team to move forward efficiently to the next phase of deliverables.

Objective 2:

Create several clickable prototypes of the most important red-routes necessary to display core business functionalities.

We had the advantage of starting with high-fidelity mockups developed by a previous team, which provided a strong foundation for our work.

We divided the red routes into two main categories: business owner flows and consumer flows. Each prototype illustrates the end-to-end user journey involved in completing a specific task. 

We made changes to the existing business owner prototypes, and added key screens allowing users to navigate to their business dashboard, orders, reports, and inventory shown below.

We decreased the number of clicks for the business owner to access the business dashboard from 7 clicks to 2 clicks.

Consumer Flows:

We generated two prototypes to showcase the full customer ordering process:

• Search for a product on the home screen

• View product details

• Add to cart

• Checkout and confirm the order

View Prototype

Consumer Section

Full Consumer Audit

Full Business Owner Audit

Our next objective was to focus on allowing the business owner to:

• Edit inventory items

• Create new items in the inventory

• View orders and print order labels

• Switch between monthly, weekly, and daily business reports

Objective #3: User Badge Designs

Our goal was creating a fun, unique, and brand oriented badge system which allows users to showcase their relationship with El Locale.

The badges will be implemented across the platform, particularly next to usernames and in profile sections.

Objective #4: Information Architecture Audit

Our team audited both the consumer user section and the business owner section of El Locales Information Architecture(IA).

In the consumer section of El Locale, our team focused on improving navigation clarity, aligning page layouts with the design system, and ensuring future features could be implemented smoothly.

In the business owner section section, we uncovered gaps in navigation, improved content hierarchy, and aligned the platforms IA with established patterns from leading B2B marketplaces.

Blue box’s indicate audit sections

Consumer Section Audit Points

Adding missing links to the global footer:

• Links include refer a friend, Report an issues, and FAQ.

• Ensured there are clear CTAs, contextual prompts, and dedicated pages.

Defining requirements for upcoming consumer features:

• Included the Order a Coffee, Consumer Site Button, and My Reward Points features, ensuring they align with the existing IA and design system.

Standardizing page layouts:

• Updated the About Business page header for consistency across desktop and mobile.

Recommending updates to Business Approvals:

• Updates would improve how consumers interact with and trust local business profiles.

Business Owner Section

Green and grey box’s indicate audits

Business Owner Audit Points

Clarifying and Completing Settings IA:

• Mapped out and organized all major settings categories (Business Details, Notifications, Billing & Payments, MFA).

• Identified missing flows such as Subscriptions, Receipts, Transfers, and Deactivate Business.

Adding Missing Actions to Item Library:

• Proposed placement for Import Items and Export Items actions in the Library toolbar.

• Integrated access to Image Library and Upload Images within the product creation flow.

Refining the All Orders Section:

• Flagged missing elements like bulk actions, advanced filters, shipping status tags, and order-level menus.

• recommended enhancements to improve order tracking, sorting, and operational control for sellers.

Organizing Business Specific Billing Flows:

• Defined flows for managing payment methods, billing addresses, and downloading receipts.

• Highlighted absence of tax related UI (Activate Business Taxes, tax reports), recommending future integration.

Suggesting Early Wins for Fast Progress:

• Recommended prioritizing the completions of Items and All Orders sections, which require fewer structural changes and can be implemented rapidly.

Our Works Importance

Our team laid the foundations for El Locales future growth through the implementation of consistency, usability, and scalability across the platform.

Our implementation of a unified Design System enables future brand wide iterations to scale more efficiently. Refined user flows increase usability and overall satisfaction for Consumers and Business owners.

Our audit of the existing Information Architecture allows for the implementation of future features and our badge system and logo design drive user engagement and increase brand identity.

Our deliverables for El Locale support their mission to support local businesses and promote shopping locally.