Novus Kitchen
eat healthy, eat clean, no matter what.
The Product
An e-commerce app to allow users to make more informed meal selections, based on dietary needs and restrictions in a customizable, efficient, affordable manner.
Responsibilities
-
UX/UI Design
-
Branding
-
Graphic Design
-
Research
-
Wireframing and prototyping
My Role
UX/UI Lead
Project Duration
Dec 2022 - Feb 2023
The Problem
Lack of accessibility to a dining experience that allows users on busy schedules to make efficient, affordable, informed, healthy meal choices whether through takeout, delivery, or dine-in.
The Goal
To create an e-commerce app that allows anyone, regardless of accessibility, time, or dietary restrictions to have access to the meals of their choosing, allowing customization and user profiles in order to create a more personalized approach to ordering, and to facilitate discounted meal rates through built customer loyalty programs.
The Research
Summary
based on interviews and competitor audits conducted, many people are frustrated with the way restaurants' individual websites operate and the limited ordering options, information, and images that are available. Customers are usually redirected to third-party websites to place orders, which may work well for delivery and takeout, but doesn't otherwise contribute to ordering for a dine-in experience. A cohesive website is required to establish a trustable image and reputation in terms of professionality and service quality. Initial assumptions were that users were content relying on 3rd party apps to assist their ordering procedures. However, it was revealed that lack of access to a functional, central e-commerce site creates user pain point in terms of updated, personalized menus and at times lack of customer support and in depth information about the restaurant and its offerings.
Pain points
1
1
Novus Kitchen (Sample Project)
eat healthy, eat clean, no matter what.
The Product
An e-commerce app to allow users to make more informed meal selections, based on dietary needs and restrictions in a customizable, efficient, affordable manner.
Responsibilities
-
UX/UI Design
-
Branding
-
Graphic Design
-
Research
-
Wireframing and prototyping
My Role
UX/UI Lead
Project Duration
Dec 2022 - Feb 2023
The Problem
Lack of accessibility to a dining experience that allows users on busy schedules to make efficient, affordable, informed, healthy meal choices whether through takeout, delivery, or dine-in.
The Goal
To create an e-commerce app that allows anyone, regardless of accessibility, time, or dietary restrictions to have access to the meals of their choosing, allowing customization and user profiles in order to create a more personalized approach to ordering, and to facilitate discounted meal rates through built customer loyalty programs.
The Research
Summary
based on interviews and competitor audits conducted, many people are frustrated with the way restaurants' individual websites operate and the limited ordering options, information, and images that are available. Customers are usually redirected to third-party websites to place orders, which may work well for delivery and takeout, but doesn't otherwise contribute to ordering for a dine-in experience. A cohesive website is required to establish a trustable image and reputation in terms of professionality and service quality. Initial assumptions were that users were content relying on 3rd party apps to assist their ordering procedures. However, it was revealed that lack of access to a functional, central e-commerce site creates user pain point in terms of updated, personalized menus and at times lack of customer support and in depth information about the restaurant and its offerings.
Pain points
1
Limited nutritional information on pdf menus and 3rd party ordering sites, preventing informed decision making
2
lack of trust in trying out new restaurants due to a lack of organized/branded websites including lack of imagery
3
lack of accessibility options such as text to speech for those with disabilities, causing some to refrain from ordering at all
4
menus often not supportive of those with dietary restrictions and special needs; lack of navigation for those with specific dietary needs
Persona: Iliya Khan
Problem Statement:
Iliya Khan is a busy automation engineer with dyslexia and dietary restrictions who is trying to efficiently eat healthier at work to lose weight so he can be a better employee while maintaining his health to get back into the dating scene.
Age: 28
Education: Mechanical engineering graduate
Hometown: Karachi, Pakistan
Family: 1 cat
Occupation: Automation engineer at large corporation
“My priorities are my career goals right now, my personal lifestyle comes second, as long as I can eat healthy without stressing about it, I'm not worried about it.”
-
Be efficient in daily work and decide what to eat quickly and eat well during lunch break
-
Eat healthier to meet fitness goals, to get back in the dating scene
-
be mindful of his dietary restrictions by avoiding mistakes during ordering due to dyslexia
-
Having to read through complicated lunch menus and not being able to find a good option quickly.
-
“I could save time if the website would just show and save my dietary preferences for future orders.”
-
“dietary restrictions greatly affect my health; I avoid ordering online when menus aren’t legible as I could be compromising my health
Goals
Frustrations
Takeaway
Iliya is extremely busy with work these days but is trying to build a healthier lifestyle as much as his career permits as he is on the lookout to start dating again. His work is extremely demanding so it has been increasingly difficult for him to meal-prep for work, but he is also weary of ordering out because his dyslexia makes it difficult to navigate orders. His strict dietary restrictions make the possible ordering of the wrong food due to his dyslexia life-threatening.
Hypothesis Statement
If Iliya uses the Modern Restaurant App, he will have access to a screen reader and images of foods to order as well as nutritional breakdown so that he can make informed choices efficiently, that will not compromise his health, fitness goals, and efficiency at work.
User Journey Map
User Flow Diagram
Paper Wireframe
Digital Wireframes
Low-Fidelity Prototype
The prototype was developed based on previously sketched out User Flow Diagram and wireframes. prototype was tested and redeveloped based on functionality and navigation of buttons. additional pages may still be required as part of action response notification pages.
UI and Branding
Logo Design
Typography
Color Palette
HEX #F15A24
HEX #FFE7DF
HEX #FF9900
HEX #808080
HEX #B3B3B3
HEX #000000
UI Kit
the UI KIT was developed by a comprehensive research on the color psychology and its implications on dietary perceptions, using the color orange to represent fire and flavor. buttons were developed keeping a minimalist, playful look in mind, with a UI Kit to pass on to developers and engineers working on the project
High-fidelity Prototype
Usability testing
I tested the high-fidelity prototype with 10 users to determine the necessary revisions to make the overall experience more intuitive, efficient, responsive, and pleasant. The experience was observed based on intuitive navigation, the ability to complete a task, and app responsiveness in terms of feedback and tone.
The results are noted below:
100% of participants were able to successfully place an order including order
100% correctly described the selling point of the product
100% identified the use of colors for intuitive navigation/call to action
customization
Pain Point Identified
users not getting any feedback when adding orders to their cart.
Solution
a pop-up notification informing the user that the item has been added to their cart
Affinity Mapping
Affinity mapping was used after high-fidelity prototypes were developed. User progression throughout the app was tracked to identify persisting pain-points, frustrations, or satisfactions with the designs. additionally, short interview was also conducted with testing participants to gather further insight.
Iteration Design
Based on the affinity map, a new pop-up was required to inform the user that their selection had been added to the cart.
This page was designed using an additional Figma frame and retested with stakeholders for approval.
When tested again with users, this addition allowed for a more seamless approach to the overall experience on the app
Final Design Breakdown
On the home page which is the introductory page to the app, featured events and menu items are placed in a sliding gallery on top with a design of the protruding logo which redirects users to the home page regardless of where they are on the app. On this page, rotating menu favorites and combo deals are placed for meal prep options for quick add-to-cart capability. Users also have the option to access specific menus based on Dine-in, To-Go, and Catering, in order to choose without limited availability based on order type.
when delivery type is chosen, the user is redirected to a page of menu categories to choose from based on dietary preferences, and overall different meal options. additionally, if not wanting to pick from pre-existing meals, users have the option to build their own meal from scratch through the customize tab.
All menu items are equipped with a plus button allowing them to quickly be added to the carts, along with a screen reader placed every step of the way for accessibility needs. additionally, the user is given the option to sign up for the app on any given page, with the benefit of reoccurring discounts shown throughout the app, from price reductions for all menu items, to the ability to collect points for free meals. additionally, users are given the option to check or uncheck items directly from their cart in order to see the effect on total payment amount.
Upon checking out, users are given the ability to follow up with up-to-date status of their orders so that they can plan their time around the delivery, and even track their drivers.
go to the prototype and experience the app for yourself!
Next Project