25/09/2024 - Ending Date (Week 1 - Ending Week)
Lee Wing Kie / 0364251
Application Design II / Bachelor of Design (Hons) in Creative Media
Task 1 - App Design I Self-Evaluation and Reflection
INSTRUCTION
Task 1: Self-Evaluation & Reflection
After reviewing my Travel Mate app prototype from the previous module
Application Design I, I feel that the interface design could be more
engaging by incorporating more vivid colors, background images, and subtle
patterns. The current design is too minimalistic and the visuals feel
somewhat empty. While the user experience is good but the design still
feels incomplete.
Link of High-Fidelity Prototype (Application Design I)
User Flow
Previous User Flow
This is the user flow from the previous prototype. Users first encounter
the onboarding page, followed by the login or sign-up page. After entering
the homepage, they can navigate to the 'Book Flight,' 'Destination,' 'My
Trip,' and 'Profile' pages, which are accessible via the bottom navigation
bar.
Fig 1.1 Original User Flow - PDF
New User Flow
For this task, we only need to choose one flow, then reflect and redesign
based on that. I have chosen the flight booking flow. Below is my new user
flow.
.jpg)
|
| Fig 1.2 New User Flow |
Redesign
Homepage
The previous design was very light and harsher on the eyes, so in the
latest version I changed to dark mode to make it more eye-friendly and
modern. For the navigation bar, I also added text below the icons, which
helps reduce errors when users click the buttons and makes it easier to
identify which page they want to access. Additionally, I included a
promotional banner on this page to make it more engaging. The banner is
visually appealing and informs users about upcoming promotions, which can
stimulate their purchasing desire.
|
| Fig 2.1 Improvement for Homepage |
Flight Selection
The previous design didn’t display the date or allow date switching, which
wasn’t user-friendly when users wanted to reconfirm or compare flight ticket
prices across different dates. The latest version adds a date selector and
removes the navigation bar at the bottom, as the previous version had both,
back button and navigation bar on the same page, which was unnecessary. I
also added tags like “Selling Fast” or “Earliest” to make it easier for
users to quickly see which option they prefer.
|
| Fig 2.2 Improvement for Flight Selection |
Seat Selection
The previous design had a clean, simple grid with seat numbers but lacked
visual depth. In the latest version, the bottom session more prominent and
is accompanied by flight details (class and cost) for better transparency.
Users can also see a clearer differentiation between “Available” and
“Unavailable” seats.
|
| Fig 2.3 Improvement for Seat Selection |
Checkout
In the previous design, there was no checkout page and no way to confirm
information before making a payment. In the latest version, I added a
checkout page with clearly displayed flight details and user information
for easy confirmation. A section to enter a promo code was also added
before proceeding with payment. The total fare is shown clearly and
prominently, making the overall process more user-friendly.
|
|
Fig 2.4 Improvement of Checkout |
Payment
In the previous design, the payment method screen was simple, showing
different payment options but lacked a clear visual transition during the
payment process. In the latest version, I implemented a dark mode for better
visual appeal and added a "Processing" screen to provide feedback to the
user during the transaction. Additionally, a "Payment Successful"
confirmation screen was added, improving user confidence by clearly
indicating the successful completion of the payment. This ensures a
smoother, more reassuring user experience from selection to confirmation.
|
| Fig 2.5 Improvement of Payment |
Confirmation
In the previous design, the boarding pass screen was simple with a light
background and basic details. It was functional but lacked visual depth. In
the latest version, I introduced dark mode for a sleeker, more modern look.
The flight information is clearer with improved contrast and visual
hierarchy, making it easier to read. The "Download E-Ticket" button also
stands out more, enhancing the overall user experience.
|
| Fig 2.6 Improvement of Confirmation |
Wireframe
Click
HERE
to access the Figma file.
Final Submission
Presentation Slides
Presentation Video
FEEDBACK
Week 3
• The overall design is clean, but perhaps too clean.
• Adding some color to make the overall look more cohesive.
Week 5
• The payment option details need to be shown in the user flow.• Display the details page after clicking the "Show More" button on the flight selection page.
• The barcode on the confirmation page cannot have reversed colors, it must in a white background with black lines for the code.
Comments
Post a Comment