Early Ideation & User Testing
Savor's design evolved significantly from its initial concept to the final version based on user feedback and testing. The original bold red and yellow palette, inspired by color psychology to induce appetite, reminded users too much of McDonald's and lacked a cohesive feel, with excessive 3D, claymorphic, and neomorphic elements that made it seem too playful and less trustworthy for an app focused on saving money.
In response, the final design shifted to a more harmonious and appealing color scheme with golden orange and bold green, symbolizing appetite and savings. The layout was streamlined, reducing playful elements and enhancing functionality with a sleek price comparison homepage, combining "Search" and "Home" for a simpler user flow, and the logo was redesigned to a casual, handwritten style, replacing the chunky white original to evoke a more inviting, rustic vibe.
Pen/Paper
Lo-Fid Iteration
Mid-Fid
Hi-Fid Initial
Hi-Fid Final
Prototyping Savor
iOS Interactive Prototype:
https://figmashort.link/HdJMWZ
iOS Participants:
Erica, Momo, Ben, Goeksu
Methodology:
I conducted usability testing using prototypes, focusing on tasks like comparing prices, searching for items, and navigating a restaurants menu.
iOS General Feedback:
Users appreciated that home screen layout resembled other apps they were familiar with, but they also wished it was more apparent that the app was geared towards saving money, rather than just ordering food.
Users wanted to see best deals front and center on home screen.
The color scheme reminded users of McDonald’s color scheme.
Navigation & functionality were intuitive and easy.
Android Interactive Prototype:
https://figmashort.link/h5eWyw
I originally wanted to showcase claymorphism in this app, however, I, as well as users found that too much of it caused visual fatigue, especially with the bright colors. Instead, I opted for a flat design with pops of claymorphism in the new design.
Instead of busy, complicated imagery (and again to avoid pushing the “fast-food” narrative) I included images of a variety of foods, and an image of a delivery man in green – a color that represents all the money users will save!
This rustic logo better suited the new design concept.
Splash Screen
Home Screen
Some users felt these kawaii icons to be too cutesy and childish, and questioned if they would trust a childlike app with the task of saving them money. They have been replaced with simpler icons, but I still maintained their 3D style.
“Looks too much like a regular delivery app, and not enough like a cost comparison app.”
New home screen features the best deals, as well as an option to expand and view all deals.
There is now a button that redirects users to the third party delivery app of their choice.
Overall the home screen is less busy, and more to-the-point.
The new nav bar better coincides with HIG design guidelines and is fixed and flat rather than floating with shadows to avoid further visual fatigue.
Browse Screen
Elements from the old Home screen and Browse screen have been combined to form the new Browse screen.
Buttons are no longer red, as they were in the old design, as some users felt the red color signaled ‘error.’
User Flow
User Persona
Goals:
Find food quickly without spending too much time comparing prices.
Maintain a balanced diet while juggling a demanding academic schedule.
Save money on food delivery while ensuring variety in meal choices.
Frustrations:
Constantly switching between multiple delivery apps to find the best price is time-consuming and overwhelming.
High fees on platforms make it difficult to order without breaking budget.
Limited time to cook or meal prep due to her hectic study schedule.
Tech Proficiency (Ratings 1-5):
Internet Browsing:
5/5
Social Media Usage:
4/5
Online Shopping:
5/5
App Usage:
5/5
Food Delivery Apps:
4/5
Budgeting Tools:
3/5
Meal Planning Apps:
2/5
Name:
Emma Chen
Age:
21
Location:
Boston, MA
Occupation:
University Student
"I need meals that are fast and affordable, but I don’t have time to scroll through five apps just to find the best deal."
Background:
Emma, a busy computer science student with little time to cook, relies on food delivery services for most of her meals. Between lectures, assignments, and group study sessions, her days are packed with responsibilities. With a student's budget, Emma also needs to be mindful of how much she spends on food. She’s tech-savvy, but doesn’t want to waste her time jumping between multiple apps to find deals. She values convenience, speed, and affordability. She likes using technology to streamline her life and needs an app that can help her do so.
Competitor Analysis
Methodology
A comprehensive overview of best practices within the food delivery industry, focusing
on key players: Uber Eats, DoorDash, Grubhub, Postmates, and Seamless. By examining the strengths and innovative strategies of these leading platforms, the analysis identifies critical features such as dynamic pricing, user experience, delivery efficiency, and customer engagement that set industry benchmarks. This exploration of best practices not only highlights where Savor can align with successful trends but also uncovers unique opportunities for differentiation, ensuring that Savor continues to lead in offering
real-time price comparisons and delivering exceptional value to its users.
Findings
Critical Success Factors:
Dynamic pricing models, robust loyalty programs, and seamless user
interfaces are essential for leading food delivery apps.
Uber Eats and DoorDash:
Excel in offering personalized experiences and efficient delivery.
Grubhub and Seamless:
Strong presence in urban markets with diverse restaurant options.
Postmates:
Stands out for versatility in delivering a wide range of goods beyond food.
Savor’s Opportunity:
Unique real-time price comparison feature differentiates the app by consistently providing best deals.
Addresses a key gap in the market by focusing on price transparency and savings for users.
Strategic Advantage:
By integrating best practices from competitors and leveraging its innovative value proposition, Savor is well-positioned to enhance its market presence and user appeal.
Design Process & Tools
Process
Competitor Analysis:
User Interviews:
Feature and Design Element Identification:
Analyzed several food delivery apps to evaluate successful features and common pain points.
Conducted user interviews to gain insights into their needs, preferences, and pain points.
Identified key features and design elements that resonated with the target audience based on competitor analysis and user feedback.
Identified best practices and gaps in the market that informed our feature development and design strategy.
Gathered qualitative data to understand user behavior and preferences, which guided our design decisions.
Developed a prioritized list of features and design elements to include in our app to address user needs
and enhance their experience.
Objective:
Results:
Tools
Webaim Contrast Checker:
To comply with web accessibility standards.
Pen & Paper:
Lo-fidelity wireframes.
Figma:
Mid/Hi-fid wireframes, interactive prototypes.
App Solutions
Solutions Savor App Offers
Comprehensive Price Comparison:
Gathers data from all major food delivery apps in one place.
Analyzes prices across different platforms to find best deals.
Cost-Effective Choices:
Helps users find cost-effective options and take advantage of discounts.
Allows users to enjoy their preferred meals while staying within budget.
Time Saving:
Allows users to compare deals from multiple sources within one app.
Provides real-time information on menu item prices and promotions.
User-Friendly Interface
Presents information in an easy-to-navigate and intuitive interface.
Simplifies the process of finding and selecting the best meal deals.
Informed Decision Making:
Provides transparent and detailed pricing info for better decision-making.
Problems
Problems with Delivery Apps
Price Variability:
The same meal can have varying prices on different platforms.
Promotions and discounts may not be uniformly applied across apps.
Service Charges:
Each app may have its own set of service or delivery charges, complicating cost comparisons.
Unexpected or unclear fees that add to the overall expense of the meal.
Time Consumption:
Significant time spent switching between apps to find the best deals.
Users may need to manually track and calculate costs and discounts.
User Interface Issues:
Difficulty in navigating different apps to find the best deals.
Inadequate filtering options to easily sort/compare meal prices and offers.
Availability of Deals:
Not all apps have access to same deals or offers from restaurants.
Savor is a revolutionary app designed to streamline the meal ordering process! By comparing the prices of meals across all major food platforms in real time, Savor saves users both time and money, ensuring that users always get the best deal available. Savor is the ultimate companion for anyone looking to savor delicious meals while being a smart spender!
Project Overview
iOS & Android Price Comparison
Native App Case Study
More Saving, More Savoring.
Savor
iOS Primary Buttons:
Browse Savor
Place Order
Android Primary Buttons:
Browse Savor
Place Order
IOS Secondary Buttons:
View All Deals (4)
View All
Android Secondary Buttons:
View All Deals (4)
What’s for lunch?
Israeli Sabich
What’s for lunch?
Israeli Sabich
IOS text fields:
•••••••••••••
Yohohoandabottleofrum
Android text fields:
IOS Iconography:
Android Iconography:
IOS misc Components:
Category Carousel:
Product Tiles:
Android misc Components:
Category Carousel:
Product Tiles:
Key Components
The Savor app's key elements include rounded buttons and playful, fun 3D icons and imagery, adding a delightful and engaging touch to the user experience.
Typography
The Savor app's typography combines SF Pro Text for iOS and Roboto for Android, with both platforms featuring Aleo for display text, creating a cohesive and modern look across devices.
Aa
Aleo
Bold
Aa
SF Pro Display
Semi-Bold
Bold
Regular
Bold
SF Pro Text
Aa
iOS Font Families:
Heading:
Heading 1
Font: Aleo / Font Size: 32px / Style: Bold
Heading 2
Font: SF Pro Display / Font Size: 22px / Style: Bold
Heading 3
Font: SF Pro Display / Font Size: 20px / Style: Semibold
Heading 4
Font: SF Pro Text / Font Size: 16px / Style: Medium
Body:
Body 1
Font: SF Pro Text / Font Size: 17 / Style: Med
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
Body 2
Font: SF Pro Text / Font Size: 15 / Style: Reg
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
Android Font Families:
Aa
Aleo
Bold
Regular
Bold
Roboto
Aa
Heading:
Heading 1
Font: Aleo / Font Size: 32px / Style: Bold
Heading 2
Font: Roboto / Font Size: 22px / Style: Semibold
Heading 3
Font: Roboto / Font Size: 20px / Style: Medium
Heading 4
Font: Roboto / Font Size: 16px / Style: Medium
Body:
Body 1
Font: Roboto / Font Size: 16 / Style: Reg
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
Body 2
Font: Roboto / Font Size: 14 / Style: Reg
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
Palette
The Savor app's color palette blends soft and punchy oranges with rich greens, creating appetizing, warm tones that subtly encourage users to complete their takeout orders.
UI Style Guide
Logo
The Savor app logo features the playful "Love Ya Like A Sister" font, evoking a casual, handwritten vibe reminiscent of a cozy chalkboard menu at your favorite local eatery.
Savor
Savor
Platform-Specific Design Considerations
Design Language:
iOS:
Android
Follows Apple's Human Interface Guidelines.
Adheres to Material Design 3 principles.
System Buttons & Button Shape:
iOS:
Android
Relies on minimal physical buttons, and gestures (like swiping for "Back").
Typically uses rounded square buttons to maintain a consistent aesthetic across its platform. These buttons align with Apple's focus on symmetry and precision in design.
Often includes a dedicated back button as part of the system navigation.
Emphasizes completely round buttons
Typography, Icons, & Carousels:
iOS:
Android
San Francisco typeface.
Icon lines are thinner and more uniform.
The carousel presents images in a linear row and users to swipe left or right to navigate between items.
Roboto typeface.
Icons are often bolder and more varied.
Dynamic carousels in M3 enhance interactivity. Items change shape when scrolled, creating a parallax effect.
Input Components: Text Boxes and Search Fields:
iOS:
Android
Text boxes follow apple’s classic minimal design, typically rounded rectangles with subtle shadows or highlights.
Text boxes typically feature a bordered outline or a filled variant with distinct styles like elevated or tonal fills.
iOS:
Android
The search bar is often slightly rounded at the edges but remains flat and understated.
The search field often takes on a fully rounded pill shape, creating a softer, more approachable visual while still maintaining clarity.
Splash Screen
Sign Up Screen
Sign Up Screen Error State
Sign Up Screen Filled
Sign In Screen
Sign In Screen Filled
Home Screen
Deals Pop-up Screen
Browse Screen
Browse Screen Text Box
Searching Screen
Search Not Found Screen
Restaurant Screen
Restaurant Product Pop-up
Settings Screen
Android:
Splash Screen
Sign Up Screen
Sign Up Screen Error State
Sign Up Screen Filled
Sign In Screen
Sign In Screen Filled
Home Screen
Deals Pop-up Screen
Browse Screen
Browse Screen Text Box
Searching Screen
Search Not Found Screen
Restaurant Screen
Restaurant Product Pop-up
Settings Screen
iOS:
Mockups
Retrospective
Savor was an invaluable opportunity to refine my skills in competitive analysis, cross-platform design, and user-centered problem solving. Through analyzing existing platforms and conducting user research, I identified a clear gap in the market for an app that simplifies meal ordering while providing transparency in pricing. The iterative design process, particularly the focus on tailoring the experience for both iOS and Android, allowed me to adapt designs to align with platform-specific guidelines while maintaining a cohesive brand identity.
Feedback from user testing underscored the importance of a streamlined interface and clarity in features, leading to refinements that balanced functionality with a modern, approachable design. This project not only strengthened my ability to manage complex design challenges but also deepened my appreciation for creating solutions that meet real user needs. The end result is a thoughtful, user-friendly app that demonstrates how innovation and accessibility can work together to enhance the experience of ordering delivery.
Savor
More Saving, More Savoring.