25/09/2024 - 16/10/2024 / Week 1 - Week 4
Joey Lok Wai San / 0350857
Application Design II / Bachelor of Design (Hons) in Creative Media
Task 1: Self-Evaluation and Reflection
TABLE OF CONTENTS
LECTURES
INSTRUCTIONS
https://drive.google.com/file/d/159_U4ajXP-Km8y8h6Gh64JjTjVKQ6xEX/preview
TASK 1: Self-Evaluation and Reflection
For Task 1, we are required to perform a self-evaluation and reflection based on our mobile Application Design I final project. This project aims to document the issues, problems, and difficulties and propose solutions to improve the mobile app design aesthetic and user flow.
Mobile App design is an iterative process, and this task will expose students to the constant improvements one can make to their app.
We have to submit a self-reflection blog post on the app design refining process with a clear comparison between the old and new designs.
Eatigo UI/UX Design Analysis
To start the analysis of my Eatigo prototype from Application Design I, I used an AI called Claude.ai. I was going to use ChatGPT but it didn't allow me to upload more than 5 images a day. I used it to get some feedback and ideas on how to improve my app design.
*Note: Not all the AI feedback was included due to misunderstanding of the designs, since they cannot access the full prototype and can only base the feedback on images
1. Onboarding Page
*Note: Not all the AI feedback was included due to misunderstanding of the designs, since they cannot access the full prototype and can only base the feedback on images
Fig. 3.1 Final High-Fidelity Prototype - Eatigo Mobile Application, Week 2 (02/10/2024)
Fig. 3.2 High Fidelity Prototype in Figma File, Week 2 (02/10/2024)
1. Onboarding Page
Upon entering the app, there is a splash screen animation that introduces the users to the app, with Eatigo's name and logo.
The onboarding process is divided into three pages to introduce new users to the app's key features and benefits. They provide a quick overview of what users can expect from the app, such as discovering restaurants, making reservations, and getting personalized recommendations.
The onboarding process is divided into three pages to introduce new users to the app's key features and benefits. They provide a quick overview of what users can expect from the app, such as discovering restaurants, making reservations, and getting personalized recommendations.
Self-Reflection
- A simple layout makes for easy navigation
- The app's logo is displayed along with a simple animation upon entering the app draws the viewers in and makes them engaged
- The brief description of the app's key features on the onboarding pages allows users to know what is expected from the app
- The 'Get Started' and next button has a high contrast to draw the user's eye
AI Evaluation
The Good
The Good
- Simple illustrations that complement the text and make the onboarding visually appealing
- Clear and concise explanations introduce the app’s key features
- Consistent design and colour scheme
- Progress dots indicate the user's position in the onboarding process
- Use of a skip button allows users to bypass onboarding if they prefer.
The Problems
- Too Many Onboarding Screens: Six onboarding screens might overwhelm users. Streamlining or merging some of the content into fewer slides would reduce cognitive load.
- First Screen Not Engaging: The splash screen could be more engaging by incorporating animations, dynamic visuals, or a short tagline that reflects the app. This would create a stronger first impression and build excitement for the user
- Add a brief tagline or welcome message on the splash screen
- Condense onboarding content into 3-4 screens
Argument against AI
I sort of disagree with the feedback given.
I sort of disagree with the feedback given.
- Sufficient Onboarding Screens: The onboarding screens are made on Figma to make a functioning prototype. There aren't 6 separate onboarding screens but in fact only 4 screens.
- Engaging Users with Animation: Adding a catchy tagline on the splash screen would benefit the experience. However, the splash screen already has animation to make it engaging for users. It is just not seen since it is only an image.
Applying Design Principles and Laws
- Von Restorff Effect: Items that stand out visually are more likely to be remembered. The splash screen animation creates a memorable first impression, which helps the app stand out. Adding redundant elements like a tagline could create visual noise and would not necessarily engage the user.
- Aesthetic-Usability Effect: Users tend to believe aesthetically pleasing designs work better, even if the functionality isn’t perfect. Users may not need both a tagline and animation for engagement.
2. Login & Sign Up Page
Once the users go through the onboarding page, it will take users to the login/ signup page. These pages allow users to create new accounts or access existing ones. They provide options for email/password login, social media login, and account creation. There's also a password reset function for users who have forgotten their credentials.
Self-Reflection
- The app's logo is displayed to ensure the user knows what they are logging into
- Has all the necessary and sufficient features needed to login or signup
- The main button to 'Log In', 'Register' and 'Recover Password' has high contrast, drawing the user's attention to the CTA buttons
AI Evaluation
The Good
The Good
- Clean layout with a clear separation between login, reset password, and signup
- Form fields are clearly labelled
- Clear and simple forms with minimal input fields
- Social login options are available to reduce friction for new users
- Consistent color scheme creates a unified experience across screens
The Problems
- Low Contrast CTA Buttons: The "Log In" and "Sign Up" buttons could be more prominent
- No "Show Password" Toggle: On the login page, no "Show Password" option is provided, which might cause usability issues.
- Use a filled button style for the primary actions (Login, Sign Up)
- Add a "show/hide password" toggle
Argument against AI
I disagree with the feedback.
- Sufficient Contrast CTA Buttons: The "Log In" and "Sign Up" buttons have a high contrast to the background and other elements on the page. It is a red button against a white background, and no other element stands out more.
- Existing Show/Hide Password Toggle: There is a show/hide password toggle that already exists next to the password input form.
- Law of Contrast: The Law of Contrast emphasizes creating visual differences between elements to draw attention, improve readability, and establish hierarchy in design. The existing contrast between the buttons and background ensures they remain prominent.
- Jakob’s Law: Users expect interfaces to function similarly to other apps they are familiar with. Meeting user expectations reduces cognitive load. The show/hide toggle aligns with familiar design patterns.
3. Home Page
This page serves as the main landing screen for the app. It allows users to search for restaurants, view popular and new dining options, and see current promotions or deals. It's the starting point for users to explore available dining options.
Self-Reflection
- There is a variety of categories of restaurants for users to choose from but also does not overwhelm them like the initial app design of Eatigo does
- The bottom navigation bar is easy to navigate with easily identifiable icons that match the text
AI Evaluation
The Good
The Good
- Search bar is prominently placed at the top allowing users to start searching immediately.
- Featured promotion is eye-catching and encourages user engagement
- Clear categorization of restaurants (Most Popular, New) - Popular and new restaurant sections help users explore recommendations without effort
- Use of restaurant images to entice users
The Problems
- Placeholder Text: The search placeholder text is cut off
- No Location Available: No visible way to change location or delivery address (not the app's feature/ purpose)
- Adjust the search placeholder text to fit or use a shorter prompt such as 'Search'
- Include a location/address selector at the top of the screen
Argument against AI
I disagree with the feedback.
- Sufficient Space for Placeholder: The text is not cut off since it is the end of the sentence and there is space to tell it is not cut off. Furthermore, just making the placeholder 'Search' as suggested would be unclear for users as to what to search.
- Location/ Delivery Address: The location or delivery address is not part of the app's feature and purpose.
Applying Design Principles and Laws
- Law of Prägnanz (Simplicity): Placeholder text should remain brief but meaningful, and changing it to just "Search" would make it ambiguous.
- Goal-Oriented Design: Since location selection is not part of the app’s functionality, adding it would conflict with the user's main goal of exploring restaurants.
4. Search Page
This page enables users to find specific restaurants or cuisines. It features a search bar and displays popular food categories to help users quickly find what they're looking for. Once the search bar is clicked, users can see 'Recently Viewed' and 'Recommended' restaurants, making the app more personalized.
Self-Reflection
- There are sufficient categories for users to choose from, showing the top categories of users as suggestion to help their search
- The 'Filter' and 'Availability' buttons allow users to easily filter their searches and find restaurants that meet their criteria
- The search provides personalized restaurants with the 'Recently Viewed' and 'Recommended for You'
AI Evaluation
The Good
The Good
- Clean and simple layout
- Search bar is prominently placed at the top. It is easy to find and encourages quick searches
- Visual category tiles make it easy to browse by cuisine
- Top categories displayed with visually appealing images
- Easy to understand and navigate
- Restaurant ratings and images are clearly visible, helping users make decisions
The Problems
- Limited filter options are visible: Filter/availability options are not visually prominent.
- Lack of personalization: No recent searches or trending searches shown
- Lack of visual hierarchy: It’s hard to quickly differentiate between restaurant names, categories, and ratings
- Add a filter icon next to the search bar for quick access to more detailed filtering options
- Adjusting font sizes or using bold text selectively would help.
Argument against AI
I disagree with the feedback.
- Sufficient Filter Options: The filter option screen is not shown in the screenshot. There is no need to add a filter icon to the search bar because clicking on the search bar leads to more options. Furthermore, in the original design, adding a filter icon made the search bar look too crowded and cluttered.
- Personalized Searches: Recent searches and recommendations are clearly shown on the search page so the app is more personalized
- Sufficient Visual Hierarchy: The restaurant name is bolded and in a darker colour compared to the rest of the information such as categories and ratings on the search results cards
Applying Design Principles and Laws
- Hick’s Law: The more choices a user has, the longer it takes to make a decision. This principle advises designers to simplify interfaces. Adding a filter icon would slow down the decision-making process by increasing the number of interactive elements.
- Fitts’s Law: The time required to interact with an element depends on its size and distance from the user’s position. Placing filter options under the search bar reduces the time it takes to access them.
5. Favorites Page
This page shows a list of restaurants that the user has marked as favourites. It allows quick and easy access to preferred dining spots they have saved. Clicking on the restaurant will lead them to the restaurant page immediately, where they can also make a reservation.
Self-Reflection
- A simple user interface design that provides users with quick access to restaurants they have saved
- Clicking on the favourite restaurant leads users to the restaurant page
- This page is not a key feature of the app - it was just designed for fun
AI Evaluation
The Good
The Good
- Clear title "Favourites" at the top
- Each favourite item shows an image, restaurant name, rating, and price range
- Simple and clean layout
The Problems
- No Organize Feature: No visible option to organize or sort favorites
- No Remove Items Feature: No clear way to remove items from favorites
- Add sorting options (e.g., by name, rating, or price)
- Implement a swipe-to-delete function or add a small "remove" icon on each item
- Consider adding categories or tags for better organization of favorites
Argument against AI
I agree with the feedback on this page.
- It is a good idea to add a 'swipe to delete' function or 'remove' icon to give users the ability to delete items.
- It could also benefit to add sorting/ filtering options to make the experience more simple instead of having users search for a restaurant individually.
Applying Design Principles and Laws (Agreement)
- Fitts’s Law: Swipe gestures offer a quick way to delete items, reducing interaction time.
- Tesler’s Law: Adding sorting options shifts complexity to the system, making the app easier for users by reducing the cognitive effort required to locate saved items.
6. Reservation Page
This page displays the user's current and past reservations. It provides an overview of upcoming bookings, allows users to make new reservations and lets them view any upcoming reservations in one place.
Self-Reflection
- The page is based on the original app design
- It has clean navigation and is easy for users to understand
- The page allows users to view their current upcoming reservations and any past reservations they would like to go back to
AI Evaluation
The Good
The Good
- Each reservation shows key information (restaurant name, date, time, number of guests)
- "Book a Restaurant" button is prominently displayed
- The list of reservations is presented clearly, and it’s easy to navigate between upcoming and historical reservations.
- In the empty state, the "Book a Restaurant" button is eye-catching and well-positioned, prompting users to take action quickly.
The Problems
- Lack of Information: Limited information visible for each reservation
- Include relevant information for each reservation
- Implement a pull-to-refresh function for updating the list
Argument against AI
I agree and disagree with the feedback
I agree and disagree with the feedback
- Sufficient Relevant Information: There is sufficient information visible for each reservation, including the reservation code for upcoming reservations.
- Adding a Refresh/ Reload Page: I do agree that the overall design does need a refresh page.
- Miller’s Law: People can remember 7±2 pieces of information at once. Limiting the amount of visible information (e.g., restaurant name, date, time) prevents information overload while keeping the interface concise.
- Fitts’s Law: A pull-to-refresh gesture simplifies interaction, as users don’t need to search for a refresh button.
- Law of Feedback: Users should receive immediate feedback on their actions to confirm that the system is working. Providing reservation codes ensures users receive confirmation for upcoming bookings
7. Reservation Process Page
These screens guide users through the steps of making a restaurant reservation, including selecting the date, time, and number of guests. There is also a pop-up for confirming the booking details.
Self-Reflection
- Simple and easy step-by-step process with instructions on what to do
- The process was compared to competitor's reservation process and user feedback to find the simplest method
AI Evaluation
The Good
The Good
- Step-by-step process with clear headers
- Date and time selection is visual and easy to use
- Reservation details are clearly presented
- The edit option is available
The Problems
- Overcrowded UI: Some elements, like the time selection, feel cramped and could benefit from better spacing.
- Lack of Visual Hierarchy: Important information, like reservation details, could stand out more with better use of font size and weight.
- Simplify the "Confirm Reservation" screen by grouping related information
- Add a progress indicator to show users where they are in the reservation process
Argument against AI
I kind of disagree with the feedback.
- Uncluttered Design: From the user testing and feedback conducted, the screens were not cluttered and can be scrolled down. The items on the 'Confirm Reservation' screen are already grouped.
- Adding a Progress Indicator: I do agree that a progress indicator would benefit the process and would give users a sense of how much progress has been made.
- Law of Proximity: Grouping related elements (like date and time selection) ensures the process is easy to follow,
- Norman’s Feedback Loop: Clear progress feedback gives users confidence in completing each step smoothly and gives them confirmation when a step is completed.
8. Restaurant Page
This page provides detailed information about a specific restaurant, including photos, menu items, promotions, and the option to make a reservation. It serves as a comprehensive overview of the restaurant to help users make informed decisions.
Self-Reflection
- The page was designed based on the original app design as well as the competitor's app design
- The process of creating this page was a long and tiring one so I hope there is nothing to redesign again, especially since lots of analysis was already done to make the optimal layout
AI Evaluation
The Good
The Good
- High-quality food image at the top
- Clear display of restaurant name, rating, and basic info
- Tabbed layout for easy navigation between different types of information
- Prominent "Reserve Now" button
The Problems
- The "Today's Promotions" section could be more prominent
- Make the "Today's Promotions" section more visually distinct, perhaps with a different background colour
Argument against AI
I agree with the statement. Making the 'Today's Promotions' background slightly darker would make it stand out more instead of blending in and improving the visual hierarchy.
Applying Design Principles and Laws (Agreement)
- Law of Visual Hierarchy: A different background colour will draw attention to promotions, ensuring users don’t overlook key information.
9. Ratings & Reviews Page
This page displays ratings and reviews from users for a specific restaurant. It shows an overall rating of the restaurant and allows users to read detailed feedback from others. Users can also sort reviews based on different criteria.
Self-Reflection
- The reviews and ratings page was done as an additional feature that did not need to be created
- It is inspired by Grab's review page and has a clean layout
AI Evaluation
The Good
The Good
- Clear display of overall ratings with a breakdown of star ratings
- User reviews are easy to read with profile pictures and dates
- Sort functionality is available
The Problems
- Unable to Write a Review: No visible way to leave a new review on this page
- Overlay Obstructing: The sort options overlay covers half the screen
- Include a prominent "Write a Review" button
- Redesign the sort options as a smaller dropdown or bottom sheet
Argument against AI
I agree and disagree with the feedback provided.
- Adding a 'Write a Review' button: The button would make sense to add since the feature is missing but it was not an important or necessary page when designing since it was just an additional initiative on my side.
- Overlay Page: I disagree that the dropdown needs to be smaller since it will just overlay the page and users can click back to exit.
- Hick’s Law: A larger dropdown ensures users see all available sort options without additional clicks, which reduces cognitive load.
10. Profile Page
Lastly, the profile page shows the user's personal information, rewards status, and app settings. It serves as a place for managing the user's account, viewing settings, getting support, and viewing policies.
Self-Reflection
- Another page that was not necessary to be created
- It has a simple layout that highlights a key feature, 'Rewards', although not necessary or required either
AI Evaluation
The Good
The Good
- Clean and organized layout
- The user's profile picture and name are prominently displayed
- Clear sections for rewards, profile information, and app settings
- Use of icons to make navigation easier
The Problems
- Improve Visual Aesthetic: The "1 Eatigo Reward(s)" section could be more visually appealing
- Redesign the rewards section to be more visually engaging, perhaps with a progress bar or icons
Argument against AI
I disagree with this statement.
- Reward Section is Visually Appealing: The feature stands out and draws the user's attention which is the most important aspect. The design is also similar to other apps' reward features on the profile page.
The reward section draws enough attention and mimics familiar design elements from other apps.
- Jakob’s Law: By aligning with familiar patterns from competitor apps, users can easily navigate the rewards section without additional learning.
- Law of Prägnanz (Simplicity): Keeping the design minimal ensures the most important feature remains the focal point
Overall Summary of Self-Evaluation and Reflection
Self-Feedback
After reflecting back on my Eatigo app prototype, I genuinely feel very satisfied with the overall design. I spent a lot of time and sleepless nights over it and it is one of my works that I actually like. There are some changes and additions I would make based on the feedback from AI. This could definitely help improve the app design.
After reflecting back on my Eatigo app prototype, I genuinely feel very satisfied with the overall design. I spent a lot of time and sleepless nights over it and it is one of my works that I actually like. There are some changes and additions I would make based on the feedback from AI. This could definitely help improve the app design.
AI Feedback
These pages demonstrate a clean and functional design that aligns well with the rest of the Eatigo app. The Eatigo app demonstrates a good understanding of user needs in a restaurant reservation app. There is a consistent colour scheme and layout across different sections.
The main areas for improvement are providing more at-a-glance information, enhancing user interaction possibilities, and making certain key features (like promotions) more prominent. The app can also provide more user control (sorting, filtering, quick actions) and streamline the reservation process.
The main areas for improvement are providing more at-a-glance information, enhancing user interaction possibilities, and making certain key features (like promotions) more prominent. The app can also provide more user control (sorting, filtering, quick actions) and streamline the reservation process.
Feedback from Lecturer - Competitor Analysis
During the practical session, Mr. Shamsul provided some feedback for me to improve my app design. He mentioned that the redesigned app looks good, clear and professionally done. I could compare it with the feedback from AI as well as compare the design with other competitors from the same category (booking restaurants) - I have already done this in Project 1: Mobile Application Proposal
During the practical session, Mr. Shamsul provided some feedback for me to improve my app design. He mentioned that the redesigned app looks good, clear and professionally done. I could compare it with the feedback from AI as well as compare the design with other competitors from the same category (booking restaurants) - I have already done this in Project 1: Mobile Application Proposal
Click here for the Final Project 1: Mobile Application Proposal presentation slides in Canva!
(Competitor analysis is on Page 16-31)
Fig. 4.2 Final Mobile Application Proposal, Week 2 (05/10/2024)
(Competitor analysis is on Page 16-31)
Fig. 4.2 Final Mobile Application Proposal, Week 2 (05/10/2024)
Refining Prototype
The changes needed to be made based on the analysis are:
*Important Changes on Main Features (others are additional features of the app)
*Important Changes on Main Features (others are additional features of the app)
- Shorter tagline for 'Search' bar *
- Swipe-to-delete or remove icon on 'Favorites' page
- Progress indicator on 'Reservation Process' screens *
- Darker 'Today's Promotions' background on 'Restaurant' page *
- Write a review button on 'Ratings & Reviews' page
- Refresh/ loading page *
Changes on 'Search Bar'
For the search bar on the home page and search page, I made the tagline short so that the text does not look cutoff. I think the placeholder text should remain brief but meaningful. Changing it to just "Search", as suggested by the AI, would make it unclear on what users should search for. The search icon is adjusted to be more center-aligned.
Changes on 'Reservation Process Page'
A progress indicator would benefit the process and would give users a sense of how much progress has been made. Initially, I wanted to make a circle progress indicator, however after creating the design, it could not really fit anywhere on the page. This led me to create a line indicator - the green line indicates the progress made, and the grey indicates how many steps remain.
Changes on 'Restaurant Page'
As suggested by the AI, I made the "Today's Promotions" section stand out more by using a darker background colour for the promotions. The slight adjustment to color makes a huge difference as the promotions are more prominent and do not look like it's blending in with the background.
As suggested by the AI, I made the "Today's Promotions" section stand out more by using a darker background colour for the promotions. The slight adjustment to color makes a huge difference as the promotions are more prominent and do not look like it's blending in with the background.
Creating a 'Refresh/ Loading Page' and 'Confirmation Pop-Up'
I created a loading screen as an additional design feature that was missing from the original prototype. I wanted to keep it simple and just use the brand's main colour, red, and I made two design variations for that. To do this reloading icon, I followed a YouTube tutorial. I also created a confirmation pop-up to appear when the reservation is confirmed.
I created a loading screen as an additional design feature that was missing from the original prototype. I wanted to keep it simple and just use the brand's main colour, red, and I made two design variations for that. To do this reloading icon, I followed a YouTube tutorial. I also created a confirmation pop-up to appear when the reservation is confirmed.
Figma Refined Prototype
Final Task 1: Self-Evaluation and Reflection
Click here for the final presentation slides in Canva!
Fig. 6.2 Final Self-Evaluation and Reflection - Slides, Week 4 (20/10/2024)
Eatigo - Self-Evaluation and Reflection by Joey
Presentation VideoFig. 6.2 Final Self-Evaluation and Reflection - Slides, Week 4 (20/10/2024)
Eatigo - Self-Evaluation and Reflection by Joey
Click here for the final presentation on YouTube!
Fig. 6.3 Final Self-Evaluation and Reflection - Presentation Video, Week 4 (20/10/2024)
FEEDBACK
WEEK 3
There is nothing to change in your app prototype, it is incredible. Just use the feedback from AI to see what you can change here and there, and analyse using the principles and laws.
WEEK 2
The redesigned app from Application Design I looks professionally done. You can compare it with the feedback from AI and compare it with other competitors from the same category (booking restaurants).
The redesigned app from Application Design I looks professionally done. You can compare it with the feedback from AI and compare it with other competitors from the same category (booking restaurants).
Just find the minimum viable product (find availability, book a restaurant)
WEEK 3
There is nothing to change in your app prototype, it is incredible. Just use the feedback from AI to see what you can change here and there, and analyse using the principles and laws.
You do not need to develop the entire application, mainly focus on a minimum of 3 MVP features.
The new design should be included in the Task 1 document and depends on the reflection. The new design doesn't have to be applied to all screens. You can select 1 task flow to add the new design. As what is shown in the example and per requirement. You don’t need to apply the new design to all screens. That would be impossible.
The new design should be included in the Task 1 document and depends on the reflection. The new design doesn't have to be applied to all screens. You can select 1 task flow to add the new design. As what is shown in the example and per requirement. You don’t need to apply the new design to all screens. That would be impossible.
REFLECTION
Experience
I felt quite excited but nervous about this project. It was interesting to break down and analyse every aspect of my previous work and find what I could do better especially getting feedback from AI on what could be improved. However, I was completely taken aback by surprise by this module. I did not think we were going to do coding at all, let alone use JavaScript. I also did not expect to use our design from Application I - to be honest I was done looking at Eatigo the moment the module was completed.
Observations
I observed that gathering feedback from multiple perspectives such as ourselves, the lecturer and AI, it helps to get sufficient analysis for feedback on what areas were good and what could be improved on. I also observed that not everything AI says is accurate, you can only give it so much information and only get back so much. The main thing was that it could not access my whole app, so obviously there would be errors in the feedback.
Findings
Comments
Post a Comment