Application Design II - Task 1: App Design 1 Self Evaluation & Reflection

21.04.2025 - 12.05.2025 / Week 1 - Week 4

Teo Mei Hui / 0358315

Application Design II / Bachelors of Design (Honors) in Creative Media / Taylor's University

Task 1: App Design 1 Self Evaluation & Reflection

---

CONTENTS

1. Instructions
2. Task
3. Feedback
4. Reflections

---

INSTRUCTIONS

---

CLASS EXERCISE

Week 2 - Boarding Pass Redesign

We had to work in group redesign a boarding pass and make the information easier to understand.

Figure 1,1 Boarding Pass Redesign

Week 3

We worked in groups to create a wireflow. Our topic was an app to book a meeting room in the library.

Figure 1.2 Wireflow of booking meeting room in library

---

TASK

As a continuation of what we learned in Application Design 1, the Application Design 2 module required us to complete a self-evaluation and reflection based on our final project. The goal was to identify any issues, challenges, or difficulties we encountered during the design process and suggest solutions to enhance the app’s aesthetics and user flow. This exercise highlights the iterative nature of mobile app design and emphasizes the importance of continuous improvement. We were asked to submit our documentation through Google Docs to allow for feedback and comments from the module coordinator.

Self-Evaluation

Moovit Redesign Prototpye from Application Design 1

As I evaluate my app design, I recognize both its potential and the areas that require significant refinement. This process has helped me become more aware of how crucial foundational principles like visual hierarchy, contrast, spacing, and consistency are in creating a polished and usable interface.

Color Theme & Contrast

One of the most prominent issues is the lack of contrast in my chosen color theme. The palette includes too many colors, many of which are similarly toned or too dark. As a result, elements tend to blend together, making it difficult to distinguish between primary actions, secondary information, and background elements. This not only affects visual clarity but also accessibility, especially for users with low vision or color sensitivity. Moving forward, I need to simplify the palette by using a strong primary color, 1–2 secondary colors, and clear neutrals to establish visual focus.

Hierarchy & Visual Structure

Currently, the interface feels flat due to the lack of depth, emphasis, and differentiation between key content blocks. There isn’t enough visual hierarchy to guide the user’s attention through the interface, especially in areas like journey planning results, the community feed, or route directions. Text sizes and weights are too similar across different sections, which weakens the clarity of headings, labels, and actionable content.

I need to work on creating a more distinct visual hierarchy by:

• Using consistent and limited font sizes
• Differentiating font weights intentionally
• Applying elevation or background variation to group or separate content

Spacing & Padding

Another major concern is tight or cramped elements—some UI components feel squished together, lacking the breathing room needed for readability and touch interaction. This negatively affects both aesthetics and usability.

Navigation & Flow

The app is functionally complete, with solid ideas like journey planning, live directions, a calendar, and even a community feature. However, due to the lack of visual contrast and insufficient hierarchy, the user flow feels harder to follow than it should. Important information like route times, post creators, or navigation tabs doesn’t stand out enough, which could slow down decision-making or discourage interaction.

Feedback by AI & Refinement Process

Landing Page

Feedback by AI

Strengths:

• Simple layout, clear search bar and calendar section
• Good use of space for suggested stations

Improvements:

1. Visual hierarchy: “Depart to: Location A” can be easily missed. Consider increasing size or contrast.
2. Color balance: The orange search bar and calendar section feel visually heavy together. Try reducing the saturation or adding a white background to one of them.
3. Clarity: "Go Home" and "Work" are a nice feature but could benefit from icon + label spacing or visual separation.

Argument

I agree with the suggestions.

Refinement

I refined the color balance by toning down on the heavy orange color and introducing a new color which is teal, as well as making the background a lighter color to improve contrast. Visual hierarchy was also refined as I adjusted the font size and weight. Next, I introduced more consistent spacing and padding to prevent overcrowding of components like the calendar, station suggestions, and quick access buttons. Furthermore, I switched the position of the calendar and suggestions card as I feel like planned trips should be more important. I also added shadow behind the elements to add depth to the design. These adjustments help users better distinguish between sections and understand the layout more intuitively.

Figure 2.1 Landing Page Refinement

Journey Planning 

Feedback by AI

Strengths:

• Intuitive layout with clearly differentiated route cards
• Nice use of icons for transport types

Improvements:

1. Spacing: Padding between "Best Route" and the toggle could be increased for visual breathing room.
2. Button clarity: The round buttons on the right are slightly ambiguous in function. Add tooltips or labels if possible.
3. "Depart: Now" button is a bit buried — make it a more prominent CTA.

Argument

I agree with the need for more spacing in the button.  However, I think the icons I used for the round buttons are pretty self-explanatory, and adding labels would just make the interface very cluttered. Moving on, while I agree with the "Depart: Now" button being easily overlooked, it is not a CTA button, but I will still adjust it accordingly.

Refinement

First I adjusted the colors of the buttons by to create visual grouping. I use teal for the filter buttons while other buttons remain orange so that users can differentiate them easily. I adjusted the size of the "Depart: Now" button so that it will be more prominent. I also increased the padding in the buttons for more visual breathing room. As for the transit information of the route suggestion cards, I changed it to border instead of grey background to improve the readability. The label of the price was also made clearer by toning down the color. Lastly, I added shadow to the location bar and route suggestion cards. 

Figure 2.2 Journey Planning Page Refinement

Directions Preview

Feedback by AI

Strengths:

• Timeline format is excellent; information is digestible
• Color-coded route sections aid in cognitive chunking

Improvements:

1. Map + card balance: The orange action button partially overlaps map content. Reposition or shrink slightly.
2. Time indicators: Align them clearly (e.g., 12.45pm) and use consistent formatting.

Argument

I agree with that the orange back button might overlap with the map. However, as for the time indicators, they are already aligned.

Refinement

First, I adjusted the colors based on the new color theme. Then, i adjusted the instructions for walking by adding it into a card, the readability is much more improved and users wont be confused easily. I also added border to the pictures of the station. Shadows were added to the background panel to stand out from the map and also to the cards so that the interface doesn't look flat. This enhances the readability of step-by-step instructions and reduces visual clutter.

Figure 2.3 Directions Preview Refinement

Live Directions

Feedback by AI

Strengths:

• Clean map-centric view
• Clear current location indicator

Improvements: 

1. Bottom card readability: The orange banner could use a drop shadow or divider to stand out against map background.
2. Button priority: Blue buttons for “Stop” and “Live Location” may compete visually. Use hierarchy (primary vs secondary styling).

Argument

I agree that the card readability needs to be improved. However, "Stop" and "Live Location" are already using different styling and the "Stop" button is much more prominent so they won't visually compete.

Refinement

I added shadow to the overlay card and bottom action bar for it to stand out more clearly from the map, giving it better visual weight and clearer interaction zones. The top part of the card is changed to orange and the body is changed to white, this increases contrast and ensure higher readability. Border is added to the minimized picture.

Figure 2.4 Live Directions Refinement

Discover - Recent

Feedback by AI

Strengths:

• Very functional and to-the-point
• Nice iconography and map preview

Improvements:

1. List hierarchy: Place station name and location on separate lines to increase scannability.
2. Map repetition: The same map pattern across "Recents", "Stations", "Lines" could feel redundant. Consider reducing height or using a lighter version for differentiation.

Argument

For the list hierarchy,  the station name and location are already placed on separate lines. As for the map repetition, it is not a priority since it's just a prototype.

Refinement

I changed the color based on the new color theme, added shadow to the search bar, tab and results, as well as increased the spacing between search bar and the tabs.

Figure 2.5 Discover - Recent Page Refinement

Discover - Stations

Feedback by AI

Strengths:

• Good toggle interface (Recent / Stations / Lines)
• "Nearby" and "Favourites" are clear and useful

Improvements:

1. Consistency: The MRT Surian card is colored differently — ensure consistent styling unless the difference is meaningful (e.g., currently active).
2. Grouping: Use cards or dividers to visually group station types.

Argument

I agree that I have to ensure consistent styling for the stations. However, as for grouping the station types, they can be differentiated using their icon.

Refinement

I changed the color based on the new color theme, added shadow to the search bar, tab and cards, as well as increased the spacing between search bar and the tabs. The padding in the filter button is also increased to improve visual breathing space. I changed the color of the station cards to white, as the original color was a little confusing and visually heavy.

Figure 2.6 Discover - Stations Page Refinement

Discover - Lines

Feedback by AI

Strengths:

• Smart filtering with line types (MRT, LRT, etc.)
• Clear listing of stations

Improvements:

1. Redundancy risk: Current view feels like an extended version of the "Stations" tab. Consider ways to merge or reduce repetition.
2. Hierarchy: Bold the line name and place station names in a sub-section for easier scanning.

Argument

The highlighted state of the active tab would ensure user is aware of the difference between two tabs. Furthermore, the format of the cards are not the same, merging it would also confuse the users easily. However, I do agree that hierarchy of the texts need to be improved.

Refinement

I changed the color based on the new color theme, added shadow to the search bar, tab and cards, as well as increased the spacing between search bar and the tabs. The padding in the filter button is also increased to improve visual breathing space. The font size of the labels for each category was increased to ensure readability and clearer separation between categories.

Figure 2.7 Discover - Lines Page Refinement

Stations - Arrival Times

Refinement

I changed the background color to white so that the contrast and readability can be improved. I feel it was a necessary change as the orange background was too visually heavy, it did not feel clean and professional enough as there was not enough wh. I also added shadow so that it will not blend with the map.

Figure 2.8 Stations - Arrival Times Page Refinement

Live Direction - Stations

Refinement

I changed the elements based on the new color theme and added more spacing between the line name and the vertical layout. This ensures a cleaner design that helps users more easily track station progress and understand their route at a glance. Furthermore, I changed the background color to white so that the white space and readability can be improved. I also added shadow to it so that it will not blend with the map.

Figure 2.9 Live Directions - Stations Page Refinement

Community Page

Feedback by AI

Strengths:

• Social feed layout is familiar and engaging
• Icons for comments, shares, likes are intuitive

Improvements:

1. Feed separation: Add subtle card shadows or dividers between posts for visual separation.
2. Top nav: “Feed / News / Alerts” tabs should show the current active tab more boldly (color or underline).
3. Search bar: feels a bit cramped — add vertical padding.

Argument

I agree with all the suggestions. As for the top navigation/tabs bar, I feel like the active tab is already quite bold, however I will try to increase it. 

Refinement

I added vertical padding for the search bar and tab bar so the interface feels less cramped together. I added shadow for the active tabs as well as the cards. Colors were adjusted according the new color theme and shadows were added to the search bar, active tab and post cards. 

Figure 2.10 Community Page Refinement

Profile Page

Feedback by AI

Strengths:

• Clear structure, well-separated sections
• Points system stands out nicely

Improvements:

1. Contrast/accessibility: White text on orange might fail contrast ratio on smaller devices. Darker shade or outlined text could help.
2. Button affordance: Right arrows (chevrons) on menu items are small; slightly increase touch area.

Argument

The font size on the orange card is big, so accessibility is not as affected. For the menu items, the entire bar is the clickable and works as a button, not just the right arrows.

Refinement

Changed the colors based on the new color theme, then added shadow to the cards to add depth and help to distinguish the sections.

Figure 2.10 Profile Page Refinement

Calendar

Feedback by AI

Strengths:

• Elegant and minimal
• Good use of orange to highlight selected days/events

Improvements:

1. Day font size is quite small — ensure it's readable for older users or those with vision impairments.
2. Visual clarity: Consider adding event list below calendar for additional usability.

Argument

The current day font size is 14pt, which is considered readable for a mobile phone app. The adding event list below calendar can be considered.

Refinement

I changed the color theme and added shadow to the cards. I also added "Add event" button in the middle so that users can directly add future route plans through calendar. I also adjusted the padding in the event card to increase readability.

Figure 2.11 Calendar Page Refinement

Presentation Video & Slides

Moovit App Redesign - Self Evaluation & Reflection

---

FEEDBACK

Week 1

Need to add more contrast, all the elements seem to blend together. I understand that you want that unity in all your elements and the color theme, but when the elements are too similar then users cannot differentiate the features.

---

REFLECTIONS

Completing this task allowed me to deeply evaluate and improve my design decisions. Initially, the app felt visually cluttered due to a lack of hierarchy, low contrast, and inconsistent spacing. Through refining each screen, I learned the importance of simplifying color usage, creating clear visual structure, and giving elements enough breathing room to enhance clarity and usability.

This process helped me better understand how small adjustments—like consistent padding, font sizing, and contrast—can greatly improve user experience. I now feel more confident in identifying UI/UX issues and iterating effectively based on design principles. Overall, this was a valuable learning experience that strengthened both my visual design and critical thinking skills.