Labels

App Design II - Task 1 / App Design 1 Self-Evaluation & Reflection


25.9.2024 - 20.10.2024 (Week 1 - Week 4)
Chong Hui Yi / 0363195
App Design II / BDCM
Task 1 / App Design 1 Self-Evaluation & Reflection

TABLE OF CONTENT

1. Lectures
2. Instructions
3. Task 1
4. Feedback
5. Reflection

LECTURES


Click HERE to view lectures & exercises

INSTRUCTIONS




Task 1: App Design 1 Self-Evaluation & Reflection


Requirement


"Students are required to perform a self-evaluation and reflection based on their 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 to students the constant improvements one can make to their app. Students are required to submit the documentation in Google Docs for ease of commenting and feedback by the module coordinator."

Before Design

I chose to redesign the MBO Cinemas app for my Application Design I module. The redesigned app allowed users to view promotions, look up basic movie information, purchase movie tickets, and order food & drink. It also provided an E-ticket feature, enabling users to skip queues at the cinema. As shown in Fig. 1.0 and Fig. 1.2, these are my previous Figma files.

Fig. 1.0 High Fidelity Prototype in Figma
(Click HERE for the Figma file link)

Fig. 1.2 High Fidelity Prototype (Mobile Version) in Figma
(Click HERE for the Figma file link)

In week 2, Mr. Shamsul provided some feedback on my app:
  • The typeface is clean and professional.
  • The QR code resembles a scan icon instead of a E-ticket.
  • Consider offering different methods for sending the forgot password code, in addition to email.
  • Some apps allow users to store credit card information for direct purchases within the app.
  • In Figma, if the text buttons are too small, you can switch to auto layout, allowing for adjustments in size and background colour.

Aside from my own evaluation on the app, I used Claude.ai to get feedback, but it is important to note that the AI may not always provide accurate information, so I need to make my own judgments.

My self-evaluation and reflection include the following sections:
  • Onboarding Page
  • Login, Register & Forgot Password Page
  • Home Page
  • Other Page
  • Movie Detail Page
  • Booking Ticket Page

1. Onboarding Page



Fig. 1.3 Onboarding Page

Self-Reflection

  • The dots at the bottom show users where they are in the onboarding process.
  • On the last onboarding page, there's no need to "Skip" anymore.
  • Information is well-organized and easy to read.

AI evaluation

What's good
  • Visually Appealing: The illustrations are engaging and add a welcoming feel, making the app more inviting.
  • Consistent design: The teal color scheme and illustration style are uniform across all screens.
  • Concise Descriptions: The short text for each feature (e.g., “Explore Movies”, “Book Tickets”) clearly explains the app's key functions.
  • Next/Skip Options: Offering both “Next” and “Skip” buttons allows users to control how much they want to learn before starting.
Improvements
  • Engagement Tip: Consider adding a call-to-action on the final screen, like “Let’s Get Started!” to make it feel more engaging before users press “Start.”

Redesign 

I replaced the two separate buttons: 'Skip' and 'Start', with a single full-width button, 'Start!', making it more visually prominent and clearly indicating that the onboarding has finished.

Fig. 1.4 Onboarding page design changes

2. Login, Register & Forgot Password Page


Fig. 2.0 Login & Register Page

Fig. 2.1 Forgot Password Page

Self-Reflection

  • The pages have consistency.
  • Different icons can be used for "registration successful" and "password changed" to convey different messages and emotions.

AI evaluation

What's good
  • Simple Layout: The login and registration forms are clean and easy to follow, with clear fields for input.
  • Social Login Options: Including quick login with social media platforms (Facebook, Google, Apple) can speed up the process for users.
  • Helpful Feedback: Screens like “Registration Successful!” and “Password Changed!” provide clear success messages, ensuring users know their actions were completed.
Improvements
  • Password Instructions: On the “Create new password” screen, providing a brief tip (e.g., “Use at least 8 characters”) could help users set a strong password.

Argument 

Providing a brief tip for the password could be displayed only when users input a non-compliant password, rather than showing the tip on the initial page, which helps to keep the interface clean.

Redesign

I changed the icon for "password changed" from a checkmark to a padlock, making it easier for users to understand the meaning at a glance.

Fig. 2.2 Change the icon

3. Home Page


Fig. 3.0 Home Page (the right image shows promotions when scrolling down)

Self-Reflection

  • The homepage features a clean layout.
  • Users can click "BOOK NOW" directly on the homepage to buy movie tickets.
  • Users can navigate to the movie listing page by selecting "View All Movies" or clicking the bottom navigation movie icon. 
  • The text "Animation | 1h 37m" below "INSIDE OUT 2" is too thin and difficult to read.
  • The position of the "Book Now" button is odd and not properly aligned.

Lecturers & Friends Feedback

  • The QR code icon in the bottom navigation look like scanning a QR code page rather than viewing the e-ticket.

AI evaluation

What's good
  • Clear layout: The homepage is easy to navigate, with recommended movies and promotions clearly displayed.
  • Strong visuals: The large movie banner (e.g., "Inside Out 2") grabs attention, and the "BOOK NOW" button is prominent.
  • Easy navigation: The bottom menu is simple with clear icons and labels for Movies, Cinemas, Food & Drinks, and Profile.
  • Organized sections: Movie recommendations and promotions are neatly arranged for easy scrolling.
Improvements
  • Bottom menu highlighting: The icons in the bottom menu could be enhanced with color or a highlight to show the current page.

Redesign

I increased the font size of "INSIDE OUT 2" for a stronger contrast and also bolded "Animation | 1h 37m." The AI's suggestion for bottom menu highlighting reminded me that I could change the icon for the current page to a teal colour (brand colour). Besides that, I replaced the QR code icon with a ticket-shaped icon and added a label to make it clearer for users.

Fig. 3.1 Home page redesign

4. Other Page

Fig. 4.0 Other Pages

Self-Reflection

  • The movie listing page (first image) has a filter for users to select options, but the design of the expanded filter is not aesthetically pleasing (Fig. 4.1 left image).
  • The cards on the cinemas listing page (second image) are a bit small.
  • The homepage icon is located in the top left corner instead of the bottom navigation bar, which may confuse users since there's not enough space in the bottom navigation bar.

AI evaluation

What's good
  • Clear layout: Movie listings, cinemas, and food sections are well-organized with useful filters.
  • Consistency: The bottom navigation is simple and consistent, making it easy to switch between sections.
  • Visuals: Movie posters and food images are attractive and easy to read.
Improvements
  • Spacing: Add more space between movie cards, cinema listings, and food items to reduce crowding.
  • Homepage access: Make the top-left home icon more prominent since it’s the only way back to the homepage.
  • Ticket Options: Add a "Share" or "Add to Calendar" button for E-ticket to make it easier for users to plan and share their movie trips.

Argument 
I agree with the AI's suggestion to add more space in the cinema listings (second image), but I believe the spacing between the movie cards (first image) and food items (fourth image) is already sufficient.

Redesign

The previous filter menu didn't darken the covered page enough, so I changed it from 10% black to 40% black. The filled grey option boxes in the filter menu looked too dull, so I switched to outlined boxes and changed the close button to outline, making the page look cleaner.

Fig. 4.1 Redesign the filter menu

The results displayed after applying the filter should show the selected tag "English," along with a close button to remove this option.

Fig. 4.2 Redesign filtered results displayed

For a mobile size, the previous cinema listing page cards were a bit too small and dense, so I made the cards larger.

Fig. 4.3 Redesign the cinemas listing page

I placed a share button in the top right corner of the e-ticket, allowing users to share their tickets with others (even though it doesn’t really work).

Fig. 4.4 Added share button

I replaced "Yes" and "No" in the logout confirmation pop-up with "Log Out" and "Cancel" for more direct communication, and removed the icon, using title text instead.

Fig. 4.5 Redesign log out confirmation pop-up

5. Movie Detail Page


Fig. 5.0 Movie Detail Page

Fig. 5.1 Rating pop-up

Self-Reflection

  • The layout in the information tab (second image) is a bit cluttered, and there are many blank spaces.
  • The movie detail page clearly divides the content into showtimes, information, and reviews, placing the most important showtimes on the far left as the first section.
  • Users can click "Rate Now" in the reviews section to give a rating, but the design of the rating pop-up is not visually appealing, and there is no option to write a review.
  • There is no confirmation feedback after submitting the rating.

AI evaluation

What's good
  • Clean Design: The layout is neat, making it easy to read and navigate.
  • Tab Organization: Using tabs for Showtimes, Information, and Reviews is effective for keeping the content organized.
  • Clear Showtimes: The showtimes are well-organized and easy to find.
  • Visual Appeal: The movie poster and play button are engaging and intuitive.
  • User Reviews: Including reviews adds helpful social proof for users.
Improvements
  • Tab Highlighting: Make the active tab more visually distinct.
  • Information Spacing: Add more space between text in the Information tab for better readability.

Argument 

I believe the AI's suggestion for tab highlighting is not reasonable, as I have already underlined the text of the current tab.

Redesign

I added a poster image on the left side and increased the content's leading, enhancing visual balance while maintaining a compact layout.

Fig. 5.2 Redesign information tab

The original pop-up rating has been changed to a slide-up design, allowing users to write an optional review. Additionally, confirmation has been added after submitting the rating.

Fig. 5.3 Redesign rating & review page

6. Ticket Booking Page


Fig. 6.0 Ticket Booking Page

Self-Reflection

  • The entire booking process is designed to be simple and easy to understand, making it user-friendly for everyone.
  • Each page features a clean and organized layout
  • The consistent design across all pages helps create a seamless experience.
  • A progress bar is displayed at the top of the screen, allowing users to see how many steps are left before they complete their booking.
  • The grey seats on the seat selection page (second image) can cause visual fatigue.

AI evaluation

What's good
  • Clear Steps Navigation: The numbered steps at the top (1-4) make the booking process easy to follow, guiding users through each stage.
  • Ticket Selection Layout: The ticket selection screen is straightforward, with clear options and prices, making it user-friendly.
  • Seat Selection: The seat layout is clean and easy to understand, with clear labels for available and unavailable seats.
  • Food & Drink Options: The food and drink screen is visually appealing with product images, which can help users make decisions quickly.
  • Summary in Checkout: The final checkout screen offers a concise summary of the selections, making it easy to review before payment.
Improvements
  • Zoomable Seat Map: Allow users to zoom in on the seat selection for better clarity.

Argument 

The AI's suggestion of a zoomable seat map is a great idea, but I'm unsure if it can be achieved during the coding phase.

Redesign

I changed the grey to a light teal on the seat selection page, creating a unified colour scheme that makes the overall look more comfortable.

Fig. 6.1 Redesign the seat selection page

Final Design

Fig. 7.0 High Fidelity Prototype in Figma
(Click HERE for the Figma file link)

Fig. 7.1 High Fidelity Prototype (Mobile Version) in Figma
(Click HERE for the Figma file link)

Presentation Video


Fig. 8.0 Presentation Slide
Presentation Video Link: https://youtu.be/oj35TfJ-N0w

Fig. 8.1 Presentation Video


FEEDBACK


WEEK 2:

  • The typeface is clean and professional.
  • The QR code resembles a scan icon instead of a E-ticket.
  • Consider offering different methods for sending the forgot password code, in addition to email.
  • Some apps allow users to store credit card information for direct purchases within the app.
  • In Figma, if the text buttons are too small, you can switch to auto layout, allowing for adjustments in size and background colour.


REFLECTION


Before I began evaluating and reflecting on my app, I was quite satisfied with it. But after taking a closer look, I realised there were many areas I could improve. It’s funny how seeing your design at different times can change your perspective. What felt perfect one day might seem a bit off the next. That’s why I think it’s so important to keep reflecting on my designs.

I also learned that AI isn't perfect. It often gives me wrong information or repeats itself, which can be really frustrating. I have to filter through its feedback, and sometimes I end up ignoring all its suggestions, which doesn't help much. Besides using AI, I asked Mr. Shamsul and a few friends for their opinions. I think feedback from real users is super valuable because they know what makes an app user-friendly.
Labels:

Comments

Post a Comment

Popular Posts