Designing MexiCraze: Healthy Meals, Simplified
Designing MexiCraze: Healthy Meals, Simplified
Designing MexiCraze: Healthy Meals, Simplified
A mobile-first ordering flow for customised meals — fast, intuitive, and designed for decision clarity.
A mobile-first ordering flow for customised meals — fast, intuitive, and designed for decision clarity.
Hold down and slide over to compare.
BACKGROUND
This project was completed as the capstone project for the Coursera California Institute of the Arts (CalArts) UI/UX Design Specialisation. The specialisation provided a comprehensive understanding of user interface and user experience design principles, equipping learners to create engaging digital products.
This project was completed as the capstone project for the Coursera California Institute of the Arts (CalArts) UI/UX Design Specialisation. The specialisation provided a comprehensive understanding of user interface and user experience design principles, equipping learners to create engaging digital products.
This project was completed as the capstone project for the Coursera California Institute of the Arts (CalArts) UI/UX Design Specialisation. The specialisation provided a comprehensive understanding of user interface and user experience design principles, equipping learners to create engaging digital products.
PROJECT OVERVIEW
A UX/UI design project for a delivery-only Mexican restaurant in Mumbai, focusing on customisable healthy meals for young professionals and students.
A UX/UI design project for a delivery-only Mexican restaurant in Mumbai, focusing on customisable healthy meals for young professionals and students.
A UX/UI design project for a delivery-only Mexican restaurant in Mumbai, focusing on customisable healthy meals for young professionals and students.
PROBLEM STATEMENT
Young professionals and students in Mumbai need a convenient way to order healthy, customisable Mexican food that fits their busy lifestyle and dietary preferences.
Young professionals and students in Mumbai need a convenient way to order healthy, customisable Mexican food that fits their busy lifestyle and dietary preferences.
Young professionals and students in Mumbai need a convenient way to order healthy, customisable Mexican food that fits their busy lifestyle and dietary preferences.
PROJECT GOALS
Create an intuitive meal customisation system
Design a seamless ordering experience
Implement real-time order tracking
Create an intuitive meal customisation system
Design a seamless ordering experience
Implement real-time order tracking
Create an intuitive meal customisation system
Design a seamless ordering experience
Implement real-time order tracking
Design Process
Design Process
Design Process
Empathise: User Research
Empathise: User Research
Empathise: User Research
Target Audience
Target Audience
Target Audience
For this assignment, we were asked to decide the target audience for the restaurant and go into details such as the Demographics, Psychographics and create User Personas of ideal users.
For this assignment, we were asked to decide the target audience for the restaurant and go into details such as the Demographics, Psychographics and create User Personas of ideal users.
For this assignment, we were asked to decide the target audience for the restaurant and go into details such as the Demographics, Psychographics and create User Personas of ideal users.
Target Audience
User Personas
Define
Define
Define
Key User Needs
Check Delivery Radius: Ensure users can confirm availability in their area.
Quick Customisation: Simplify meal personalisation.
Real-Time Tracking: Provide live updates on orders.
Saved Favourites: Enable quick reordering for regular users.
Check Delivery Radius: Ensure users can confirm availability in their area.
Quick Customisation: Simplify meal personalisation.
Real-Time Tracking: Provide live updates on orders.
Saved Favourites: Enable quick reordering for regular users.
Check Delivery Radius: Ensure users can confirm availability in their area.
Quick Customisation: Simplify meal personalisation.
Real-Time Tracking: Provide live updates on orders.
Saved Favourites: Enable quick reordering for regular users.
Ideate
Ideate
Ideate
I structured the sitemap to streamline navigation, aligning with user pain points for clarity and convenience.
The app's structure was designed around the following user flow:
Order Flow: Browse Menu → Customise Meal → Add to Cart → Checkout → Track Order
I structured the sitemap to streamline navigation, aligning with user pain points for clarity and convenience.
The app's structure was designed around the following user flow:
Order Flow: Browse Menu → Customise Meal → Add to Cart → Checkout → Track Order
I structured the sitemap to streamline navigation, aligning with user pain points for clarity and convenience.
The app's structure was designed around the following user flow:
Order Flow: Browse Menu → Customise Meal → Add to Cart → Checkout → Track Order
Sitemap
Wireframing
Wireframing
Wireframing
Low-fidelity Wireframes
Home Screen Wireframes
Order Customisation Wireframes
Payment Process Wireframes
Visual Design: Mood boarding
Visual Design: Mood boarding
Visual Design: Mood boarding
To determine the direction of the visual design for the platform, I created a mood board seeking inspiration from various signages and pictures of Mexican eateries and locations.
To determine the direction of the visual design for the platform, I created a mood board seeking inspiration from various signages and pictures of Mexican eateries and locations.
To determine the direction of the visual design for the platform, I created a mood board seeking inspiration from various signages and pictures of Mexican eateries and locations.
Moodboard
Design Explorations and Iterations
Design Explorations and Iterations
Design Explorations and Iterations
The initial home screen design featured an image-heavy background with orange hues for boldness. User feedback highlighted challenges with readability and navigation. The updated design adopted a clean green background for better focus and usability.
The initial home screen design featured an image-heavy background with orange hues for boldness. User feedback highlighted challenges with readability and navigation. The updated design adopted a clean green background for better focus and usability.
The initial home screen design featured an image-heavy background with orange hues for boldness. User feedback highlighted challenges with readability and navigation. The updated design adopted a clean green background for better focus and usability.
Intial Design
Prototypes
Prototypes
Prototypes
High-fidelity Wireframes
To demonstrate the evolution of the design, I translated the low-fidelity wireframes into high-fidelity wireframes. These screens maintain the same user flow but incorporate refined visual elements, typography, and branding and most importantly, the user feedback from the initial designs.
To demonstrate the evolution of the design, I translated the low-fidelity wireframes into high-fidelity wireframes. These screens maintain the same user flow but incorporate refined visual elements, typography, and branding and most importantly, the user feedback from the initial designs.
To demonstrate the evolution of the design, I translated the low-fidelity wireframes into high-fidelity wireframes. These screens maintain the same user flow but incorporate refined visual elements, typography, and branding and most importantly, the user feedback from the initial designs.
High-fidelity Wireframes - Home Screens
Order Customisation Wireframes
Payment Process Wireframes
User Feedback Iterations
A quick walkthrough of MexiCraze on mobile.
This video highlights key interactions and features such as ordering, meal customisation, and payment flow.
Desktop Version - Landing Page
Each element—from the visually appealing menu layout to the streamlined customisation process—was crafted to not just facilitate ordering but to create an enjoyable, memorable experience. The design reflects the fast-paced lifestyles of the target audience, ensuring functionality while capturing the energy and freshness of MexiCraze's brand.
Each element—from the visually appealing menu layout to the streamlined customisation process—was crafted to not just facilitate ordering but to create an enjoyable, memorable experience. The design reflects the fast-paced lifestyles of the target audience, ensuring functionality while capturing the energy and freshness of MexiCraze's brand.
Each element—from the visually appealing menu layout to the streamlined customisation process—was crafted to not just facilitate ordering but to create an enjoyable, memorable experience. The design reflects the fast-paced lifestyles of the target audience, ensuring functionality while capturing the energy and freshness of MexiCraze's brand.
Learnings
Learnings
Learnings
This project offered valuable lessons in designing for empathy and functionality within constraints:
User-Centric Design:
Usability testing revealed key improvements for navigation clarity, like providing better contrast in the navigation icons, screen backgrounds.Iterative Process:
Iterations driven by feedback ensured the design met user expectations.Design for Context:
Balancing bold visuals with clarity created a better user experience tailored to the target audience.
Each insight strengthened my ability to design with empathy, ensuring functionality and user satisfaction in equal measure.
This project offered valuable lessons in designing for empathy and functionality within constraints:
User-Centric Design:
Usability testing revealed key improvements for navigation clarity, like providing better contrast in the navigation icons, screen backgrounds.Iterative Process:
Iterations driven by feedback ensured the design met user expectations.Design for Context:
Balancing bold visuals with clarity created a better user experience tailored to the target audience.
Each insight strengthened my ability to design with empathy, ensuring functionality and user satisfaction in equal measure.
This project offered valuable lessons in designing for empathy and functionality within constraints:
User-Centric Design:
Usability testing revealed key improvements for navigation clarity, like providing better contrast in the navigation icons, screen backgrounds.Iterative Process:
Iterations driven by feedback ensured the design met user expectations.Design for Context:
Balancing bold visuals with clarity created a better user experience tailored to the target audience.
Each insight strengthened my ability to design with empathy, ensuring functionality and user satisfaction in equal measure.
More Work
More Work
More Work
We Made an AI Chatbot That Judges Your Fridge (Lovingly)
We Made an AI Chatbot That Judges Your Fridge (Lovingly)
A witty, chat-powered food app that helps Gen Z users scan their fridge, discover recipes, and cook with confidence.
A witty, chat-powered food app that helps Gen Z users scan their fridge, discover recipes, and cook with confidence.
Navigating Healing: A Thoughtful Web Experience for Therapy
Navigating Healing: A Thoughtful Web Experience for Therapy
Designing a warm and accessible digital space for trauma-informed care.
Designing a warm and accessible digital space for trauma-informed care.
Helping Candidates Tell Better Stories, Not Just Upload Resumes
Helping Candidates Tell Better Stories, Not Just Upload Resumes
A hiring platform profile redesign focused on flexible layout, strong hierarchy, and recruiter-side discoverability.
A hiring platform profile redesign focused on flexible layout, strong hierarchy, and recruiter-side discoverability.
Redesigned in 4 Hours: News Without the Noise
Redesigned in 4 Hours: News Without the Noise
A rapid UX challenge to rethink content hierarchy and reduce friction in a scroll-heavy app.
A rapid UX challenge to rethink content hierarchy and reduce friction in a scroll-heavy app.
