Design Process
Initial Prototyping
Using the analysis results from user plan and our brainstormed ideas, each of our 4 members created our own version of the prototype focusing on user interaction and experience. We made use of wireframing technologies such as Figma and Balsamic to create our low-mid fidelity prototypes.
We then send the 4 different versions of the same application to a different group to evaluate the prototype.
Below are two examples of the initial prototype created by Gillett and Janice:
Evaluation plan
Methods of evaluation
Heuristic Testing
Usability heuristic testing will be undertaken first to minimize usability flaws based on guidelines and principles determined by Jacob Nielsen 10 principles of usability heuristics.
Changes will be made based on heuristic testing before proceeding to user group usability testing. With multiple rounds of evaluation before creating the final prototype
Usability Testing
After going through heuristic testing, to validate the application further, evaluation with potential user groups is required to get insights and improvement points that experts might miss out.
The evaluators will be a number of users from our potential user group and multiple rounds of testing will be undertaken for this phase. Between each phase of evaluation, improvements will be made to the prototype before rolling it out to the next group of evaluators.
Qualitative testing
Heuristic testing
The mobile application will first undergo a round of heuristic testing procedures to find usability flaws that may be present based on certain guidelines that are established by user interaction/experience experts. These testing procedures make use of known principles that establish what user interface is straightforward and easy to use.
Usability heuristic principles adopted will be based on Jacob's Nielsen 10 principles of usability heuristics.
Visibility of System Status
1.
Consistency and Standards
4.
Flexibility and Efficiency of Use
7.
Match Between System and Real World
2.
Error Prevention
5.
Aesthetics and Minimalistic Design
7.
User's Control and Freedom
3.
Recognition and Recall in User Interface
6.
Help User Recognise, Diagnose and Recover
8.
Help Documentation
10.
Based on the 10 principles above, a usability heuristic checklist is created for the heuristic evaluation. Evaluators will make use of the heuristic checklist to critique and evaluate the prototype, as well as include possible improvements that we can work on.
Testing Process and details
01/
Context of Product
A high fidelity prototype of the NOMpanion will be under test and there will be no help or assistance render to help the evaluators. Every field to be filled will have hints given within the heuristic checklist itself.
02/
Evaluators
There will be a total of 8 evaluators for the mobile application prototype. 4 from our project team and another 4 from a separate project team. 4 Evaluators from the other project group will evaluate our prototype with their own metrics while 4 evaluators from our group will evaluate with the heuristic checklist created
03/
Testing Procedures
The heuristic checklist and the prototype were emailed to our group's evaluators before commencing on 2 rounds of heuristic checks.
The first round of evaluation will be done by the other group of 4 evaluators in the first phase of heuristic testing. The 4 members of the other groups will evaluate our 4 different versions of the prototype and send us the feedback/heuristic checklist on our prototype. We then combine our prototype with their feedback to create a combined prototype.
The second round of evaluation requires evaluators from our group to go through all the features and functions in the newly combined prototype. We will be using the heuristic checklist mentioned above for our evaluation. Every member of our group will go through the checklist and combine the results after a 2-3 hour evaluation session.
Lastly, a debriefing round will be given to evaluators to discuss the possible improvements for each of the flaws listed by the evaluators. If improvements are not found, move on from the problem first and focus on those with an immediate solution. At the end of the debriefing round, the project group came together again to discuss the rest of the possible improvements that can be implemented on the application. Changes to the prototype are then be made before proceeding to the usability testing phase.
Usability Testing
In this part of the qualitative testing procedures, usability testing will be carried out on potential user groups for the mobile application after improvements from heuristic testing. This is to determine problems and flaws that might be faced by the potential user groups not faced by the experts/developers on the application and come up with improvements to the application.
The first part of usability testing is to determine the different usability test goals. Then create a usability test plan for each of the features in the application with the usability test goals in mind. We will then recruit potential users to try out our mobile application and ask them to fill up a questionnaire about the application to get their opinions.
Usability Test Goals
General Goals
-
Identify lacking features and details
-
Identify usability loopholes that increase cognitive load
-
Evaluate the design aesthetics
-
Evaluate navigation flow logic and identify flaws in navigation
-
Ask if users always feel in control when using the application
Recipes
-
Is the information on the recipe page relevant and easy to access
-
Are the recipes difficult to follow
-
Are there a sufficient number of customizations for the recipe page
-
How easy is it to add/share/rate a recipe using the application
-
Are there relevant feedback and confirmation
Inventory
-
How easy it is to add ingredients to the inventory page
-
Are the information in the inventory clearly displayed
-
Are the information categorization adequate and proper
-
Are there relevant feedback and confirmation
Profile
-
Are the profile settings adequate for an enjoyable user experience, or are there any other missing information
-
Are the profile headers/tabs categorized properly
-
Is it easy to edit any of the profile setting details
Calories
-
Are the information shown on the calories page adequate to the user
-
Are the graphics and charts presented easy to read and easy to understand
-
Is it easy to navigate within the page itself
Usability Test Plan
For General Aesthetics and General Navigation
Aesthetics Steps
Navigation Steps
-
Free browsing of some features in any order, to focus on the aesthetics and design of the application from the user's point of view.
-
Access 3 different features from the menu bar
-
Access 2 different features from the bottom navigation
-
Access 2 different features from the home page
-
Find out 3 different ways to access recipes
Adding ingredients into Inventory
Steps
-
Access the add ingredients tab using either the bottom navigation, menu, or refrigerator tab
-
Manually enter the details or use the camera to scan the barcode/QR code
-
Fill in the expiry date using the calendar
-
Confirm the item
-
Check item on refrigerator tab for items
Addition and View of Recipes
Steps
-
Scroll the different recipes categories and select one of the recipes
-
Add a recipe
-
Make edits to added recipes
-
Browse a recipe information
-
Customize and cook selected recipe
-
Share and rate cooked recipe
Profile Settings
Steps
-
Access the profile tabs
-
Edit the different fields in personal profile details by scrolling through personal profile details relevant to the application (Profile, height, and weight, lifestyle, preference, dietary requirements)
-
Access membership tab and use a voucher
Calories Tracking
Steps
-
Access the calories tab
-
Scroll through the information and view the information, note that any lacking details for this feature
-
Navigate to the other macronutrients tab and back to view all metrics that are being tracked with the application
-
Check history of information tracked
Evaluators
Recruitment of 4 users from the potential user groups namely fitness enthusiasts and young parents/working adults.
-
Have an even proportion of each user group
-
Split the group into 2 groups of 2
-
Each group of 2 should have an equal number of users from the 2 user groups.
-
Recruitment will be done through luminous recruitment tabs or friends and peers from the project group
Testing Procedures
Recruitment
Send out recruitment posters on luminous and to friends and peers of the project team members for recruitment with attached questionnaire with consent forms to participate in the voluntary studies
Pilot testing
Send the completed prototype on Figma to 1-2 users from the potential user groups to let them take the study and fill in the end study questionnaire. Tweak the questions and test plan accordingly based on the result received.
This will act as a pilot study, no data will be collected in this phase.
Main Study
After collating up to 4 users of equal proportions from the 2 main potential users user groups with their consent, send out the Figma prototype with the questionnaires to the first group of evaluators.
Collate the results within 1-2 days and analyze the results. Make the adjustments based on the results obtained and send out the prototype and questionnaires to the second group of potential users.
De-briefing
Collate the final results from the usability test and send out an acknowledgment and gratitude email to all participants of the study. Make the final adjustments and improvements to the prototype.
What the test plan is not designed to achieve
Because a usability test uses a small number of participants (6-8 are typically enough to uncover 85% of usability problems), it is not suited to answering market research questions (such as how much participants would pay for a product or service), which typically need larger test samples.
The test is also not designed to find out the completeness of our database. This is inclusive, but not limited to the variety and quantity of recipes, ingredients etc. We do not have the application design interface tied to any database or algorithms
Evaluation Results
Phase 1 (Heuristic)
This phase of heuristic testing tests on the 4 individual prototypes created by our members by Project group 16 and their own heuristic testing metrics. Below shows the summary of the comments/improvements that are relevant to our prototype that can be implemented to our prototype.
01/
General Comments
-
Textual Buttons and links can be more obvious to users
-
For navigation, try not to repeat the navigation on the menu and bottom navigation as this will only serve to confuse the user. Try to add unique navigation
-
Improve on the general flow and organisation of the details
04/
Calories Tracker
-
Make the link from the profile settings more obvious to the calorie tracker. How the profile will affect the number of calories the users have to consume
-
Have a history/current tab that allows users to track their progress from days/weeks/months ago.
02/
Inventory (Refrigerator)
-
Can highlight or make obvious the dates/days of the ingredients that are going to expire to make users more aware of the situation.
05/
Profile Settings
-
Better stratification in the layout of profile settings as they are not usually accessed
-
An indication to users to whether the users can redeem a voucher-based on the points earned by the user
03/
Recipe
-
Indicate how healthy the recipe actually is. Add a healthy mark (SG) to it.
-
Missing bookmark/favourite function on recipe page that can help user revisit the exact recipe
-
Recipes to highlight missing ingredients to users so as inform user
Phase 2 (Heuristic)
Heuristic Checklist
After the first phase of testing, we implemented the changes based on the comments and critique from the other project groups. We also combined our prototype into a combined prototype. This combined prototype is then evaluated by all 4 members using our own heuristic checklist. Below are the results from the checklist and the possible improvements we can implement based on the 10 usability principles
Phase 3 (Usability)
This phase shows the usability testing results of 4 participants with 2 from each potential target user group (Young adults and Sports Enthusiast. We then make the changes based on the comments/results for the final prototype.
Overall the application to potential users:
- High functionality and easy to use
- Slightly lacking in overall aesthetics and some parts of the consistency
- Only require minor changes instead of a major overhaul
Below shows the comments in various categories based on the usability testing
General
-
Confusing back arrow function (Figma Limitation)
-
Slightly inconsistent in naming and features available
Nutrition
-
The unclear header on charts to show what each detail mean
Recipe
-
Clearer feedback message when the user wants to prepare a meal. Can prompt the user that calories count/inventory will be updated with the action
Inventory
-
Missing sorting function at one table
-
Button can be more obvious and at a better location than the bottom of the screen
Profile
-
Navigation to a certain detail is not clear
-
Edit button not obvious
-
Voucher access button can be clearer