COMPLETED IN DESIGNLAB’S UX ACADEMY BOOTCAMP PROGRAM
COMPLETED IN DESIGNLAB’S UX ACADEMY BOOTCAMP PROGRAM
Julia’s Empanadas
Julia’s Empanadas
Julia’s Empanadas
Made by hand. Baked with Love.
Made by hand. Baked with Love.
Rebranding a Washington, DC local-favorite empanada shop.
Rebranding a Washington, DC local-favorite empanada shop.
Rebranding a Washington, DC local-favorite empanada shop.
PROJECT OVERVIEW
PROJECT OVERVIEW
PROJECT OVERVIEW
Research Goals
Research Goals
Research Goals
Research Methodologies
Research Methodologies
Research Methodologies
Competitive Analysis
Competitive Analysis
Competitive Analysis
Reviewing other local websites, looking at how they organize information and present the items they sell.
Reviewing other local websites, looking at how they organize information and present the items they sell.
Reviewing other local websites, looking at how they organize information and present the items they sell.
Restaurants comparatively reviewed
Restaurants comparatively reviewed
Restaurants comparatively reviewed
Ala
Hill Country
LeTena
Taco City DC
Ala
Hill Country
LeTena
Taco City DC
Ala
Hill Country
LeTena
Taco City DC
Guiding Question
Which webpage components enable local restaurants to offer a mobile-friendly, responsive experience while maintaining their unique character and personality?
Guiding Question
Which webpage components enable local restaurants to offer a mobile-friendly, responsive experience while maintaining their unique character and personality?
Guiding Question
Which webpage components enable local restaurants to offer a mobile-friendly, responsive experience while maintaining their unique character and personality?
PROBLEM STATEMENT
PROBLEM STATEMENT
Julia’s Empanadas’ website is extremely outdated.
Upon first glance of the website, there are noticeable areas of improvement that could be made.
When viewed from a mobile screen, the components of the website are currently not responsive to the condensed screen size. Instead, it continues to present components in a cluttered, compact, layout that greatly inhibits the user’s experience.
*Note: As of July 2024, Julia's Empanadas' website has since shut down. They only offer takeout, so not having an online presence can be a big blow to their marketing and service capabilities
Julia’s Empanadas’ website is extremely outdated.
Upon first glance of the website, there are noticeable areas of improvement that could be made.
When viewed from a mobile screen, the components of the website are currently not responsive to the condensed screen size. Instead, it continues to present components in a cluttered, compact, layout that greatly inhibits the user’s experience.
*Note: As of July 2024, Julia's Empanadas' website has since shut down. They only offer takeout, so not having an online presence can be a big blow to their marketing and service capabilities
PROJECT TYPE
User Interface Revamp
MY APPROACH
MY APPROACH
The focus will be on generating a responsive mobile-version proof of concept that balances the needs expressed through the business, technical, and user goals to inform how to best generate an enjoyable user experience
The focus will be on generating a responsive mobile-version proof of concept that balances the needs expressed through the business, technical, and user goals to inform how to best generate an enjoyable user experience
01
01
Research
Research
Identify lessons I can learn from existing competition and speak to the staff to meet them where they're at.
02
02
Define
Define
Analyze and synthesize my research to define any themes or user requirements that emerges from it.
03
03
Ideate
Ideate
Develop personas and storyboards to better define and understand the target users
I'm serving.
04
04
Design
Design
Mock up flows and wireframes that meets business, customer, and technical goals.
05
05
Conclude & Reflection
Conclude & Reflection
Share my solutions and iterate intentionally based off feedback received.
THE RESULT
THE RESULT
I designed a few high-fidelity wireframes based on staff feedback, ensuring the designs align with both customer needs and the company’s vision. Only a few wireframes were built as they are intended to act as proof of concept.
I designed a few high-fidelity wireframes based on staff feedback, ensuring the designs align with both customer needs and the company’s vision. Only a few wireframes were built as they are intended to act as proof of concept.
View full size
View full size
ROLE
UX/UI Designer
UX Researcher
PROJECT TYPE
User Interface Revamp
TOOLS
Figma (Figma & FigJam)
Miro
TOOLS
Figma (Figma & FigJam)
Miro
ROLE
UX/UI Designer
UX Researcher
Shows character of the restaurant through strong header images
Minimal designs with only the most important information to the user presented on the home page (locations, hours, brief description of the type of food)
Strong CTA buttons to encourage the user to order or make a reservation
Easy to follow information architecture that doesn't promote too much scrolling for the user
Good balance of colors with color palettes that represent the restaurant's aesthetic well.
Shows character of the restaurant through strong header images
Minimal designs with only the most important information to the user presented on the home page (locations, hours, brief description of the type of food)
Strong CTA buttons to encourage the user to order or make a reservation
Easy to follow information architecture that doesn't promote too much scrolling for the user
Good balance of colors with color palettes that represent the restaurant's aesthetic well.
Shows character of the restaurant through strong header images
Minimal designs with only the most important information to the user presented on the home page (locations, hours, brief description of the type of food)
Strong CTA buttons to encourage the user to order or make a reservation
Easy to follow information architecture that doesn't promote too much scrolling for the user
Good balance of colors with color palettes that represent the restaurant's aesthetic well.
Competitive Analysis Findings
Competitive Analysis Findings
Competitive Analysis Findings
User Interviews
User Interviews
User Interviews
Speaking with staff of Julia's Empanadas to understand the company's philosophy and message they want to convey to potential customers
Speaking with staff of Julia's Empanadas to understand the company's philosophy and message they want to convey to potential customers
Speaking with staff of Julia's Empanadas to understand the company's philosophy and message they want to convey to potential customers
Participants
2 managers at various locations
2-3 staff members at each location
Participants
2 managers at various locations
2-3 staff members at each location
Participants
2 managers at various locations
2-3 staff members at each location
User Interview Findings
User Interview Findings
User Interview Findings
Interface should be simple, but useful to the customers
Taking pride in simplicity and quality of the food as the main driver of their business
Open to change, but not too much change that it's not recognizable
Business is powered by word of mouth from loyal customers and consistency
Interface should be simple, but useful to the customers
Taking pride in simplicity and quality of the food as the main driver of their business
Open to change, but not too much change that it's not recognizable
Business is powered by word of mouth from loyal customers and consistency
Interface should be simple, but useful to the customers
Taking pride in simplicity and quality of the food as the main driver of their business
Open to change, but not too much change that it's not recognizable
Business is powered by word of mouth from loyal customers and consistency
"We take pride in our humble personality and want to maintain that in our brand. We prefer a simple style…I'd say we prioritize the quality of food the most out of anything"
"We take pride in our humble personality and want to maintain that in our brand. We prefer a simple style…I'd say we prioritize the quality of food the most out of anything"
"We take pride in our humble personality and want to maintain that in our brand. We prefer a simple style…I'd say we prioritize the quality of food the most out of anything"
Storyboarding
Storyboarding
Storyboarding
Business Goals
Business Goals
Business Goals
User Goals
User Goals
User Goals
Technical Goals
Technical Goals
Technical Goals
User Persona - 'The Nostalgic Foodie'
User Persona - 'The Nostalgic Foodie'
User Persona - 'The Nostalgic Foodie'
Two friends (one local and one that’s visiting) are hungry and decide to take a trip to Julia’s Empanadas in Washington, DC.
Two friends (one local and one that’s visiting) are hungry and decide to take a trip to Julia’s Empanadas in Washington, DC.
Two friends (one local and one that’s visiting) are hungry and decide to take a trip to Julia’s Empanadas in Washington, DC.
SCENARIO
SCENARIO
SCENARIO
Design Goals
Design Goals
Design Goals
Storyboarding plays a crucial role in my process, allowing me to integrate emotional elements that foster user connection points to the product. This storytelling tool helps me make the user experience more memorable and impactful through my design decisions.
Storyboarding plays a crucial role in my process, allowing me to integrate emotional elements that foster user connection points to the product. This storytelling tool helps me make the user experience more memorable and impactful through my design decisions.
Now that I’ve collected and synthesized my research, it’s important for me to define my design goals, define key user types, and understand the story that is conveyed through the company’s customer experience.
Now that I’ve collected and synthesized my research, it’s important for me to define my design goals, define key user types, and understand the story that is conveyed through the company’s customer experience.
Now that I’ve collected and synthesized my research, it’s important for me to define my design goals, define key user types, and understand the story that is conveyed through the company’s customer experience.
User Interface (UI) Mobile Components
User Interface (UI) Mobile Components
User Interface (UI) Mobile Components
User Flow
User Flow
User Flow
Task Flow
Task Flow
Task Flow
Task Flow: User is creating a takeout order using Julia’s Empanadas’ mobile website
Task Flow: User is creating a takeout order using Julia’s Empanadas’ mobile website
Task Flow: User is creating a takeout order using Julia’s Empanadas’ mobile website
User Flow: Displays the possible interactions and pages of Julia’s Empanadas website
User Flow: Displays the possible interactions and pages of Julia’s Empanadas website
User Flow: Displays the possible interactions and pages of Julia’s Empanadas website
Typeface - Mobile
Typeface - Mobile
Heading 1: Inter/28px
Heading 2: Bold/24px
Heading 3: Medium/16px
Body Text 1 : Regular/14px
Body Text 2: Medium/12px
Logo/Title: Lobster/28px
#750B05
#FEC208
Color Palette
Color Palette
#FEFEFE
#FEFEFE
#FEFEFE
#FEFEFE
#FEFEFE
#FEFEFE
Primary
Primary
Primary
Neutral 01
Neutral 01
Neutral 01
Neutral 02
Neutral 02
Neutral 02
Secondary
Secondary
Secondary
Accent
Accent
Accent
#C81910
#292929
Logo
Logo
Julia’s Empanadas
Julia’s Empanadas
Julia’s Empanadas
Julia’s Empanadas
Julia’s Empanadas
Julia’s Empanadas
Julia’s Empanadas
Julia’s Empanadas
Julia’s Empanadas
Wireframes
Wireframes
Wireframes
LOW-FIDELITY WIREFRAMES
LOW-FIDELITY WIREFRAMES
LOW-FIDELITY WIREFRAMES
I focused on designing a mobile application for Julia’s Empanadas as it would be the most efficient and common way of ordering from their menu. Additionally, it is the most responsive option to how the business operates, based on my interviews with their team.
I focused on designing a mobile application for Julia’s Empanadas as
it would be the most efficient and common way of ordering from their menu.
Additionally, it is the most responsive option to how the business operates, based on my interviews with their team.
I focused on designing a mobile application for Julia’s Empanadas as it would be the most efficient and common way of ordering from their menu. Additionally, it is the most responsive option to how the business operates, based on my interviews with their team.
MID-FIDELITY WIREFRAMES
MID-FIDELITY WIREFRAMES
MID-FIDELITY WIREFRAMES
HIGH-FIDELITY WIREFRAMES
HIGH-FIDELITY WIREFRAMES
HIGH-FIDELITY WIREFRAMES
THESE WIREFRAMES ARE MADE WITH THE INTENTION TO BE PROOF OF CONCEPT
THESE WIREFRAMES ARE MADE WITH THE INTENTION TO BE PROOF OF CONCEPT
THESE WIREFRAMES ARE MADE WITH THE INTENTION TO BE PROOF OF CONCEPT
Lessons Learned
Lessons Learned
Lessons Learned
Meeting business goals - Working with a real company significantly transformed my approach to the UX design process, especially during the research and ideation phases. Unlike other projects, this collaboration brought in the company’s specific business goals, which kept the project unique and shaped the direction of each decision.
Understanding their objectives provided fresh perspectives and created new solution designing
approaches to experiment with. It led to more dynamic ideation sessions, where the design
evolved naturally through the exchange of ideas, ensuring that the solutions aligned with both
user needs and business priorities.
Meeting business goals - Working with a real company significantly transformed my approach to the UX design process, especially during the research and ideation phases. Unlike other projects, this collaboration brought in the company’s specific business goals, which kept the project unique and shaped the direction of each decision.
Understanding their objectives provided fresh perspectives and created new solution designing approaches to experiment with. It led to more dynamic ideation sessions, where the design evolved naturally through the exchange of ideas, ensuring that the solutions aligned with both user needs and business priorities.
More is not always better - Julia’s Empanadas’ management emphasized the need for simplicity, both for customers and staff. Their “baked with love” experience comes from a team with extensive empanada-making expertise, but limited tech skills. Therefore, the designs must be intuitive for everyone involved.
More is not always better - Julia’s Empanadas’ management emphasized the need for simplicity, both for customers and staff. Their “baked with love” experience comes from a team with extensive empanada-making expertise, but limited tech skills. Therefore, the designs must be intuitive for everyone involved.
Iterate timely and intentionality - Change is inevitable, but timing and approach matter—especially when it’s within your control. Julia’s Empanadas prides itself on “sticking to the original recipe,” favoring consistency in its style and brand. This made it an exciting challenge to design updates that preserved the brand’s authentic tone and character - balancing between modernizing the user experience and preserving the brand’s unique identity.
Iterate timely and intentionality - Change is inevitable, but timing and approach matter—especially when it’s within your control. Julia’s Empanadas prides itself on “sticking to the original recipe,” favoring consistency in its style and brand. This made it an exciting challenge to design updates that preserved the brand’s authentic tone and character - balancing between modernizing the user experience and preserving the brand’s unique identity.
Julia’s Empanadas
Julia’s Empanadas
Julia’s Empanadas
1.
Increase user engagement with the website/application
Increase user engagement with the website/application
Increase user engagement with the website/application
2.
Improve the user experience by streamlining the sites information architecture
Improve the user experience by streamlining the sites information architecture
Improve the user experience by streamlining the sites information architecture
3.
Generate a responsive mobile design with a minimalisic aesthettic and sense of character
Generate a responsive mobile design with a minimalisic aesthettic and sense of character
Generate a responsive mobile design with a minimalisic aesthettic and sense of character
RESEARCH
RESEARCH
RESEARCH
Research Goals
Research Methodologies
Research Goals
Research Methodologies
Research Goals
Research Methodologies
01
01
01
DEFINE
DEFINE
DEFINE
Design Goals
Design Goals
Design Goals
02
02
02
03
03
03
IDEATE
IDEATE
IDEATE
User Persona
Storyboarding
User Persona
Storyboarding
User Persona
Storyboarding
04
04
04
DESIGN
DESIGN
DESIGN
User Flow
Task Flow
UI Mobile Components
Wireframes
User Flow
Task Flow
UI Mobile Components
Wireframes
User Flow
Task Flow
UI Mobile Components
Wireframes
05
05
05
CONCLUSION & REFLECTION
CONCLUSION & REFLECTION
CONCLUSION & REFLECTION
Lessons Learned
Lessons Learned
Lessons Learned
Key themes to incorporate based on the desires of the organization
Key themes to incorporate based on the desires of the organization
Simple
Simple
Straightforward
Straightforward
Not too busy
Not too busy
Warm
Warm
Storyboarding plays a crucial role in my process, allowing me to integrate emotional elements that foster user connection points to the product.
This storytelling tool helps me make the user experience more memorable and impactful through my design decisions.
Meeting business goals - Working with a real company significantly transformed my approach to the UX design process, especially during the research and ideation phases. Unlike other projects, this collaboration brought in the company’s specific business goals, which kept the project unique and shaped the direction of each decision.
Understanding their objectives provided fresh perspectives and created new solution designing approaches to experiment with. It led to more dynamic ideation sessions, where the design evolved naturally through the exchange of ideas, ensuring that the solutions aligned with both user needs and business priorities.
More is not always better - Julia’s Empanadas’ management emphasized the need for simplicity, both for customers and staff. Their “baked with love” experience comes from a team with extensive empanada-making expertise, but limited tech skills. Therefore, the designs must be intuitive for everyone involved.
Iterate timely and intentionality - Change is inevitable, but timing and approach matter—especially when it’s within your control. Julia’s Empanadas prides itself on “sticking to the original recipe,” favoring consistency in its style and brand. This made it an exciting challenge to design updates that preserved the brand’s authentic tone and character - balancing between modernizing the user experience and preserving the brand’s unique identity.
PROBLEM STATEMENT
Julia’s Empanadas’ website is extremely outdated.
Upon first glance of the website, there are noticeable areas of improvement that could be made.
When viewed from a mobile screen, the components of the website are currently not responsive to the condensed screen size. Instead, it continues to present components in a cluttered, compact, layout that greatly inhibits the user’s experience.
*Note: As of July 2024, Julia's Empanadas' website has since shut down. They only offer takeout, so not having an online presence can be a big blow to their marketing and service capabilities
MY APPROACH
The focus will be on generating a responsive mobile-version proof of concept that balances the needs expressed through the business, technical, and user goals to inform how to best generate an enjoyable user experience
01
Research
Identify lessons I can learn from existing competition and speak to the staff to meet them where they're at.
02
Define
Analyze and synthesize my research to define any themes or user requirements that emerges from it.
03
Ideate
Develop personas and storyboards to better define and understand the target users I'm serving.
04
Design
Mock up flows and wireframes that meets business, customer, and technical goals.
05
Conclude & Reflection
Share my solutions and iterate intentionally based off feedback received.
THE RESULT
I designed a few high-fidelity wireframes based on staff feedback, ensuring the designs align with both customer needs and the company’s vision. Only a few wireframes were built as they are intended to act as proof of concept.
View full size
TOOLS
Figma (Figma & FigJam)
Miro
PROJECT TYPE
User Interface Revamp
PROJECT TYPE
User Interface Revamp
ROLE
UX/UI Designer
UX Researcher
ROLE
UX/UI Designer
UX Researcher