Lupita's Corner Market

A new website design for a local small business

Role

UX, UI & Web Designer

Length

8 months

Skills & Tools

Competitive Analysis, Interviewing,

Think-Aloud, Storyboarding, Wireframing, Experience Prototyping, Figma

Description

Lupita’s Corner Market has an opportunity to increase their business and online presence through a new and inviting website.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.

The Problem

Lupita’s Corner Market has lost 80% of its business due to the pandemic once the high school and elementary school that made up a majority of their customers had to close down. The challenge is to design a new website to help increase business and engagement with the Westlake neighborhood and the greater Los Angeles community.

Our Solution

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.

Video of mobile site showing 'Other Goods'

Video of the current website design showcasing the 'home' and 'about' pages

Scroll below to learn more about our process.

Our Process

In this project, the overall goal is to design a website for Lupita’s Corner Market to increase their business and engagement. We actively engaged the client and target customers during the design process by conducting background research, contextual inquiries, prototyping, and several rounds of usability testing. These helped us better understand their needs and informed our design decisions.

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.

Observing Luz in action at the market.

Stakeholders Map

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

KEY TAKEAWAYS

We have looked at the potential stakeholders that will be involved in this project. In doing so, we learned that the primary users 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.

In moving forward, we will take these key findings and will begin to research on both the primary and secondary users of the website.

02 Identify the Gaps

Contextual Inquiry

We conducted contextual inquires by accompanying customers as they shopped in Lupita's. The process informed us about why they currently shop at the store, their pain points, and what would encourage them to use its website. Below are our key findings

KEY TAKEAWAYS

We further understand the value of providing customers with easy access to the deli menu and other products in the market. It could also help increase profits for the store by making it easy to see what they have available.

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.

03 Ideate and Test

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.

Initial User Flow

By gaining a better understanding of what the client and customers need in the previous step, we were able to create an initial user flow diagram. This diagram includes the navigation categories that were influenced by addressing both their needs.

Initial Wireframes and Sketches - MVP

User flows and wireframes were extremely useful in creating mock-ups for our client to better visualize and communicate our ideas. We generated a low fidelity wireframe and conducted 5-second tests to get feedback on our interface and design flow.

Presenting the MVP to the client to receive feedback.

KEY TAKEAWAYS

We got constructive feedback from both the client and customers on our initial design. They liked the overall feel of the website, but they asked us to improve the design flow.

Improve Design Flow:

Users mentioned that they would also like to see what is on the deli-menu right when they land on the page so they can quickly decide if they want to order from the store. Most users didn’t want to endlessly keep scrolling through the site even though there were anchors.

Our Improvement: Make the menu instantly visible when you land on the page while still maintaining information about hours of operation and contact info. We are getting rid of the endless scroll option.

User Flow & Wireframes - Iteration 2

We took the constructive feedback we received in the first iteration and created a second user flow as well as new 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.

The current user flow is more simple, straightforward, and easy to navigate.

Brand Identity

It is important to us and the client that we maintain the market’s brand identity. Luz uses the new brand identity throughout the social media account of the store, and it is physically visible in both the exterior and interior of the market. We studied their updated branding so that we make sure to incorporate the logo and new color palette they had designed during the market renovations.

Reference image of the new logo and branding of the market designed with Gensler for the market transformation.

Lupita's Corner Market branding and logo helps distinguish the store from the others in the neighborhood.

04 Current Design

Our Solution (project in progress)

We combined the latest user flow and wireframes with Lupita's branding to create a high fidelity prototype.

Our current design is clean, simple, and straightforward. The goal is to provide customers with a modern website that separates information into distinct categories. The website now includes an 'Other Goods' category to separate the deli menu from the grocery aspect of the store, as well as a 'Community' category to share more about Lupita's collaboration with local farmers and cafes.

Another goal was to make the website feel what a customer would experience when they step into the store - fresh, modern, and inviting. We achieved this goal through the use of Lupita's signature color palette and logo as a way to modernize the website.

The design was well-received when we presented it to the client and customers. With only minor modifications to make, we are now in the process of updating our work and will soon be integrating it into her domain.

It has been a great learning experience as we try to help a small local business create an online experience for her market.

Reviewing our design iterations with the client.

Current design of the Home page which includes the food menu and general information about the store

Current design of the 'Other Goods' page which includes thumbnails of the available grocery items ( seen in the mobile site demo video above)

Current design of the 'About' page that talks briefly about the history of the market and the unique story about the owners and recent market transformation

Reflection

Next Steps

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 when it goes live in about a month. We are continuing to work with Luz to have customers be able to order directly from the website. As soon as the website is live, we will put a link so that readers could see the progress of our design.

What I’ve learned

Solving real-world issues can be challenging but extremely rewarding. I’ve learned that in trying to balance the desires of the client and that of the customer, it is better not to make any assumptions and rather try to ask the right questions. Doing this helps better understand the product through their eyes.

Thank you for reading!

Scrool