Application Design II · Task 1 · Self-Evaluation and Reflection

21 April 2025 - / Week 1 - Week 7

YANG ZHI CHING / 0365154

Application Design II / Bachelor of Design (Hons) in Creative Media

Task 1 · App Design 1 Self-Evaluation and Reflection

---

INSTRUCTION

Doc 1.1 MIB

---

Task 1 · Self-Evaluation and Reflection

1. Reflection

In the first week of Application Design II, we were tasked with revisiting our project from Application Design I. For this reflection, I took my previous redesign of Moovit—a public transport navigation app—and conducted a comprehensive self-evaluation to identify both the strengths and weaknesses of the design.

The goal was to apply feedback (especially from the GPT AI assistant) and demonstrate iterative improvement through a user-centered approach. Below, I document the key updates and reflections across various sections of the app.

1. Previous Blogger: Application I - Final Task Link

2. Figma Link: https://www.figma.com/proto/eFxDPRQzameJlHibY9aBNu/High-Fi?node-id=0-1&t=hFkmNTxEs16GUwE5-1

3. Youtube Link: https://youtu.be/9nh3SbTJ0_c

Vid 1.2 Previous Task Walk Through Video

2. Redesign

I got a lot of feedback from the course AI assistant, which I have listed in the document below:

Doc Link: https://docs.google.com/document/d/1l_PJhqQCXT0ANzC1vha3hHu2msYo-WDW2HhjZ_Uk3B4/edit?usp=sharing

I started to make changes section by section, first I looked at the login page and the authentication page and pointed out the improvements and deficiencies:

Landing & Authentication |

Fig 2.1 Original Landing & Login Page

Strengths:

• Friendly mascot and brand voice create a welcoming tone (emotional design).
• Simple sign-up and log-in forms with strong contrast CTAs.
• Clear step-by-step onboarding supports progressive disclosure.

Improvements:

• Add form validation feedback (e.g., password strength).
• Improve CTA placement (“Let’s Go” could be higher for thumb reach).  I have adjusted the size and position of the button.
• Clarify social login icons with labels. I had included the social login icons but the size seemed too small so I increased the icon size.
• Use orange #F57C00 for CTA

Fig 2.2 Adjusted Landing & Login Page

 

Fig 2.3 Adjusted CTA-button size and position

 

 Fig 2.4 Before & After adjusting the button and background colors

Home Page & Search Flow|

 Fig 2.5 Original Home Page & Search Flow

Strengths:

• Good use of map background to anchor user context.
• Progressive search flow: Search → Favorites → Destination → Route.
• Route cards present essential info clearly (cost, duration, walking time).

Improvements:

• Improve visual hierarchy for “Tap to Set” buttons (label them Start / Destination). I’ve changed the text to “Set your homepage” and “Set your favorites” to ensure users can easily understand what the feature is.
• Add animations/micro-interactions during search for responsiveness.

 

 Fig 2.6 Before & After of changing button color to accent color

 Fig 2.7 Adding accent color

 Fig 2.8 After changing background theme color according to color suggestion, and added the "loading" animation

Navigation & Live Route|

 Fig 2.9 Original Navigation Pages

Strengths:

• Step-by-step route guidance, including interchanges and stops.
• Alerts for disruptions (bus delay, route changes) are highly visible.
• Civic reporting feature with icons (bus delay, cleanliness, etc.) adds engagement.

Improvements:

• Show live user location (You Are Here). I have add a dialogue in the map to show "You are Here"
• Add suggested alternate routes when disruptions occur. This would be important for a real application, but not so important in a demo application since it has the same flow as the main process, so nothing extra needs to be done.
• Use map animation to show progress (highlight completed path). The real GPS will show the user real-time progress and the step-by-step route page changes will have the same functionality to show the user real-time progress.

 

 Fig 2.10 Adding user current position "You are here!"

User Profile |

 Fig 2.11 Original User Profile Flow

Strengths:

• Friendly character-driven design (Moovit) encourages emotional connection.
• Badge system and point feedback support positive reinforcement.
• Panic Button stands out for user safety—a strong inclusion.

Improvements:

• Add clear section headers for settings screens (Pages 5–7). I added subtitles and icons to each section to clarify the functionality and make it easy for users to understand and find the feature.
• Provide progress indicators for badges (how close to unlocking). I have included the progress bar in My Badge, but it seems to be obscured by the navigation bar and the AI ​​assistant doesn't notice it.

 

 Fig 2.12 Before & After adjusted the subtitle for each section

 

 Fig 2.13 Changing the status color with accent color

Notification & Information |

 

 Fig 2.14 Original Notification Page 

 Fig 2.15 Original Offline Map Page

Strengths:

• Clearly categorized transit lines (Train, MRT, Monorail, Bus).
• Includes downloadable offline maps (Klang Valley) for low-connectivity support.
• Simple and readable notification layout.

Improvements:

• Add read/unread states and timestamps for notifications.
• Allow preview/download status for maps (✓ Downloaded, ⬇ Available). Included, but I have changed the completion status to green to emphasize the difference
• Add back navigation or breadcrumbs for deeper pages.

 

 Fig 2.15 Compare after emphasize the "Read & Unread" status with red dots and bold text

  

 Fig 2.16 Adding Green Color for "Downloaded" Status

Summary |

Summary Table of Improvement and changes:

Section	Main Features	Strengths	Improvements	UX Principles Applied
Landing & Auth	Onboarding, Log-in/Sign-up	Clear CTA, emotional branding, progressive steps	Validation feedback, better CTA placement, icon clarity	Hick’s Law, Affordance, Emotional Design
Home Page Flow	Map, Search, Favorites	Logical flow, map context, good info structure	Clarified labels, added interaction feedback, empty states	Jakob’s Law, Progressive Disclosure, Visual Hierarchy
Navigation Flow	Route steps, alerts, reporting	Detailed routes, civic reporting, service updates	“You Are Here” marker, route progress animation	Visibility of System Status, Feedback, Fitts’ Law
Reporting Feature	Submit issue, reward points	Simple interface, confirmation feedback	Add comment/photo option, view past reports	Recognition over Recall, Feedback, User Motivation
Profile & Rewards	Badges, panic button, customization	Gamified motivation, safety-focused design	Improved badge tracking visibility, structured settings	Minimalist Design, Safety-first UX, Status Visibility
Notifications Panel	Alerts, rewards, updates	Clear layout, organized, concise	Add read/unread state, filters, timestamps	Feedback, Cognitive Load Reduction, Visibility of Status
Transit Info Pages	Line browsing, map downloads	Categorized layout, offline support	Add thumbnails, download status, breadcrumbs	Chunking, Recognition over Recall, Accessibility in Navigation

Color Strategy Recap:

Primary Color (Orange #F57C00)

• Strong brand identity and action highlight.
• Avoid as full-screen backgrounds (e.g., notification page).
• Use only for CTAs, icons, highlights.

Accent Colors

• Added Teal (#4DB6AC) for balance.
• Used for icons, map elements, labels, and non-CTA interactions.

Bottom Navigation

• Originally too heavy (solid black)
• Now lighter background with highlighted active icon

In a nutshell, the main issue with my previous design was that the overall color theme felt too dark and heavy, with too much black and low-contrast tones. To improve this, I updated the background—especially on the home page—and adjusted the navigation colors. I also refined some micro-interaction elements to make the interface feel lighter and more engaging.

 Fig 2.17 Original Home Page

 Fig 2.17 Home Page After Adjustment

Figma View & Prototype:

Presentation Video |

Youtube Link : https://youtu.be/Jfs4b54zsLg

---

Reflection |

This task gave me a good chance to look back at my Moovit redesign and think about what could be better. At first, I focused more on layout and visual clarity, but after going through the feedback, I realized that even small things—like button size, label wording, or password feedback—can make a big difference to the user experience. So I adjusted the CTA placement, resized the social login icons, and added simple validation feedback to improve the sign-up flow.

For the home and navigation sections, I changed the unclear text like “Tap to Set” into clearer labels, and added a “You Are Here” marker to make the route more intuitive. I also grouped the profile settings more clearly using section titles and icons, and made sure the badge progress bar was more visible. These updates made the interface feel more structured and easier to use.

In terms of colors, I kept orange as the main action color, but added teal as accents to balance the overall look, i like this color suggested by AI assistant, it make my color more "breathable".