El Locale
Shop Local. Feel Good.
El Locale
Shop Local. Feel Good.
El Locale
Shop Local. Feel Good.
El Locale is a community-driven e-commerce platform that makes it easy to discover and shop unique, locally made products.
El Locale is a community-driven e-commerce platform that makes it easy to discover and shop unique, locally made products.
Overview & Context
Project Type
Group project completed as part of an industry design collaboration.
Scope
Developed a design system, conducted an information architecture audit, redesigned the logo, and built a prototype.
My Role
UX/UI Designer, contributing to research, design, and system development.
Duration
4 weeks
Overview & Context
Project Type
Group project completed as part of an industry design collaboration.
Scope
Developed a design system, conducted an information architecture audit, redesigned the logo, and built a prototype.
My Role
UX/UI Designer, contributing to research, design, and system development.
Duration
4 weeks
Overview & Context
Project Type
Group project completed as part of an industry design collaboration.
Scope
Developed a design system, conducted an information architecture audit, redesigned the logo, and built a prototype.
My Role
UX/UI Designer, contributing to research, design, and system development.
Duration
4 weeks
Context
El Locale is a community-driven e-commerce platform designed to connect consumers with local businesses, artisans, and neighborhood shops. The platform’s mission is to make shopping local both convenient and meaningful by offering a seamless experience for discovering and purchasing unique, locally made products.
Context
El Locale is a community-driven e-commerce platform designed to connect consumers with local businesses, artisans, and neighborhood shops. The platform’s mission is to make shopping local both convenient and meaningful by offering a seamless experience for discovering and purchasing unique, locally made products.
Context
El Locale is a community-driven e-commerce platform designed to connect consumers with local businesses, artisans, and neighborhood shops. The platform’s mission is to make shopping local both convenient and meaningful by offering a seamless experience for discovering and purchasing unique, locally made products.
Problem
As El Locale prepared for launch, the platform faced challenges with inconsistent design components, fragmented information architecture, and a lack of polished, user-friendly prototypes. These issues threatened usability, brand consistency, and the ability to scale as new features were added.
Problem
As El Locale prepared for launch, the platform faced challenges with inconsistent design components, fragmented information architecture, and a lack of polished, user-friendly prototypes. These issues threatened usability, brand consistency, and the ability to scale as new features were added.
Problem
As El Locale prepared for launch, the platform faced challenges with inconsistent design components, fragmented information architecture, and a lack of polished, user-friendly prototypes. These issues threatened usability, brand consistency, and the ability to scale as new features were added.
Solution
Our team developed a cohesive design system, streamlined user flows through interactive prototypes, conducted a full audit of the platform’s information architecture, and created engaging brand assets such as user badges and a refreshed logo. These deliverables collectively strengthened El Locale’s visual identity, improved usability, and provided the client with tools to scale confidently.
Solution
Our team developed a cohesive design system, streamlined user flows through interactive prototypes, conducted a full audit of the platform’s information architecture, and created engaging brand assets such as user badges and a refreshed logo. These deliverables collectively strengthened El Locale’s visual identity, improved usability, and provided the client with tools to scale confidently.
Solution
Our team developed a cohesive design system, streamlined user flows through interactive prototypes, conducted a full audit of the platform’s information architecture, and created engaging brand assets such as user badges and a refreshed logo. These deliverables collectively strengthened El Locale’s visual identity, improved usability, and provided the client with tools to scale confidently.
Role
As part of a five-member design team, my contributions focused on auditing and refining the consumer section’s information architecture, collaborating on design system development, and shaping key prototype flows. I also supported visual design tasks such as badge concepts and logo refinement, ensuring that all deliverables aligned with both user needs and El Locale’s brand mission.
Role
As part of a five-member design team, my contributions focused on auditing and refining the consumer section’s information architecture, collaborating on design system development, and shaping key prototype flows. I also supported visual design tasks such as badge concepts and logo refinement, ensuring that all deliverables aligned with both user needs and El Locale’s brand mission.
Role
As part of a five-member design team, my contributions focused on auditing and refining the consumer section’s information architecture, collaborating on design system development, and shaping key prototype flows. I also supported visual design tasks such as badge concepts and logo refinement, ensuring that all deliverables aligned with both user needs and El Locale’s brand mission.
1. Design System and Component Overhaul
What We Did:
We started with a fragmented and inconsistent collection of Figma components and style guides from previous teams. After consulting with the client to clarify their vision, we selected a flexible design system template and divided the work among our team. Over ten days, we systematically organized, standardized, and rebuilt components including buttons, typography, color palettes, and iconography.
Insights:
Building a cohesive design system is fundamental to reducing development inefficiencies and ensuring a unified user experience across platforms. We learned the importance of close collaboration and frequent client check-ins to align design decisions with brand values.
Why It Matters:
A scalable, consistent design system enables smoother handoffs between design and engineering, reduces technical debt, and establishes a foundation for future feature expansion without compromising visual coherence.
1. Design System and Component Overhaul
What We Did:
We started with a fragmented and inconsistent collection of Figma components and style guides from previous teams. After consulting with the client to clarify their vision, we selected a flexible design system template and divided the work among our team. Over ten days, we systematically organized, standardized, and rebuilt components including buttons, typography, color palettes, and iconography.
Insights:
Building a cohesive design system is fundamental to reducing development inefficiencies and ensuring a unified user experience across platforms. We learned the importance of close collaboration and frequent client check-ins to align design decisions with brand values.
Why It Matters:
A scalable, consistent design system enables smoother handoffs between design and engineering, reduces technical debt, and establishes a foundation for future feature expansion without compromising visual coherence.
1. Design System and Component Overhaul
What We Did:
We started with a fragmented and inconsistent collection of Figma components and style guides from previous teams. After consulting with the client to clarify their vision, we selected a flexible design system template and divided the work among our team. Over ten days, we systematically organized, standardized, and rebuilt components including buttons, typography, color palettes, and iconography.
Insights:
Building a cohesive design system is fundamental to reducing development inefficiencies and ensuring a unified user experience across platforms. We learned the importance of close collaboration and frequent client check-ins to align design decisions with brand values.
Why It Matters:
A scalable, consistent design system enables smoother handoffs between design and engineering, reduces technical debt, and establishes a foundation for future feature expansion without compromising visual coherence.
2. Iconography Design System
Challenge:
Icons were scattered across Figma files in inconsistent formats, some rasterized PNGs and font-based icons lacking scalability and clarity.
Actions:
We audited and reorganized all icons into logical categories, re-vectorized non-scalable assets, and designed new icons focused on warning and notification states to improve system feedback.
Learnings:
Clear and consistent iconography not only improves UI clarity but also reinforces trust and usability by guiding user actions during error states or system messages.
2. Iconography Design System
Challenge:
Icons were scattered across Figma files in inconsistent formats, some rasterized PNGs and font-based icons lacking scalability and clarity.
Actions:
We audited and reorganized all icons into logical categories, re-vectorized non-scalable assets, and designed new icons focused on warning and notification states to improve system feedback.
Learnings:
Clear and consistent iconography not only improves UI clarity but also reinforces trust and usability by guiding user actions during error states or system messages.
2. Iconography Design System
Challenge:
Icons were scattered across Figma files in inconsistent formats, some rasterized PNGs and font-based icons lacking scalability and clarity.
Actions:
We audited and reorganized all icons into logical categories, re-vectorized non-scalable assets, and designed new icons focused on warning and notification states to improve system feedback.
Learnings:
Clear and consistent iconography not only improves UI clarity but also reinforces trust and usability by guiding user actions during error states or system messages.
3. Effects Design System
Objective:
Our audit revealed inconsistent usage of shadows and interactive states (hover, active, disabled), resulting in a visually flat interface with unpredictable component behaviors.
Process:
We cataloged all existing effects, grouped and labeled them by elevation and use case, then integrated them into a centralized Effects Library within the design system for easy reuse.
Outcome:
This systemization added visual depth and clarity to UI components, improved consistency, and created clear documentation for future designers and developers.
3. Effects Design System
Objective:
Our audit revealed inconsistent usage of shadows and interactive states (hover, active, disabled), resulting in a visually flat interface with unpredictable component behaviors.
Process:
We cataloged all existing effects, grouped and labeled them by elevation and use case, then integrated them into a centralized Effects Library within the design system for easy reuse.
Outcome:
This systemization added visual depth and clarity to UI components, improved consistency, and created clear documentation for future designers and developers.
3. Effects Design System
Objective:
Our audit revealed inconsistent usage of shadows and interactive states (hover, active, disabled), resulting in a visually flat interface with unpredictable component behaviors.
Process:
We cataloged all existing effects, grouped and labeled them by elevation and use case, then integrated them into a centralized Effects Library within the design system for easy reuse.
Outcome:
This systemization added visual depth and clarity to UI components, improved consistency, and created clear documentation for future designers and developers.
4. Clickable Prototypes
Goal:
To create interactive prototypes illustrating critical “red routes” that reflect the most important user tasks for business owners and consumers.
Process:
Starting with high-fidelity mockups from a previous team, we refined flows into two categories: business owner and consumer journeys. The business owner flow improved dashboard navigation, reducing clicks from seven to two, while adding detailed flows for inventory management and report viewing. The consumer flow supported both search-driven and category browsing product discovery, optimizing usability and shopper behavior.
Learnings:
Prototyping critical user flows early and iterating based on client feedback ensures alignment between user needs and design solutions. Collaborating closely allowed us to cover complex business and consumer interactions comprehensively.
4. Clickable Prototypes
Goal:
To create interactive prototypes illustrating critical “red routes” that reflect the most important user tasks for business owners and consumers.
Process:
Starting with high-fidelity mockups from a previous team, we refined flows into two categories: business owner and consumer journeys. The business owner flow improved dashboard navigation, reducing clicks from seven to two, while adding detailed flows for inventory management and report viewing. The consumer flow supported both search-driven and category browsing product discovery, optimizing usability and shopper behavior.
Learnings:
Prototyping critical user flows early and iterating based on client feedback ensures alignment between user needs and design solutions. Collaborating closely allowed us to cover complex business and consumer interactions comprehensively.
4. Clickable Prototypes
Goal:
To create interactive prototypes illustrating critical “red routes” that reflect the most important user tasks for business owners and consumers.
Process:
Starting with high-fidelity mockups from a previous team, we refined flows into two categories: business owner and consumer journeys. The business owner flow improved dashboard navigation, reducing clicks from seven to two, while adding detailed flows for inventory management and report viewing. The consumer flow supported both search-driven and category browsing product discovery, optimizing usability and shopper behavior.
Learnings:
Prototyping critical user flows early and iterating based on client feedback ensures alignment between user needs and design solutions. Collaborating closely allowed us to cover complex business and consumer interactions comprehensively.
Consumer Prototype
Consumer Prototype
Consumer Prototype
Business Prototype
Business Prototype
Business Prototype
5. Badge Design
Client Request:
Design a badge to celebrate long-term user loyalty on the platform.
Design Approach:
We created multiple badge concepts that balanced playful aesthetics with brand consistency. The icons were crafted for scalability and clarity across all interface contexts.
Outcome:
The final badges enhanced user identity and engagement by providing meaningful recognition, delighting the client and adding an emotional connection to the platform.
5. Badge Design
Client Request:
Design a badge to celebrate long-term user loyalty on the platform.
Design Approach:
We created multiple badge concepts that balanced playful aesthetics with brand consistency. The icons were crafted for scalability and clarity across all interface contexts.
Outcome:
The final badges enhanced user identity and engagement by providing meaningful recognition, delighting the client and adding an emotional connection to the platform.
5. Badge Design
Client Request:
Design a badge to celebrate long-term user loyalty on the platform.
Design Approach:
We created multiple badge concepts that balanced playful aesthetics with brand consistency. The icons were crafted for scalability and clarity across all interface contexts.
Outcome:
The final badges enhanced user identity and engagement by providing meaningful recognition, delighting the client and adding an emotional connection to the platform.
6. Information Architecture Audit
Consumer Section:
I audited the consumer section, identifying missing navigation links (e.g., Refer a Friend, FAQ), and proposed new pages and CTAs to improve clarity and feature scalability.
Business Section:
Together with Poonam, we reviewed the business dashboard IA, highlighting missing modules like Inventory import/export, Settings sub-nodes, and better analytics visualization. Recommendations focused on closing gaps for seller operations and making content hierarchy clearer.
Insights:
IA audits are critical for uncovering structural inconsistencies and aligning design with real user workflows, supporting future feature integration and platform scalability.
6. Information Architecture Audit
Consumer Section:
I audited the consumer section, identifying missing navigation links (e.g., Refer a Friend, FAQ), and proposed new pages and CTAs to improve clarity and feature scalability.
Business Section:
Together with Poonam, we reviewed the business dashboard IA, highlighting missing modules like Inventory import/export, Settings sub-nodes, and better analytics visualization. Recommendations focused on closing gaps for seller operations and making content hierarchy clearer.
Insights:
IA audits are critical for uncovering structural inconsistencies and aligning design with real user workflows, supporting future feature integration and platform scalability.
6. Information Architecture Audit
Consumer Section:
I audited the consumer section, identifying missing navigation links (e.g., Refer a Friend, FAQ), and proposed new pages and CTAs to improve clarity and feature scalability.
Business Section:
Together with Poonam, we reviewed the business dashboard IA, highlighting missing modules like Inventory import/export, Settings sub-nodes, and better analytics visualization. Recommendations focused on closing gaps for seller operations and making content hierarchy clearer.
Insights:
IA audits are critical for uncovering structural inconsistencies and aligning design with real user workflows, supporting future feature integration and platform scalability.
Information Architecture
7. Logo Redesign
Opportunity:
With time available after core deliverables, we redesigned El Locale’s logo by integrating a location pin into the store icon, adding a subtle path to emphasize local discovery.
Impact:
The refined logo balanced simplicity and meaningful symbolism, modernizing the brand while maintaining recognition. The client was very pleased, and the new logo is slated for official adoption.
7. Logo Redesign
Opportunity:
With time available after core deliverables, we redesigned El Locale’s logo by integrating a location pin into the store icon, adding a subtle path to emphasize local discovery.
Impact:
The refined logo balanced simplicity and meaningful symbolism, modernizing the brand while maintaining recognition. The client was very pleased, and the new logo is slated for official adoption.
7. Logo Redesign
Opportunity:
With time available after core deliverables, we redesigned El Locale’s logo by integrating a location pin into the store icon, adding a subtle path to emphasize local discovery.
Impact:
The refined logo balanced simplicity and meaningful symbolism, modernizing the brand while maintaining recognition. The client was very pleased, and the new logo is slated for official adoption.
Learnings and Reflections
This project deepened our understanding of the importance of unified design systems in complex platforms, and how iterative prototyping drives better user experience alignment. Personally, collaborating within a diverse team taught me the value of clear communication and flexibility when addressing overlapping UX and UI challenges.
If I could start over, I would advocate for earlier and more frequent usability testing with real users to validate design decisions before finalization. Additionally, dedicating more time upfront to IA mapping could further reduce inconsistencies in wireframes and prototypes.
Looking ahead, I see opportunities to expand the design system to include accessibility guidelines and to explore more advanced interactions within prototypes to simulate real-world use cases more thoroughly.
Links to Design System & Prototypes:
Design System Figma
Clickable Prototypes Collection
IA Audit Figma
Learnings and Reflections
This project deepened our understanding of the importance of unified design systems in complex platforms, and how iterative prototyping drives better user experience alignment. Personally, collaborating within a diverse team taught me the value of clear communication and flexibility when addressing overlapping UX and UI challenges.
If I could start over, I would advocate for earlier and more frequent usability testing with real users to validate design decisions before finalization. Additionally, dedicating more time upfront to IA mapping could further reduce inconsistencies in wireframes and prototypes.
Looking ahead, I see opportunities to expand the design system to include accessibility guidelines and to explore more advanced interactions within prototypes to simulate real-world use cases more thoroughly.
Links to Design System & Prototypes:
Design System Figma
Clickable Prototypes Collection
IA Audit Figma
Learnings and Reflections
This project deepened our understanding of the importance of unified design systems in complex platforms, and how iterative prototyping drives better user experience alignment. Personally, collaborating within a diverse team taught me the value of clear communication and flexibility when addressing overlapping UX and UI challenges.
If I could start over, I would advocate for earlier and more frequent usability testing with real users to validate design decisions before finalization. Additionally, dedicating more time upfront to IA mapping could further reduce inconsistencies in wireframes and prototypes.
Looking ahead, I see opportunities to expand the design system to include accessibility guidelines and to explore more advanced interactions within prototypes to simulate real-world use cases more thoroughly.
Links to Design System & Prototypes:
Design System Figma
Clickable Prototypes Collection
IA Audit Figma
Thank you for reading!
Thank you for reading!
Thank you for reading!
See More Work
Check out more UX case studies and design projects.
View More Projects
See More Work
Check out more UX case studies and design projects.
View More Projects
See More Work
Check out more UX case studies and design projects.
View More Projects