Application Design II - Task 1: App Design I Self-Evaluation & Reflection
23.09.2024 - 20.10.2024 / Week 1 - Week 4
Lim Rui Ying / 0358986
Application Design II / Bachelor of Design (Hons) in Creative Media
Task 1: App Design I Self-Evaluation & Reflection
INSTRUCTIONS
TASK 1: App Design I Self-Evaluation and Reflection
We are tasked with conducting a self-evaluation and reflection on our
mobile application design I final project to identify issues, problems,
and areas for improvement and propose solutions to enhance the app's
design aesthetics and user flow. Choose a task flow to review, analyse,
and redesign it based on the proposed solutions.
Task requirements:
- Complete analysis of the chosen task flow in the app
- Identify problems and propose solutions
- Presentation video of the analysis and redesigned app screens
NutriFit App Overview
NutriFit is a nutrition and calorie tracking app designed to help users
maintain a healthy diet and reach their fitness goals. It allows users
to log daily meals, track activity, monitor water intake, and purchase
healthy meal plans. When setting up the profile, NutriFit gathers
personal details, diet preferences, and goals to create a tailored daily
calorie intake. The app also provides progress tracking and personalised
insights to keep users on track with their nutrition and fitness
journey.
Fig. 1.0 Application Design I: Hi-Fi App Prototype (NutriFit) -
FIGMA
Reflection
After quickly scanning the app, I chose meal logging. I realised
that the design of my app is underdeveloped, with many limitations in the
meal logging process. This is due to the lack of market research on other
existing nutrition or fitness apps, as well as nutrition knowledge and
calorie algorithms.
In this task, I created a new user flow to align with the project
requirements. Then, I analysed and evaluated the strengths and weaknesses
of the app screens and user flows, along with proposed solutions.
New User Flow
A new user flow was created to streamline the task, focusing solely
on meal logging. The login/sign-up and profile setup
processes, along with the Meal, Progress, and Profile pages, were
excluded.
The app begins with a splash screen, followed by a start screen that
offers options to get started or log in. Tapping either button navigates
users to the home page, which is divided into three sections: Daily
Calorie Overview, Daily Intake, and Daily Activity. The bottom navigation
bar features a Quick Access Button, providing users easy access to log
meals, water intake, and activities and update their weight.
To log a meal, users tap the "Add" button for any meal, which opens the
search page with a search bar and buttons for the barcode scanner and food
recognition, offering several options. After entering the correct serving
size and editing the food details, users log the meal and receive a
confirmation that includes a summary of the calories and the logged meal.
Fig. 2.0 New user flow
App Evaluation
|
| Fig. 2.1 Initial design of Splash Screen and Start Page |
Self-Reflection
- Clean, simple design with a prominent logo and intuitive "Get Started" button
- Consistent use of brand colours strengthens the identity
- Lacks an introduction to the app, which may leave users unclear about its purpose and functionality
AI Evaluation
Strengths
- Clean, on-brand design communicates wellness and nutrition focus
- Whitespace emphasizes logo for a strong first impression
- Background image of a healthy meal reinforces app purpose
- Prominent "Get started" button is inviting
Areas for Improvement
- Adding a visual cue or branding statement (e.g., a tagline) could help define the app's mission
- Improve the readability of the "Sign in" text, potentially by increasing the contrast with the background
- While minimalism is a strength, consider incorporating subtle animations (e.g., fade-in or slide) to enhance engagement
- Agree that a tagline is necessary
- Animations are planned for the next task and will be implemented in the final design
Redesign
- Add a brand-aligned tagline
- Use a brighter orange to enhance the colour contrast and text readability ("Sign in")
- Plan to merge two screens using animations by showing the logo, followed by the tagline
|
| Fig. 3.2 Improvement for Splash Screen and Start Page |
|
| Fig. 3.3 Initial design of Home Page |
Self-Reflection
- Clean layout and clear hierarchy
- Easily accessible "Add" buttons for meal, activity, and water tracking
- The layout might look boring due to the lack of icons, causing users to spend more time reading
- Notification button may be unnecessary
- Missing option to connect with health/fitness apps like Apple Health and Fitbit
AI Evaluation
Strengths
- Clean, minimalist design with a pleasing colour scheme
- Clear presentation of key information (calories, macronutrients)
- Segmented meal categories simplify tracking
Areas for Improvement
- Muted "Add" (+) buttons lack emphasis and could be more inviting
- Low contrast in font size and colours of the numbers in macronutrient bars, reducing readability
- Water intake section lacks prominence which may affect user engagement
- Activity section feels underdeveloped and unengaging
- Disagree with the muted CTAs where the colour contrast is sufficient
- Disagree with the lack of prominence for water intake visibility, where animations will improve it
Redesign
- Add recognisable icons to each content to improve user intuitiveness and reduce the time spent processing information
- Thicken macronutrient bars for better clarity and enlarge data text to improve readability
- Add the days of the week at the top, highlighting today’s date, and include a calendar button for easy navigation
- Include options in Activity section to connect with other health/fitness apps like Apple Health, Garmin Connect, and Fitbit
|
| Fig. 3.4 Improvement for Home Page |
3) Bottom Navigation Bar
|
| Fig. 3.5 Initial design of Bottom Navigation Bar |
Self-Reflection
- Clear tabs with icons and text
- The central "Add" button allows quick logging of daily intake and activity
- The navigation bar looks good but could be more creative in appearance
AI Evaluation
Strengths
- Simple, recognisable icons with appropriate spacing
- The central "Add" button stands out, guiding users to quick actions
Areas for Improvement
- The "Add" button is visible, but a bolder design would enhance its emphasis
- Inactive icons are muted and hard to see, and there's no clear active state for the "Add" button
- A subtle shadow or separator line could better define the navigation bar's boundary
Argument
- Agree that the icons are intuitive, and the "Add" button could be more prominent
- Agree that inactive icons lack visibility and contrast
- Disagree about the active state, where the "Add" button changes to a "Close" button when the quick access menu is opened
- There is a boundary, but it may not be prominent enough
Redesign
- Make the "Add" button bolder and more prominent
- Increase the tone of grey for inactive icons
- Enhance the separator line for better visibility
|
| Fig. 3.6 Improvement for Bottom Navigation Bar |
4) Quick Log Menu
|
| Fig. 3.7 Initial design of Quick Log Menu |
Self-Reflection
- Suitable icons used
- Button colours do not blend well
- Icons are slightly small and less noticeable, with too much background space
AI Evaluation
Strengths
- Streamlined data entry process
- Visually appealing and intuitive icons
- Clear grid layout offers easy navigation for users to select options quickly
- Soft and consistent colours that harmonise with the app theme
Areas for Improvement
- Muted colours reduce visibility, especially in low light or for visually impaired users
- Lack of visual hierarchy causes important actions like "Activity" or "Water" to lack emphasis
Argument
- Agree with the use of intuitive icons and a clear grid layout
- Disagree with color harmony, adjustments are needed
- Disagree on visual hierarchy, as meal logging is prioritised, and meal buttons are more accessible for users
Redesign
- Use engaging flat icons
- Maintain the current layout
|
| Fig. 3.8 Improvement for Quick Log Menu |
Meal logging
The meal logging process involves several screens and the steps are as
follows:
- Food Log Page: Search and select a food item
- Food Item Page: Enter serving and log meal
- Confirmation Message: Successfully logged meal
5) Food Log Page
|
| Fig. 3.9 Initial design of Food List Page |
Self-Reflection
- Display the portion in grams and calories
- Food items from the database may be unnecessary for users
- Lacks alternative meal logging methods like barcode scanning and image recognition technology
AI Evaluation
Strengths
- Easy search and quick access to frequently logged items via "Recents" or "Saved" reduces logging time
- Clear separation of tabs ("Food List," "Recents," and "Saved") improves navigation
Areas for Improvement
- A long food list may overwhelm users
- Swipe actions could simplify adding items
- Lack of icons or thumbnails for food items
- Overuse of beige tones, a secondary colour could enhance the vibrancy
Argument
- Agree that the long food list can overwhelm users
- Swipe actions will be added in the following task, but change its function to delete a food item
- Adding thumbnails for food items may be too cluttered
- Disagree with the overuse of beige tones, where this colour scheme is aligned with the brand
Redesign
- Remove the list of food items to reduce clutter
- Incorporate additional meal logging options, such as barcode scanning and image recognition technology
|
| Fig. 3.10 Improvement for Food Log Page |
6) Food Item Page
|
| Fig. 3.11 Initial design of Food Logging Page |
Self-Reflection
- Clean and intuitive layout
- Limited options for serving units
- Lacks detailed nutritional breakdown of food items
- No meal indication (e.g., breakfast, lunch, dinner, snack)
AI Evaluation
Strengths
- High-quality food image clearly showcasing the dish
- Rich data display with detailed nutritional information (calories, macronutrients) to aid user decisions
Areas for Improvement
- No favourite or save option for frequently logged meals
- Lacks micronutrient information
- Could add cooking methods or ingredients list
- Alternative serving size options could be shown
- Could include a portion size visual guide
Argument
- Agree that additional quantity entry options should be provided
Redesign
- Change to an entire page instead of using a panel
- Add a save button at the top right corner
- Include additional common serving options
- Provide a detailed nutritional breakdown
|
| Fig. 3.12 Improvement for Food Item Page |
7) Confirmation Message
|
| Fig. 3.13 Initial design of Confirmation Message |
Self-Reflection
- Confirmation message provides immediate feedback after logging a meal
- No summary of remaining calories or meals logged
AI Evaluation
Strengths
- Clear, positive feedback with a success message and checkmark
- Displays meal information, confirming the correct item and portion
- Simple, minimal design for easy readability
Areas for Improvement
- The message "Great job!" feels overly enthusiastic; simplifying it to "Meal added!" would provide a cleaner user experience
- Semi-transparent background could be distracting; a more opaque design may improve focus
- Lack of explicit dismissal method; a clear "OK" button could enhance user control
Argument
- Agree that "Meal added" is a more straightforward message
- Agree that an "OK" button is necessary
- A confirmation page is more suitable for meal logging
Redesign
- Change the pop-up confirmation message into a confirmation page for more details and information
- Add an "OK" button to the confirmation page, allowing users to view the summary instead of having the message disappear after a few seconds
|
| Fig. 3.14 Improvement for Confirmation Message |
Revised Wireframes (Before & After)
Fig. 3.15 Revised Wireframes (Before & After)
Final Submission
Figma Prototype (Revised)
NutriFit App Prototype (Revised) - FIGMA
Presentation Slides
Presentation Slides - Task 1: Self-Evaluation & Reflection
Presentation Video
Presentation Video - Task 1: Self-Evaluation & Reflection
FEEDBACK
WEEK 3
- The interface is clean and simple
- Consider adding a feature that calculates calories based on images (e.g., taking a photo of the meal)
- Clarify the target audience for meal purchases: Is it B2B or B2C? (e.g., similar to Foodpanda or GrabFood)
REFLECTION
This task allowed us to self-evaluate and reflect on the application design project which we have done previously, which I think is good to review and identify areas for improvement. The evaluation by AI was helpful in reviewing and analysing the app prototype from different aspects. I faced some challenges with this task because, unlike my classmates who redesigned existing apps, I created a new calorie tracking app from scratch. One significant limitation was that I didn't conduct the competitive analysis in the previous semester, which I believe impacted the design outcomes. While working on this task, I found myself uncertain about the redesign process, and despite spending considerable time on the evaluation and redesign phases, the adjustments I made were relatively minor. Nevertheless, I put forth my best effort to achieve better outcomes. Moving forward, I'm excited about planning both micro and macro interactions and animations for the following task.
Comments
Post a Comment