APPLICATION DESIGN I: PROJECT 3
29/08/2022 - 12/11/2022 (Week 06 - Week 11)
ALICIA TENG YI LING / 0345159
/ BDCM
APPLICATION DESIGN I
PROJECT 3 / Lo-fi prototype
 |
Project 3 Lo-Fi Prototype
Todo:
- Create a lo-fi prototype of the redesigned app
- Perform user-testing on the lo-fi prototype
Process:
To start off, I read three articles recommended by Mr. Shamsul on how to
create a great UI document/ style guide. They were:
Branding
The first re-designing work I did involved the overall branding of the app, so I made a new logo for Weekly Meal Planning - Meal Planner.
Inspiration
 |
Fig 1.1.1 Branding Inspiration I |
 |
Fig 1.1.2 Branding Inspiration II |
 |
Fig 1.1.3 Branding Inspiration III |
Logo
Sketch
I did a rough sketch to get a feel of what lines and elements I wanted to include in the logo. After extensive brand research on similar food shopping, meal planning/tracking apps, I noted that the theme of nature and greenery is pretty prevalent in many of them and it matches of the type of aesthetic I like so here is what I came up with.
I thought that a little leaf is a cute touch to balance out the overall image.
 |
Fig 1.2.1 Rough Sketch |
Final, refined logo
I then proceeded to finalise and tidy up the design. I changed as much elements as I could to vectors to avoid re-sizing issues. To top it off and finish it, I added the name of the app and two dots at the side to add symmetry to the overall look.
 |
Fig 1.3.1 Final Logo Black |
 |
Fig 1.3.2 Final Logo White |
Updated Wireframes
After some feedback and tweaking, these are the updates I made to the wireframes.
 |
Fig 2.1 Loading Screen |
 |
Fig 2.2 Log In |
 |
Fig 2.3 Sign Up |
 |
Fig 2.4 Home Page |
 |
Fig 2.5 Daily Meal Planning |
 |
Fig 2.6 Recipes |
 |
Fig 2.7 Recipe Example |
 |
Fig 2.8 Calendar |
 |
Fig 2.9 Calorie Counter Screen |
 |
Fig 2.10 Daily Water Intake Screen |
 |
Fig 2.11 Shopping List |
Possible Interactions in Lo-fi Prototype
 |
Fig 3.1 Lo-fi Prototype Interactions Diagram |
User Testing Process
Introduction & Overview
Preamble:
To start off, I introduced myself to the participant and explained what we would be doing. In sequence, 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. It was very free-reign and do whatever you want kind of app testing, simply to see whatever they would do and what they were drawn to most.
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’ll 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 low fidelity prototype so many other features have not been fully implemented. All in all, take your time exploring and please give as much honest feedback as possible. "
Task Demonstrations/Questions
You want to check what’s for lunch and how long it’ll take for you to cook. You’ll also want to see how many calories are in it and how many servings is it. Also, just to make sure it’s the right meal, go to the recipes tab and double check. (What's for lunch? What are it's details? Can you find the recipes section?)
It’s almost time to go grocery shopping, take a look at ingredients are in your shopping cart list. (Find the shopping list, what ingredients are in it?)
Check your calendar to find out what time you ate lunch. (Find the calendar, what is lunch time?)
Participants
- "AG"
- Has little experience with meal planning apps
- Has motivation
- Gives honest feedback on UI issues after recording stops
- Likes to explore the app outside of instructions and questions
- "AT"
- Has experience with meal planning apps
- Has motivation
- Appreciates UI design
- Follows instructions to the fullest and completes them
- "YH"
- Has a bit of experience with meal planning apps
- Has motivation
- Tries to interact with all UI
- Likes to explore the app outside of instructions and questions
Results
Improvements to be made
- Figure out if the "loading screen" can automatically move to the next screen without having to require users to click it as they can get confused as what to do in the beginning
- Implement the sidebar dropdown menu in the main home page when the top left icon is activated
- In the next user testing, explain that they can choose if they are a new user or the old current user to avoid confusion
- Add the "oops, not implemented" message in all areas, cards and buttons that will not be added to the final prototype
- There is some sort of delay or lag when clicking interactable areas, see if there is a way to remedy this or if it is an Adobe XD issue
- Try adding a scroll feature in recipe example
- Create an onboarding screen
Final Lo-fi Prototype Submission
User Testing Videos:
FEEDBACK
(31/10/2022)
Prototype
- For user testing take only the screens that are relevant to your chosen scenarios
- for calorie counter the reason many food apps do not include it is for risk of suing for inaccurate information: please make sure there is a disclaimer with asterisk regarding the accuracy and source of such information - Mr. Shamsul said it's okay for just the purpose of the UI design
- Proceed with low fidelity prototype
(07/11/2022)
- Perform user testing on three people: can do it online just need to do record the session for physical proof)
- Proceed to final project
(21/11/2022)
- Create an onboarding screen
REFLECTION
It was the first time I've ever designed an app and it made me realise the constraints of size as I am used to web design. Readability, functionality, aesthetic and design is all much more intense and difficult to ensure is perfect. I'd describe this project as a tedious but fun process. It's quite an accomplishing feeling to see the things you painstakingly designed and mapped out come to life and be tested by other people. During the user testing, I noticed a lot of errors in my current design and what people tend to stray to and are interested in which I will try to fix and implement in the hi-fi prototype. I hope the final project is a much more polished product of my design and has infinitely less issues for the users.
For the software, I decided to use Adobe XD instead of Figma as the interface looked more familiar and would therefore ensure a smoother process for me.
All in all, I'm excited for the final project and ready for future works where I can implement my new design skills for apps.
IMAGE REFERENCES
Comments
Post a Comment