top of page

Lupita's Corner

A new website for a local small business

Money Shot inside.png

Overview

Lupita’s Corner Market has lost 80% of its business due to the pandemic when the high school and elementary school across the store had to shut down. The students, their parents, and the faculty made up a majority of their customer base, but they can no longer physically access the store. 
 
Lupita’s has an opportunity to increase business by adjusting to a different type of customer - the people living nearby that are working from home. A new website was our approach to help increase their business and engagement with the Westlake neighborhood and the greater Los Angeles community.

Role

UX / UI / Web Designer

     

Duration

8 months

     

Skills & Tools

Competitive Analysis, Interviewing, Storyboarding, Wireframing, Experience Prototyping, Figma

Challenge

How might we empower Lupita's Corner to help increase their business and engagement with the Westlake neighborhood and the greater Los Angeles community?

Solution

Lupita’s Corner Market has an opportunity to increase its business and online presence through a new and inviting website.​

 

We designed a clean, minimalist, and modern website by integrating Lupita’s Corner Market’s new brand identity - a fresh and vibrant market for the community with a farmer’s market feel. We combined the market’s new logo, signature color palette, and vibrant images of the market’s offerings with a simple user flow.

​

Through our design of a new web and mobile site for Lupita’s, customers can easily view their menu, search for grocery items, and also learn the story of the family behind the business. The concept is minimalist, colorful, and inviting. This new design will complement the renovations and re-branding of the newly renovated store to help empower a local small business in Los Angeles.

Video of  'Goods' page

​

Process

The Process - New (4).png

01 
Understanding the Problem

Client Interview

We started the design process by meeting the client, Luz Arango, at the store to talk about her needs for the website. The market had recently undergone a renovation and started offering healthy and freshly made food options that previously were not available in this area of LA. During the interview, we had the opportunity to observe Luz on a typical workday as she helped us define her primary and secondary goals for the website.

Client Primary Goals
Schnabel.png
Client Secondary Goals

Stakeholders Map

After talking to Luz and understanding her goals and her target audience for the website, we created a stakeholders map to identify those who will be impacted by the design.

The primary users of the website are young individuals in their early 20s and 30s who are currently working from home and live in the neighborhood.

​

There is also an opportunity to reach more potential customers since the market has already been active on social media and gaining more attention.

Lupita's Stakeholders Map

02
Identifying the Opportunities

Contextual Inquiry

Once we defined our primary users, we conducted contextual inquires by accompanying them as they shopped at Lupita's. The process informed us about why they currently shop at the store, their pain points, and what would encourage them to use the store’s website. Our key findings are shown on the right.

​

We learned that customers want easy access to the deli menu and other products in the market, which could help increase profits for the store.

Since Lupita’s is now offering call-in orders for pick-up, this website could create a safe way for customers to order food and pick up during COVID. This is especially important for those who are driving since parking is difficult in this area.

Contextual Inquiry - Final.png
Group 235.png
Client and Customer Needs (1).png

Understanding the Needs

After better understanding the customers' needs and behaviors we put together our notes of the most important needs and wants from the client as well to compare and better validate what we should focus on when creating the website.

03
Design Process

Comparative Analysis

We decided to do a comparative analysis of similar local small businesses to understand how they structured their websites.

 

The two are examples of some we thought were successful because of the simple and clear navigation and how they tie in their distinct brand identities from their physical stores to their website.

Hi Lo

Hi-Lo Store & Website
Consistent Brand Identity

CandM

C&M Cafe & Website
Consistent Brand Identity

Storyboarding

We storyboarded what a scenario would be if a customer uses the new website to order and pick-up a sandwich from Lupita’s Corner Market. This helped us prioritize a simple user flow to achieve this task.

Lupita's Storyboarding

User Flow & Wireframes

After storyboarding, we created a user flow diagram that includes navigation categories to address customer and client needs. We simplified the structure of the website to make it easy for shoppers to browse. We created wireframes based on this diagram for usability testing.

Lupitas-Initial-User-Flow
Frame 24 1 (1).png

Understanding the Needs

After better understanding the customers' needs and behaviors we put together our notes of the most important needs and wants from the client as well to compare and better validate what we should focus on when creating the website.

Iterations

We took the constructive feedback we received in the first iteration and created a second user flow, wireframes, and a new prototype. Below is a visualization of our changes and our thought process. They show the development of the website from the MVP to the second iteration.

Iterations Wireframes - Mobile.png
Iterations Wireframes - Mobile.png

Iterations - Mobile

Lupitas Website Flow Diagram
Iterations Wireframes - Desktop.png

Iterations - Web

Brand Identity

We received positive feedback from the client and users after this iteration which led us to create a high-fidelity prototype.

 

We incorporated the market’s new brand identity by utilizing their redesigned logo and color palette from the market renovations.

Lupitas Logo 1.png
X - 5 1.png

04
Final Design

Hi-Fi Prototype

The image below shows our current design of the Home, Grocery, and About sections of the website.

​

With this design, we were able to successfully maintain a cohesive brand identity, provide customers with useful information about the store, and maximize customer engagement by giving the client an easy way to update her food and drink menu.

Frame 25.png

High-Fidelity Prototype

Conclusion

We have continued to iterate on the design and are excited to test and see its effectiveness. We hope the website will help drive more foot traffic to her store. We are continuing to work with Luz to have customers be able to order directly from the website.

0CAEE0AE-C0DE-4A28-B108-6283E4D1EF18.JPG

Meeting with the Client

bottom of page