Cafe To
Cafe To is a Toronto-based café dedicated to offering healthy meals tailored for individuals with special dietary needs. To streamline the ordering process, especially for those with dietary restrictions, the café provides a responsive mobile app that allows customers to select from a variety of healthy meals, snacks, and beverages, place orders, and pick them up at their convenience.
Role
UX Designer
Timeline
September 2021 - November 2021
Tools
Figma, Zoom, Gmail, Miro
Problem
Busy individuals with dietary restrictions often face challenges in finding and ordering healthy meals quickly. Existing food ordering platforms lack features that cater to their specific dietary needs, leading to frustration and limited meal choices.
Solution
To address the identified challenges, I designed a responsive mobile app with the following key features:
Easily filter and select menu items based on dietary preferences
Users can apply filters to view menu items that align with their specific dietary needs, ensuring a personalized and suitable selection.
Personalize orders to meet specific dietary needs
The app allows users to modify ingredients within menu items, providing flexibility to cater to individual dietary restrictions or preferences.
Schedule convenient pickup times to fit their busy schedules
Users can choose preferred pickup times, allowing them to collect their orders at times that best suit their routines.
Research
To gain a comprehensive understanding of users' experiences with ordering food and managing dietary needs, I adopted a diverse research strategy that included surveys, interviews, affinity diagramming, and competitive analysis.
Survey
To collect quantitative data on users' challenges and behaviors related to dietary preferences and meal preparation. I distributed an online survey via social media platforms, receiving 30 responses.
📊 key Findings
Difficulty in Finding Suitable Food
60% of respondents reported challenges in locating food that matches their dietary preferences.
Time Constraints
Nearly 90% of participants indicated they are too busy to cook.
Demographic Distribution
The survey had an almost equal ratio of male to female respondents.
User Interviews
To gain a deeper understanding of users' experiences with ordering food and managing dietary needs, I conducted in-depth interviews with 5 participants. Each conversation provided unique insights into the challenges and preferences individuals face in their daily routines.
Affinity Diagram
After gathering this qualitative data, I synthesized the information using an affinity diagram. By organizing individual insights into clusters based on their natural relationships, I was able to identify overarching themes that highlighted common user pain points and needs.
This visual illustrates the clustering of insights and the emergence of key themes from the user interviews.
💡 Key Themes
Lack of Transparent Menus
Participants with dietary restrictions expressed difficulty in finding clear information about menu items, making it challenging to identify suitable food options.
Time Constraints
Many interviewees highlighted busy schedules as a barrier to meal preparation, increasing their reliance on convenient food ordering solutions.
Preference for Guest Checkout
Several users preferred the option to check out as guests to expedite the ordering process without the need for account creation.
Need for Assistive Technologies
Some participants noted that existing food ordering platforms often lack features that support users with disabilities, indicating a need for more inclusive design.
Competitive Analysis
I conducted a competitive analysis using a comprehensive audit spreadsheet. After identifying both direct and indirect competitors, I evaluated each based on first impression, interaction, visual design, and content, grading them on a scale from "needs work" to "outstanding." This assessment revealed opportunities for the Cafe To responsive mobile app.
Some opportunities I’ve identified based on the competitive analysis include:
Implementing dietary preference tagging can streamline the ordering process for users.
Providing various payment methods enhances transaction convenience.
Integrating assistive technologies ensures the app is accessible to a broader audience.
Personas
Based on insights from interviews and surveys, I developed two primary personas to guide the design process.
Mia is a busy professional with dietary restrictions who seeks convenient access to healthy meal options due to her limited time for cooking.
Daniel is an active college student who desires a menu that transparently displays calorie counts and ingredients, facilitating stress-free online ordering.
Ideation
I conducted a Crazy Eights exercise to generate ideas focusing on a transparent menu, user-friendly payment options, and an easy checkout flow.
Paper Wireframe
I sketched each screen of the responsive mobile app to ensure the digital wireframes would effectively address user pain points.
Digital Wireframes
Building upon the paper sketches, I developed initial digital designs for the Cafe To app.
Low-fidelity Prototype
I created a low-fidelity prototype to visualize the app's basic structure and flow, facilitating early-stage testing to identify major usability issues and gather initial user feedback.
Usability Study
After developing the prototype, I conducted usability studies to determine areas needing refinement.
These are the findings from the usability study:
Users desired customization options.
Users wanted the ability to choose a pickup time for their online orders.
Major Design Iterations 🔁
Based on usability testing feedback, I implemented two significant changes to enhance the overall user experience.
👇 Iteration 1: Customization Options Added
I introduced a call-to-action button labeled "Customize" on the menu item page, allowing users to add or replace ingredients in their selections, thereby accommodating individual dietary preferences.
👇Iteration 2: Pickup Time Scheduling
I added "ASAP" and "LATER" order options during the checkout process, enabling users to select their preferred pickup times and manage their schedules more effectively.
High-fidelity Prototype
The final high-fidelity prototype presented cleaner user flows for ordering food based on dietary restrictions, including customization and pickup time scheduling options.
Accessibility Considerations
Added alt text to images for screen readers to assist users with impaired vision.
Ensured color contrast accessibility for visually impaired users.
Mockups: Original Screen Size
Mockups: Screen Size Variations
I optimized the browsing experience for various devices, such as tablets and desktops, to ensure users have a smooth experience across platforms.
Final Design Video
What I Learned
Through user testing, I recognized the importance of validating and challenging my assumptions. This approach prevents the development of products that may not align with user needs.
What’s Next
Conduct another round of usability studies to ensure all user pain points are resolved.
Design an order tracking feature to further enhance the user experience.
