Application Design 2 / Task 1
.png)
Bachelor of Design (Honours) in Creative Media
Application Design - DST 61004
Application Design 2 - Task 1
Overview
> Module Information Booklet
> Class Activities
> Task Instruction
- Self-Evaluation
- Refining process
- Final Refined Prototype
- Presentation Slides
- Presentation Video
> Reflection
Module Information Booklet
Class Activities
Activity 1: Boarding Pass
Mr Razif assigned us to work in groups and redesign the AirAsia
boarding pass, using the knowledge and principles of the
infographic.
However, sir said that we focused too much on designing the boarding pass and advised us to pay more attention to the information hierarchy delivered (as this is the main requirement). The main information should be the flight number, gate and seat, and the gate closing time, instead of the departure and arrival locations...
So, we redesigned the version 2.0:
Also working in groups, we practically learned how to create a wireflow chart for a booking app. For my group, we chose to work with Starlux flight booking app. Although we had previously learned how to create a user flowchart, the concept of a wireflow chart was new to us. However, after some exploration, we quickly got the hang of it.
After presenting our chart to Mr. Razif, he advised us to pay closer attention to the accuracy of the flow connections. While we might understand how the flows work, others may not.
Task Instruction - App Design 1 Self-Evaluation and Reflection
Self-Evaluation and Reflection
Self-Evaluation:
In the previous module, which is Application Design 1, I redesigned
the Kummute app. Looking back on my design work, I first personally
evaluated the overall design and identified areas for improvement,
then combined the suggestions provided by AI, including:
- Colour Scheme & Visual Style
- Layout Structure
- Accessibility
- Usability
- Change the colour scheme and illustrations to give the app a more professional look.
- Introduce colour-coded status states (e.g., green = active, grey = completed, red = error).
⭐Suggestion:
- Apply consistent vertical spacing (8pt/16pt system) between sections
for harmony.
- Use dividers or subtle card shadows to group related content for
scannability.
⭐Suggestion:
- Add tooltips or labels for icons like menu items or action buttons
where the function may not be obvious.
- Re-size the text (at least 16pt).
⭐Suggestion:
- Save location and location pages could
use a stronger indication of what the user should do next (i.e., add a
clear primary action or onboarding tip).
Summary of Self-Reflection:
Through the self-evaluation, I became more aware of the importance of
balancing visual appeal with functionality. While my previous design used
soft pastel colours and playful illustrations to create a friendly vibe, I
realized they lacked of professionalism and clarity needed for a
ride-booking app. The feedback helped me see how inconsistent spacing, low
contrast, and unclear icons could affect both accessibility and usability.
By making the adjustments—like refining the colour scheme, improving
layout consistency, and enhancing feedback cues—I’ve learned to approach
design not just from an aesthetic point of view, but also through the
perspective of user needs and inclusive design.
UI Kits
Before starting the refinement, I first set up the UI Kits. Left is the
previous UI Kits, in which I used soft green and pink as the app colour
scheme. However, I have now changed it to dark blue and orange (right), as I
believe this new colour scheme looks more professional and trustworthy.
The fonts remain the same.
Before (left); After (right):
1. Onboarding Page
Here introduce the app by providing a brief welcome and setting the
brand tone.
I switched from the previous illustration style, which I feel a bit too childish, to a 3D image. This is to enhance the overall appeal and to convey a more mature aesthetic. Besides, the previous one was a white and plain background, I added a gradient colour background to the current design, making it modernised.
Allows users to sign in or sign up.
💡Feedback from AI on what can be improved:
- The vertical space between the sections looked crowded, need to add
more space. [Agree]
- Ensure placeholder
and labels have strong contrast. [Agree]
Main dashboard showing ride options, status, and wallet.
💡Feedback from AI on what can be improved:
- “Book a Ride” and “Schedule a Trip” look visually equal—no
prioritization. [Agree]
- Wallet text is slightly
small compared to value. [Agree]
- The play buttons in
the "Book a Ride" and "Schedule a Trip" look not intuitive and difficult
to access, especially for first-time users. [Agree]
- Lacks a quick preview or shortcut to the next action for
the Ride Activity card. [Disagree, the page I provided does not show this function, it
actually exists, but it is not in my MVP flow.]
Provides navigation to core app sections.
💡Feedback from AI on what can be improved:
- Add icons next to each label to enhance user navigation and
usability. [Agree]
- Add a "View Profile" button under the profile to
enhance the intuitive and accessibility for users. [Agree]
💡Feedback from AI on what can be improved:
- The label of "Current Location" is too
light. [Agree]
- Both of the label texts are too thin, which may reduce
the accessibility. [Agree]
- Incorporate a "Next" button that clearly indicates
whether the next step is active or inactive, helping
the users understand their progress and inform them of
upcoming actions they need to take.[Agree]
💡Feedback from AI on what can be improved:
- The search bar UI is too light. [Agree]
- Icons like star/clock are unclear in
function (filters or categories?), suggested to add
tooltips or labels to icons (e.g., “Recent”,
“Favorites”). [Agree]
- Card
layout lacks visual separation between
entries, can improve spacing or card shadow for
visual hierarchy. [Agree]
- For the
Save Location Page, it might be better to benefit
from location type tags (e.g., Home, Work). [Agree]
Enter ride details before booking a ride.
💡Feedback from AI on what can be improved:
- Visual spacing between sections is uneven. [Agree]
- Button hierarchy could be clearer (“Confirm Ride” vs.
back/cancel). [Agree]
Displays live status of an ongoing ride and feature for cancelling rides.
💡Feedback from AI on what can be improved:
- Lacks
ETA or timeline indicators. [Disagree, the ETA is included, I think the text colour
is too light for the AI to sensor.]
Allows to contact with the driver.
💡Feedback from AI on what can be improved:
- The text input field lacks clarity (no label or “Type here”). [Disagree, there is already a label.]
Final Refined Prototype
Click HERE to view the prototype in Figma
Click HERE to view the presentation slides in full screen
Click HERE to view the video on YouTube.
Reflection
Redesigning the Kummute app was a great opportunity for me to reflect on my previous work and improve both the visual design and user experience. At first, I focused mainly on layout design and colour, but I soon realized how much small details, like contrast, spacing, and button hierarchy, can affect on how users interact with the app. Switching from soft pastels to a darker, more professional palette really changed the overall feel and made the design look more trustworthy.
One thing that stood out during this task was the importance of accessibility. I didn’t think much about text contrast or icon clarity before, but AI feedback helped me notice areas I overlooked. I learned that a good-looking design isn’t enough if it’s not usable or inclusive. Making simple adjustments like increasing font sizes, adding clearer labels, and improving navigation really helped make the app feel more user-friendly.
Overall, this project taught me to be more critical and intentional with my design choices. It reminded me that good design is a balance between aesthetics and function. Iterating based on feedback—even the parts I didn’t fully agree with at first—helped me grow and see my work from a user’s perspective.
Comments
Post a Comment