DC01_Team04_MD8213_CA4B_Slides

DIGITAL DESIGN TEAM PROJECT Digital Product Design Studios 2 MD8213 Group 4: Afiqah Bte Nazarudin | P2007096 Jaslyn Lee Pei Shi | P2142577 Russell Toh | P2107615 Nur Danisha Zurni | P2142056

01 02 03 04 05 Recap Our App Design Features App System Walkthrough Problem App Mockup, Insights, Low & Identification, App Icon & Colours, High Fed Live Demo Objective & TA Description Typography and Wireframe, UI & Iconography UX Justification

01 Recap Problem Identification, Objective & TA

RECAP Problem Identification Students in the tertiary education tend to not eat regularly and healthily.

RECAP Persona Stress Eating Georgia Age: 21 Years Old Needs and motivations: ● She needs something that will get her motivated to improve on her eating habits in an engaging and informative way. ● She needs to eat proper meals so that she has enough energy to continue with her very busy schedule. ● She needs to find places that fit within the budget of her lifestyle. Pain points: ● Sick and tired of eating the same meals everyday and wants to try something new. ● Does not have time to research new and interesting places to eat new meals. ● Does not know the consequences of constantly having a bad eating habit and continues to do so.

RECAP Objectives Our IOS app will help tertiary education students in Singapore to: ○ Encourage students to have a healthier diet. ○ Explore healthier food options on a budget. ○ Maintain a healthy lifestyle while still studying hard in school.

02 Our App App Mockup, App Icon & App Description

OUR APP Ios App Mockup Iphone 14 pro max

OUR APP App Icon & Description Students lead busy lives and often struggle to maintain healthy eating habits. Our app addresses this by using streaks to motivate, education to inform, and a food directory to inspire. Goodbye to unhealthy choices and hello to a healthier you.

03 Design System Insights, Low & High Fed,

DESIGN SYSTEM Brand Character ● Evey acts as a companion and guidance for our users and is seen throughout the app. Evey

DESIGN SYSTEM Colours ● For the colours, we decided to stick with the same colour palette that we initially wanted. ● Based on our research, we found out that other applications that are advocating the same habit (Health Hub) are using brighter colours which are eye straining. ● We believed that these colours are not only soothing to the eyes but it is also appealing to our target audience who are mostly Gen Zs.

DESIGN SYSTEM Typography Before: ● While prototyping our app, we realised After: that the typeface we used for the heading has limited fonts, thus we decided to change it to Bogart. ● We also decided to include more sizes for the different headers and body so that we can have a variety of typeface sizes for different screens to show visual hierarchy.

DESIGN SYSTEM Iconography ● For the iconography style, we decided to do up simple vector styles that fits our overall style of the app. ● We also decided to use simple shapes to create Evey, however, we decided to change up their expressions based on the content shown. ● We also customised our icons (e.g eatstreak) so that the UI is consistent throughout the app.

04 Features Insights, Low & High Fed Wireframe, UI & UX Justification

DESIGN SYSTEM Insights: Survey ● Aim to determine the factors that contributes to unhealthy eating habits. ● Uncover what drives them to adopt healthy and consistent eating habits. ● Determine the extent of their knowledge about healthy eating. ● Examine if financial considerations play a role in their food choices. ● Determine which persona do they relate best and why.

DESIGN SYSTEM Insights: Contextual Inquiry Step 1: Contacting our Step 2: Collating Step 3: Organising responses participants responses for 5 days and gathering insights

DESIGN SYSTEM Key Insights ● Participants do not eat meals on a regular basis due to their lack of time and motivation from their busy school schedules. ● Participants prioritise money over enjoyment when it comes to their choice of food as most of them are money cautious. ● Participants are motivated to eat food if the food is already made for them as it is more accessible, convenient and they do not need to make a decision on what to eat. ● Participants do not prioritise the health effects of eating unhealthily as they lack the knowledge and understanding of the benefits that healthy eating can have. ● Participants do not bother to change their eating habits as they are already comfortable with their current lifestyle.

DESIGN SYSTEM Key Insights Finalised objective: To have features in the app to educate our users on how to develop a better eating habit while on a tight schedule and a budget. The app also has features to help our user find new healthy food for them to explore their eating options and get them motivated to eat proper meals again.

Wireframes and Prototypes

Homepage FEATURES Wireframe & Prototype ● Wireframe ○ For our homepage, we wanted to feature both ‘Eatstreak’ so that the users will know their progress as well as a ‘Hot Takes’ sections where users can browse through articles related to healthy eating. ● Prototype Wireframe ○ We decided to go ahead with our initial idea of putting Eatstreak on the first page so that the users are prompted to do the challenges. ○ However, we decided to change the ‘Hot Takes’ section to ‘What’s Next’ section where users are able to browse through the different features of the app easily since our app is content heavy. Prototype

FEATURES Wireframe & Prototype Eatstreak ● Wireframe ○ The initial idea was for us to have a simple progress bar that shows the users how many days they have left before they earn their rewards. ● Prototype ○ We also decided to add an additional page before the users are able to choose the challenge that they want before they begin their Eatstreak journey. Wireframe Prototype

FEATURES Wireframe & Prototype Eatstreak ● Wireframe ○ We wanted to show the users’ progress at each stage but it did not really show how they can update their progress. ● Prototype Wireframe ○ We decided it would be better if it was a circular progress bar while displaying the challenge so that users are more motivated to send updates and track their progress. ○ We modified this feature by adding rewards at the end of the progress and “Send Update” button to make it more interactive. Prototype

FEATURES Wireframe & Prototype Food Explorer Wireframe ● Wireframe ○ The initial plan was to provide users with a map and view the restaurants that are open around them. ● Prototype ○ While doing the prototype, we were inspired by an app called Burpple where it shows you the new eating places and organised the ‘Food Explorer’ page in a similar manner. ○ We also made sure to recommend our users places to eat based on our insights, thus, we prioritised places that are labeled ‘healthier choice’ or are ‘wallet friendly’. Prototype

FEATURES Wireframe & Prototype Eatroduction ● Wireframe ○ For our wireframe, we wanted to do a simple page where it featured all of the topics on how to improve users bad eating habits. This page will be guided by Evey. ● Prototype ○ Based on the gallery walk, the testers mentioned how this page was too wordy and similar as pictures were used throughout, thus we decided to add in illustrations of Evey and got rid of the descriptions so that the CTA is clearer. Wireframe Prototype

FEATURES Wireframe & Prototype Eatroduction ● Wireframe ○ Initially we wanted information will just be displayed without any visual elements. ● Prototype Wireframe ○ Based on users’ feedback, the information was too long so we decided to do chunking to help users digest information quickly and effectively such that they are able to understand and remember the information. ○ We also made it more interactive by allowing the users to swipe through the information. Prototype

FEATURES Wireframe & Prototype Eatroduction ● Wireframe ○ The initial plan was to just have “solutions” on the top of the screen. ● Prototype ○ During our user testings, we found out that users had a difficult time going back to the Eatroduction page as there was no back button. ○ Not only that, they found it a hassle that they had to restart the whole lesson to know the solutions to their problems. Wireframe Prototype

FEATURES Wireframe & Prototype Eatroduction ● Prototype ○ Thus, we designed as such that when they have finished their lessons and arrived to the solutions page, their Eatroduction page will be updated with the solutions ready for them. ○ We have also designed the solutions to be interactive and effective rather than just articles so that the users are able to use other features to solve their eating habits. Before they After they complete start lesson the lesson

FEATURES Wireframe & Prototype Eatroduction (Solutions)

UI & UX Principles

FEATURES UI Principle: Visual Hierarchy Visual Hierarchy ● Visual Hierarchy is seen throughout our app but it most prominent in our home page where the Eatstreak progress bar is displayed first as it is the most important feature of our app. ● Larger typography size is used to emphasise the more important elements while smaller ones are used to display the less important elements. ● Even when the users have already updated their Eatstreak status, that will be the first thing that they see when they use our app. Before update After update

FEATURES UI Principle: Gestalt Principles Gestalt Principles ● Gestalt principles are important when designing anything and can see seen throughout our app. ● There are multiple instances of the proximity and common regions are being used to show the categorisation of different elements so that everything is neat and easy to read. ● Closure is also being applied which allows the users to understand that they can scroll horizontally or vertically. ● Focal point is also used throughout our app to prompt the users to do the suggested action.

FEATURES UI Principle: User Control & Freedom User Control & Freedom ● ‘Users should be able to quickly correct mistakes or backtrack on choices made.’ (Rosala, 2020) ● A pop-up prompt questions the user if they would like to quit or continue after clicking on the exit icon. ● This allows the user to navigate back to the previous screen or continue to move on to the next screen.

FEATURES UX Principle: Onboarding Process Onboarding Process ● Usage of Nickel Tour ● A simple to understand onboarding, yet leaves a lasting impression by covering all of the essential features.

FEATURES UX Principle: Gamification Gamification ● ‘Gamification is the process when you introduce interactive elements in your UX and encourage the user to interact with your resource in a game format.’ (Fireart, 2022) ● We incorporated gamification by putting in a progress bar in our Eatstreak page so that users are more engaged and would be excited to challenge themselves to eat healthily to earn the rewards. ● Not only that, the users are able to interact with Evey when they send an update and share it with other users which increases interactivity to may be a very mundane task when done without Eatstreak.

FEATURES UX Principle: Gamification Gamification ● We also added a gamification feature throughout our entire Eatroduction journey by having quizzes and interactive ways of reading through the information on the causes of their bad habits.

FEATURES UX Principle: Help and Documentation Help and Documentation ● Help and documentation is a crucial heuristic principle, features such as our onboarding and popup hints all help to guide and help the user. ● The user will feel less frustrated and more at ease that they know what to do and how to tackle any issues that may arise.

Design & Features Final Iteration

04 App Walkthrough Live Demo

APP WALKTHROUGH Explainer Video

APP WALKTHROUGH Live Demo! Scan to try it out!

Thank You!

Resources - Rogatiuk, A. (2021) Gamification in UX, Fireart Studio. Available at: https://fireart.studio/blog/gamification-in-ux-design-designing-fun-experiences-for-serious-situations/. - User Control and Freedom (Usability Heuristic #3) (2020) Nielsen Norman Group. Available at: https://www.nngroup.com/articles/user-control-and-freedom/.