Super Samario
An augmented reality experience somewhere in Los Angeles.
Augmented Reality with Professor Ron Frankel in partnership with Samora Deng​
​
While taking a stroll in Westside Los Angeles, Samora takes on a fun-filled adventure he stumbled upon in a sunny Venice Beach parking lot. This course challenged us to incorporate augmented reality software into our usual architecture discourse. Inspired by Super Mario Bros., the video was created using Maya, After Effects, and Premiere Pro. Filming, music and sound effects were also completed as a partner effort. This is Super Samario!
​
​​​
​
​
​
Super Samario
An augmented reality experience somewhere in Los Angeles.
Augmented Reality with Professor Ron Frankel in partnership with Samora Deng​
​
While taking a stroll in Westside Los Angeles, Samora takes on a fun-filled adventure he stumbled upon in a sunny Venice Beach parking lot. This course challenged us to incorporate augmented reality software into our usual architecture discourse. Inspired by Super Mario Bros., the video was created using Maya, After Effects, and Premiere Pro. Filming, music and sound effects were also completed as a partner effort. This is Super Samario!
​
​​​
​
​
​
Super Samario
An augmented reality experience somewhere in Los Angeles.
Augmented Reality with Professor Ron Frankel in partnership with Samora Deng​
​
While taking a stroll in Westside Los Angeles, Samora takes on a fun-filled adventure he stumbled upon in a sunny Venice Beach parking lot. This course challenged us to incorporate augmented reality software into our usual architecture discourse. Inspired by Super Mario Bros., the video was created using Maya, After Effects, and Premiere Pro. Filming, music and sound effects were also completed as a partner effort. This is Super Samario!
​
​​​
​
​
​
Vertical Forest
An air-filtering sanctuary for the people of Beijing.
Advanced Topics Studio with Professor Ben Refuerzo
​​​​
Vertical Forest
An air-filtering sanctuary for the people of Beijing.
Advanced Topics Studio with Professor Ben Refuerzo
​​​​
Product Designer in Los Angeles
Lupita's Corner
A new website for a local small business

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
.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.
.png)

.png)
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.

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.


.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 Store & Website
Consistent Brand Identity

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.

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.
.jpg)
.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 - Mobile


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.


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.

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.
