Estefania Cruz
UI/UX Design
I approach product design through a visual lens, combining user experience, interface design, visual systems, and motion to create digital experiences that feel intuitive, engaging, and cohesive. Working primarily in Figma, I translate ideas into wireframes, prototypes, responsive interfaces, and scalable design systems while considering both how an experience works and how it feels.
The Challenge
Mobile Ordering Experience
UX · UI · Design System · Prototyping · Motion
Figma · Adobe Photoshop · Adobe Illustrator
LDU is a local coffee shop with a distinct approach to the traditional espresso bar. Its existing ordering experience relies on Toast, but several customer needs aren't well supported — particularly detailed drink customization, correcting orders placed at the wrong location, and quickly reordering familiar drinks
The Goal
Design a mobile ordering experience that makes customization more flexible while reducing friction for customers who already know what they want.
Pain Points
-
Cannot customize syrup pump amount
-
Description of drinks to inform new customers
-
Order Cancellation if order is sent to the wrong location (5 min time limit) + way to inform the store
-
FAVORITE ORDER Option
The Primary User:
is someone returning who:​
-
knows their usual order
-
wants to customize it precisely
-
is often ordering on the go
-
may visit multiple locations
-
wants to reorder quickly
Existing Experience
The Secondary User:
is someone new who:​
-
may be unfamiliar with LDU jargon
-
wants to customize confidently
-
wants to know what they're ordering
How might we....
How might we make ordering at LDU more flexible and forgiving while keeping the experience fast for repeat customers?
Customization & Sweetness
The existing Toast ordering experience provides limited control over drink customization. Customers can modify their drinks, but the interface does not provide a way to adjust syrup quantities with enough precision to achieve a specific level of sweetness.
​
For LDU customers who prefer a stronger coffee flavor with minimal sweetness, this creates a gap between their desired order and the available customization options.
From a UX perspective, the issue is not simply the number of customization options available, but the level of control and granularity within the interaction. Without a more precise input, customers have limited ability to communicate their preferences accurately through the ordering interface.
Cancellations & Order Accuracy
The existing Toast ordering experience does not provide customers with an option to cancel an order after it has been submitted. Instead, a simple notification warns customers that orders cannot be canceled, placing the responsibility on the customer to verify their order before completing the transaction.
​
From a UX perspective, this creates an opportunity for stronger error prevention and confirmation within the ordering flow. Because LDU has multiple locations, selecting the wrong location can result in an order being sent to an unintended store.
​
The existing experience relies primarily on a warning rather than providing enough context and visual confirmation to help customers catch potential errors before submitting their order.
​
From a UX perspective the ordering flow should make critical information—especially the selected location—highly visible and easy to verify before checkout. Clear information hierarchy, contextual confirmation, and visual feedback can help reduce accidental orders and give customers greater confidence before completing the transaction.
User Flow - New Orders
Open App:
Choose order location
Cafe Locations:
Location option is highlighted & user verifies
Menu:
User is redirected to the menu and is able to browse options
Pop Up:
User clicks on a drink, a pop up opens with a description and custimization option
Cafe Locations:
Incorrect location? Redirected to select the correct location
Customization:
Custom options highlighted to increase contrast for user, "add to cart" option at the bottom
Cofirmation:
A confirmation prompt pops up on the final page showing the location to head to, for pick up.
Check out:
User is promted to input check out details and payment info, "Place Order" button submits order to cafe
View Cart:
Drinks with modifications visible to the user, "check out" option at the bottom fort he user who has finalized his ordering
"More Items":
Drink option added to menu, pop up asks user "View Cart" or "Return to Menu"
User Flow - Reorder
Open App:
Choose order location
Cafe Locations:
Location option is highlighted & user verifies
Menu:
User is redirected to the menu and is able to view right at the top their "favorite" drinks
Pop Up:
User clicks on a drink, a pop up opens with a description and a "favorite drink #1" with customizations pre-set
Cafe Locations:
Incorrect location? Redirected to select the correct location
"More Items":
Drink can be instantly added to cart. Pop up asks user "View Cart" or "Return to Menu"
Cofirmation:
A confirmation prompt pops up on the final page showing the location to head to, for pick up.
Check out:
User is promted to input check out details and payment info, "Place Order" button submits order to cafe
View Cart:
Drinks with modifications visible to the user, "check out" option at the bottom fort he user who has finalized his ordering
Brainstorming
Landing Page
-
Welcome “Customer Name” more personal
-
Add location in BOLD letters to ensure order accuracy
-
Include photos is possible ?
-
Reorder option at the top of frequently ordered menu items
-
Add a “create an account option” silhouette of a person
Drink Page
-
Include short description of the drink *especially for the one with interesting names
-
Include the +/- options for sweetness
-
Include Half pump options for for sweetness
-
Have the option to “favorite” the drink for easy reorder option
Ordering Page
-
Location bolded at the top to ensure accuracy
-
Order ahead option/scheduled pick up
-
Modifications visible with pricing
-
Order total
-
Order Cancelation option (10 min window post order submition)
Favorites Page
-
Reorder options or “+” option to auto add to cart
-
“customer’s name” favorites
-
LDU logo centered ? half opacity ?
Wireframes
Personalized Financial Planning Experience
UX · UI · Information Architecture · Data Visualization · Design Systems · Accessibility
The Challenge
Financial planning can involve complex information, terminology, and data that can be difficult for clients to understand during an advisor meeting. This concept explores a mobile experience that allows advisors to present personalized financial plans through clear information hierarchy, visualizations, and accessible explanations.
Figma · Adobe Photoshop · Adobe Illustrator
The Goal
Create a financial planning experience that makes complex financial information easier to understand, explore, and discuss.
Pain Points
-
COMPLEXITY: Financial plans contain unfamiliar terminology and large amounts of information.
-
INFORMATION OVERLOAD: Clients may struggle to determine which numbers are most important.
-
CONTEXT: Numbers without context don't necessarily communicate what they mean for the client's goals.
-
ACCESSIBILITY: Financial information needs to be understandable across different levels of financial literacy.
The Primary User:
The financial advisor needs to:​
-
Present a client's financial plan
-
Navigate between different financial categories
-
Explain complex information
-
Quickly access client information during meetings
-
Highlight important recommendations
-
​Adjust the presentation based on the client
How might we....
How might we present financial information without overwhelming the client?
How might we help users understand what individual numbers mean?
How might we make long-term financial goals easier to understand?
How might the interface help an advisor explain recommendations during a meeting?
How might clients easily return to their plan and understand what has changed?
The Secondary User:
The client needs to:​
-
Understand their financial position
-
See progress toward goals
-
Understand recommendations
-
Explore financial information without being overwhelmed
-
Access their plan outside of advisor meetings
How can the same information serve both the advisor presenting it and the client learning from it?
Information Architecture
Home
├── Financial Overview​
│ ├── Net Worth
│ ├── Cash Flow
│ └── Investments
├── Goals
│ ├── Retirement
│ ├── Home
│ └── Education
├── Investments
│ ├── Portfolio
│ ├── Performance
│ └── Allocation
├── Plan
│ ├── Recommendations │ └── Action Items
Profile
User Flow - Advisor Presentation
Login:
Advisor Login
Select Client:
List overview of all clients & a search bar. For privacy reasons names are written as
"A. Bcdefg"
Financial Overview:
Advisor has financial preview with specialized jargon
Discuss & Explain:
Information breakdown that gives a client / advisor breakdown
Recommendations:
Advisor jargon based recommnedations that they are able to elaorate on during client meetings
Goals:
Client goals listed with a progression bar per goal
Investment Plan:
Investment options availablr to the client tailored based on goals alongside suggestions
User Flow - Client Exploration
Login:
Client login
Financial Overview:
Simplified financial overview for client, standard jargon
Select Goal:
Goal tracker page showing a percentage bar of progress
View Progress:
Goal can be clicked so show what tasks have been accomplishes to boost progress
Take Action:
CTA with advisor based taks to achieve financial goals
Learn More:
Educational section a user can reference to better understand their financial plan. Additionally other products the company offers
Explore Recommendation:
Client jargon based recommnedations that they can ask questions about during client meetings
Brainstorming - Advisor Presentation
Select Client Page
-
Client list with a search function
-
Privacy feature, first letter of first name + last name
-
​Two- step authentication?
Financial Overview
-
Include short description of the drink *especially for the one with interesting names
-
Include the +/- options for sweetness
-
Include Half pump options for for sweetness
-
Have the option to “favorite” the drink for easy reorder option
Progression
-
Location bolded at the top to ensure accuracy
-
Order ahead option/scheduled pick up
-
Modifications visible with pricing
-
Order total
-
Order Cancelation option (10 min window post order submition)
Recommendations / Learn More
-
Reorder options or “+” option to auto add to cart
-
“customer’s name” favorites
-
LDU logo centered ? half opacity ?
Brainstorming - User Presentation
Financial Overview:
-
Client list with a search function
-
Privacy feature, first letter of first name + last name
-
​Two- step authentication?
Select Goal
-
Include short description of the drink *especially for the one with interesting names
-
Include the +/- options for sweetness
-
Include Half pump options for for sweetness
-
Have the option to “favorite” the drink for easy reorder option
Goals
-
Location bolded at the top to ensure accuracy
-
Order ahead option/scheduled pick up
-
Modifications visible with pricing
-
Order total
-
Order Cancelation option (10 min window post order submition)
Investment Plan
-
Reorder options or “+” option to auto add to cart
-
“customer’s name” favorites
-
LDU logo centered ? half opacity ?
Wireframes
A café discovery experience for remote work
UX · UI · Information Architecture · Search · Discovery · Interaction Design
The Challenge
While there are countless café discovery and map applications, they don't necessarily answer the questions that matter to someone looking for a workspace: Is the Wi-Fi reliable? Are there enough outlets? Can I comfortably sit with my laptop? How noisy is it? Is there enough seating?
Remote Café was created to make that decision easier by bringing workspace-specific information into the café discovery experience.
The Goal
Create a mobile experience that helps students, remote workers, and digital nomads quickly discover and evaluate cafés based on their individual work needs.
Figma · Adobe Photoshop · Adobe Illustrator
Pain Points
-
“Laptop-friendly” isn't clearly defined
-
Café listings often don't provide workspace-specific information
-
Wi-Fi quality and outlet availability can be difficult to determine
-
Noise and seating conditions vary throughout the day
-
Users may arrive and discover the space isn't suitable for working
How might we....
How might we make it easier for people to evaluate and discover cafés that fit their specific work needs?
The Primary User:
Students looking for a comfortable environment to study, work on assignments, or attend virtual classes.:​
-
Reliable Wi-Fi
-
Accessible outlets
-
Comfortable seating
​
-
Quiet or moderate noise levels
-
Affordable food and drinks
-
Longer periods of stay
The Secondary User:
Digital Nomads; People working remotely while traveling or living in different cities.:​
-
Reliable workspace
-
Strong Wi-Fi
-
Laptop-friendly policies
​
-
Convenient location
-
Comfortable seating
-
Clear hours and amenities
The Terciary User:
Remote Workers; Professionals looking for an alternative to working from home or a traditional office.:​
-
Consistent workspace
-
Reliable connectivity
-
Appropriate noise level
​
-
Outlets and table space
-
Convenient location
Information Architecture
The information architecture was designed around the user's primary task: finding a suitable place to work.
Home
├── EXPLORE
│ ├── Map
│ ├── List View
│ └── Filters
├── CAFÉ
│ ├── Overview
│ ├── Photos
│ └── Amenities
│ └── Workspace Details
│ └── Reviews
│ └── Hours
│ └── Location
├── SAVED
│ ├── Saved Cafés
│ ├── Collections / Favorites
​
Profile
├── PROFILE
│ ├── Recommendations │ └── Action Items
├── HOME
│ ├── Search
│ ├── Recommended
│ └── Nearby Cafés
│ └── Recent Searches
​​
-
Wi-Fi
-
Outlets
-
Noise Level
-
Seating
-
Price
-
Hours
-
Laptop Friendly
Primary Flow — Discover a Café
Open App:
Intro animation
Search Location:
World map, search bar available, user can input a city to see if there's a database of options available
Explore:
User inputs city and is able to explore a list option or from a map
Apply Filters:
Filters option available in top right order to narrow search based on needs (ie. Outlets, Pricing, Seating, Wi-Fi, etc.)
Cafe Chat
Cafe chat opens that shares other users questions, comments and concerns
Directions:
Directions option that will then open up Google Maps or Apple Maps based on user preference
Review Details:
An ameneties list becomes avaiable to the user highlighting the features they specifically filtered for in additotion to others.
Select Café:
By clicking a cafe a pop up opens showing café information
View Results:
"Filters Applied" generated a list of cafe's that meet the users sepcified needs
Secondary Flow — Save for Later
Open App:
Intro animation
Explore:
User inputs city and is able to explore a list option or from a map
Cafe Chat
Cafe chat opens that shares other users questions, comments and concerns
Directions:
Directions option that will then open up Google Maps or Apple Maps based on user preference
Select Café:
By clicking a cafe a pop up opens showing café information
Save:
User is able to click on the "heart" button.
Select Café:
Drinks with modifications visible to the user, "check out" option at the bottom fort he user who has finalized his ordering
Saved Cafés:
User can the navigate to the "favorites" page within the app to see all current and previously hearted café's/
Brainstorming
Landing Page
-
Welcome “Customer Name” more personal
-
Add location in BOLD letters to ensure order accuracy
-
Include photos is possible ?
-
Reorder option at the top of frequently ordered menu items
-
Add a “create an account option” silhouette of a person
Drink Page
-
Include short description of the drink *especially for the one with interesting names
-
Include the +/- options for sweetness
-
Include Half pump options for for sweetness
-
Have the option to “favorite” the drink for easy reorder option
Ordering Page
-
Location bolded at the top to ensure accuracy
-
Order ahead option/scheduled pick up
-
Modifications visible with pricing
-
Order total
-
Order Cancelation option (10 min window post order submition)
Favorites Page
-
Reorder options or “+” option to auto add to cart
-
“customer’s name” favorites
-
LDU logo centered ? half opacity ?