APPLICATION DESIGN: PROJECT 4
29/08/2022 - 07/12/2022 (Week 10 - Week 15)
ALICIA TENG YI LING / 0345159 / BDCM
APPLICATION DESIGN I
PROJECT 4 / Hi-fi prototype
Todo:
- Create a hi-fi prototype of the redesigned app
- Perform user-testing on the hi-fi prototype
Process:
The first thing I did to continue refining usability of the prototype is to add in the pop up side menu that can be activated by tapping the icon in the top left in the home page. This is to enable easier navigation for users to directly view the different sections of and browse through the app. Following this, I ensured to add the "Oops! Not implemented" screen to overlay whatever areas and cards that are not meant to be part of the final outcome.
Additionally, as per the advice from Mr. Shamsul, I implemented five new onboarding screens that are stationed after the loading screen. They briefly describe some abilities of the app and a brief explanation of the apps purpose. Next, I extended several of the pages (As can be seen in figures 2.11, 2.12., 2.13 & 2.15) for more information and to add disclaimers (Figure 2.14) and also try to make it as close to a final visual prototype as possible.
Finally for the visual aspect, colours from the UI Style Guide were added to the prototype bring the design to life. Plus, images of the food from "Pexels" and and vector art illustrations sourced from an online site: "Freepik", were implemented into the necessary areas.
 |
Fig 1.1 Chosen Food Images from Pexels |
These are the final updated wireframes after colouring, extending + adding more detail and adding new screens.
 | |
|
 |
Fig 2.2 Onboarding Screen I |
 |
Fig 2.3 Onboarding Screen II |
 |
Fig 2.4 Onboarding Screen III |
 |
Fig 2.5 Onboarding Screen IV |
 |
Fig 2.6 Onboarding Screen V |
 |
Fig 2.7 Log In |
 |
Fig 2.8 Sign Up |
 |
Fig 2.9 Home Page |
 |
Fig 2.10 Daily Meal Planning |
 |
Fig 2.11 Recipes Screen |
 |
Fig 2.12 Recipes Example |
 |
Fig 2.13 Calendar |
 |
Fig 2.14 Calorie Counter Screen |
 |
Fig 2.15 Daily Water Intake Screen |
 |
2.16 Shopping List Screen |
 |
2.17 Pop up Side Menu |
 |
2.18 Error! Not implemented Screen |
User Interactions in Hi-fi Prototype
These are the updated available interactions linked up with all the new screens in Adobe XD.
.png) |
Fig 3.1 Hi-fi Prototype Interactions Diagram |
User Testing Process
In this next round of user testing, I found three new individuals who were willing to help me test out the hi-fi prototype. I decided to try make the process more detailed so I could gather more data and a better understanding of their thoughts regarding my design and UI.
Introduction & Overview
Preamble:
To begin the user testing, I introduced myself to the participant and gave an explanation of what we would be doing. I then started asking questions about their general experience with meal planning apps. Following this I started presenting the scenarios, and after they completed each scenario, the next one would be read out to avoid to many instructions at once that may overwhelm and confuse them. After each instruction was given, I let the participants simply play around and interpret each scenario on their own. Finally, I asked questions about their thoughts on the hi-fi prototype (what they liked and disliked, if anything was unclear, etc.) and asked a few questions that would use a scale grading system (1-5) to ascertain a numerical rating for my prototype.
The Script:
"Hi, my name is Alicia Teng and I will be conducting an anonymous user test with you today regarding the prototype re-design of an app named Meal Planner – Weekly Meal Planner. I will start by asking you a number of questions regarding your experience with meal planning and food tracking apps then I will be giving you three scenarios and you’ll have to try navigating and using the app yourself based on these scenarios. Please keep in mind that this is still a prototype so many features have not been fully implemented. Finally, after you have tried out the app prototype, I will be asking you several questions about your thoughts regarding the interface and the experience. All in all, take your time exploring and please give as much honest feedback as possible."
Questions regarding Experience with Meal Planning/Food tracking apps
- Have you ever used meal planner and/or food tracking apps?
- If yes, what is your main motivations for using such apps?
- Since your answer is no, what motivations do you think you would have to start using one?
- Have you ever used this application “Meal Planner – Weekly Meal Plan” before?
- If yes, could you briefly describe your experience with this app? Positive or negative.
- If yes, what was your impression of the app?
Task Demonstrations/Scenarios
You want to check what’s for lunch and how long it’ll take for you to cook. Plus, you also want to see how many calories are in it as well as how many servings is it. Finally, just to make sure it has the right ingredients and directions, go to the recipes tab and double check.
It’s almost time to go grocery shopping, take a look at what ingredients are in your shopping cart list.
You’re feeling forgetful. Try checking your calendar to find out what time you ate lunch.
Questions regarding thoughts on Hi-fi Prototype
- How satisfied are you with the look and feel of the app? (Scale 1-5 but may elaborate)
- How satisfied are you with the ease of use of the app? (Scale 1-5 but may elaborate)
- What confused/annoyed you about the app?
- What features of the app were most interesting to you?
- What features were least important to you?
- Are there any features you expected to find but didn’t?
- What features would you like to have added to the app?
- How would you rate the overall quality of the app? (Scale 1-5)
- How would you rate the overall experience of the app? (Scale 1-5)
Participants
- "YK"
- Has no experience with meal planning apps
- Has motivation
- Likes UI and ease of navigation
- Fulfills all necessary requirements in scenarios to the fullest
- "SC"
- Has no experience with meal planning apps
- Has motivation
- Appreciates UI design
- Likes the colour scheme/palette
- "BB"
- Has some experience with meal planning apps
- Has motivation
- Tries to interact with all UI
- Gives detailed answers during questions
- The recipes screen is all three user tests favourite section of the app
- Navigation is easy to understand and allows them to access each section of the app with clarity and ease
- The colour scheme is calming and easy on the eyes
- The aesthetic is clean and minimal, allowing ease of usability
- Apparently have no issues with the design or UI, but there is a slight lag when tapping buttons and certain interactions
Final Hi-fi Prototype Submission
Fig 4.1 Hi-fi Prototype
 |
Fig 4.2 Final Hi-fi Prototype Wireframes |
High Fidelity Prototype Adobe XD Link: https://xd.adobe.com/view/83f134e2-6141-49c1-bec0-87a1ef69edb4-d6a2/?fullscreen&hints=off
FEEDBACK
(21/11/2022)
- Continue working towards final hi-fi prototype
- Don't forget to include user testing with three new people
- Use the same scenarios from lo-fi testing
(05/12/2022)
- Good, ready for submission
REFLECTION
Overall, I'm interested to see where what I have learnt can help me in my future projects. I only hope that Application Design II does not kill me with the coding.
Comments
Post a Comment