Application Design 1 - Final Project : Completed Mobile Application Design Prototype ( Hi-Fi )
13/11/2024 - 29/12/2024 ( Week 9 - Week 14 )
Ho Winnie / 0364866
Application Design 1 / Bachelor's of Design Honors In Creative Media
Final Project : Completed Mobile Application Design Prototype ( Hi-Fi )
1. Final Project : Completed Mobile Application Design Prototype ( Hi-Fi )
I began the design process for the hi-fidelity prototype by carefully selecting the color palette. To ensure alignment with the original brand identity, I used the TBS logo as a reference and employed the eye-dropper tool to extract its exact colors. This approach allowed me to maintain consistency with the brand's visual identity while creating a cohesive and professional design. By staying true to the original brand colors, I aimed to enhance user recognition and trust while adding a touch of creativity to the overall aesthetic.
 |
| Fig 1.1 Color Palette Used |
 |
| Fig 1.2 Experimenting with Onboarding Screens |
 |
| Fig 1.3 Final Look of Onboarding Screens |
 |
| Fig 1.4 Final Look of Login Screens |
Home Screen :
 |
| Fig 1.5 Attempts at Home Screen |
The most challenging aspect of the design process was deciding how to design the home screen. I struggled to find a background that complemented the booking container while harmonizing with the overall layout. My goal was to maintain the app's minimalist aesthetic, which led me to experiment with various options. Ultimately, I decided to use lighter colors, as they not only preserved the clean and simple look but also enhanced the overall visual appeal of the screen
 |
| Fig 1.6 Adding images & colors for Home Screen Elements |
Additionally, I introduced color coding to the "Active Ticket" section to enhance clarity and usability. The "Boarding" buttons were highlighted in green to signify progress, while the "Delayed" buttons were marked in bright red to draw immediate attention. For the "Promotion" section, I carefully selected several images that aligned with the app's theme and aesthetic, ensuring they effectively conveyed the promotional content while maintaining visual harmony with the overall design.
 |
| Fig 1.7 Navigation Bars |
Next, I focused on designing the navigation bars, selecting #AE1F24 as the primary color to ensure a strong and vibrant visual impact. To enhance usability and contrast, I paired it with a grey background, making the icons stand out more prominently when pressed by users. Key elements such as headings also utilized #AE1F24 to maintain consistency and draw attention to important details, reinforcing the app's cohesive design language.
 |
| Fig 1.8 Final Attempt at Home Screen |
Bus Schedule & Filter Screen :
 |
| Fig 1.9 Bus Schedule Screen |
For the filter screen, I designed each button to turn yellow when pressed, mimicking a real-world user interaction and enhancing the overall experience. To ensure consistency across the app, I used the same shade of yellow, #FAE110, as applied to all buttons in this application. This uniform approach reinforces the cohesive design while providing clear feedback to users during interactions
 |
| Fig 2.0 Filter Screens |
 |
| Fig 2.1 Seat Selection Pages |
 |
| Fig 2.2 Bus Booking Screen Elements |
 |
| Fig 2.3 Adding Passenger Screens |
Next, I moved on to the Payment Details Screen, where I focused on providing a clear breakdown of the transaction. This included itemized costs, any discounts applied, and the total amount due. I also added a section for payment methods, giving users the flexibility to choose options like redeeming points or using their wallet balance. My goal was to make the payment process as smooth as possible, with all critical information easily accessible.
To keep the user informed during the transaction, I designed a Loading Screen with a simple progress indicator. This was important to reassure users that their payment was being processed. Finally, I created a Payment Success Screen with a green checkmark and a confirmation message to provide clear feedback that the transaction was completed successfully.
 |
| Fig 2.4 Payment Screens |
My Ticket Screens :
I started with the QR Ticket Page, which serves as the central hub for passengers to access their ticket details. My goal here was to ensure all critical information—such as departure time, arrival time, seat number, and reference number—was displayed clearly and prominently. To make it even more user-friendly, I included a QR code that passengers can use for easy boarding. I also added a "Download Ticket" button at the bottom, making it convenient for users to save their tickets offline. The design is clean and straightforward, allowing users to find the information they need at a glance.
For the My Ticket Page, I wanted to provide users with an organized view of their bookings. I introduced tabs for "Upcoming" and "Past" trips, ensuring users can easily navigate between their future and completed journeys. Each ticket card displays key details such as the bus operator, journey duration, and price, along with options for refunds, receipts, and viewing more information. To maintain consistency, I used the same branding and color scheme throughout the page.
 |
| Fig 2.5 My Ticket Screens |
My Profile Screens :
My Account Page, aims to provide users with a centralized space to manage their profile and access key features. The design features a clean layout with a user avatar and name displayed prominently at the top, creating a personalized experience. Below, I included options for accessing the TBS Wallet, Community, Directory, FAQ & Support, and About sections, ensuring users can navigate to important areas quickly. The Log Out button is clearly placed at the bottom to provide an easy way for users to exit their account. The page’s simplicity and intuitive design ensure that users can efficiently manage their account details.
Next, I worked on the FAQ & Support Pages, focusing on creating a user-friendly support system. At the top of the screen, I added a search bar to allow users to quickly find answers to their questions. Common queries, such as “How Do I Change My Password?” and “Types Of Payment Methods,” are displayed as expandable sections for easy access. Below this, I included a section titled "Issue With Recent Bookings?", where users can view recent trips and report issues with a single tap. For additional support, I added options like Call Us Now, Give Feedback, and Mail Your Issue To Us, providing multiple ways for users to seek help. The clean layout and well-organized sections ensure that users can resolve issues efficiently without feeling overwhelmed.
 |
| Fig 2.6 My Profile Pages |
1.3 Usability Testing
For usability testing , I recruited 3 participants to take part and all of them are frequent bus travellers who has used bus ticket booking application before. I carried out the testing using zoom where participants shared screen and share their comments on the application.
3 scenarios were created for them to take part as well, which is mainly login to app , book bus tickets and view FAQ.
 |
| Fig 2.7 Scenario 1 - Login To App |
 |
| Fig 2.8 Scenario 2 - Booking Bus Tickets |
 |
| Fig 2.9 Scenario 3 - Viewing FAQ |
Recorded below is the user walkthrough and how the participants interacted with the hi-fidelity prototype :
Summary of improvements suggested by users :
1. Hierarchy and Spacing in Ticket Information:
- Current Issue: The ticket information section, especially contact details, lacks a clear visual structure. Titles and details may look too close together or lack distinct visual separation.
- Suggestions for Improvement:
- Spacing Adjustments: Add consistent padding between each section (e.g., ticket title, seat number, contact info) to avoid crowding.
- Font Weight and Size: Use a heavier font weight for key titles (e.g., “Contact Details,” “Ticket Summary”) to differentiate them from body text.
- Use of Color: Consider adding a subtle, branded highlight color for section titles or dividers to create a clear separation between different pieces of information.
- Line Height Adjustments: Ensure line spacing is not too tight, making the content more scannable.
2. Simplifying Payment Details:
- Current Issue: The payment details section is divided into three distinct sect
- ions with different colors, which can be overwhelming or confusing for users.
- Suggestions for Improvement:
- Single Container Design: Merge the three sections (e.g., payment method, total amount, confirmation) into one unified container. This creates a cohesive flow for users as they review payment details.
- Clear Section Labels: Use labels such as “Payment Method,” “Total Amount,” and “Review Details” within the container to indicate distinct parts without requiring separate color blocks.
- Minimal Color Usage: Instead of using different background colors for each section, opt for consistent, neutral tones to avoid visual clutter.
- Left Alignment: Align all key payment information (e.g., card type, e-wallet) to the left. This alignment improves readability by following common design conventions.
3. Container Distinction:
- Current Issue: Some containers blend into the background, making it difficult for users to distinguish sections or important content.
- Suggestions for Improvement:
- Shadow Effects: Add subtle box shadows to containers to create a raised, card-like effect that visually separates them from the background.
- Border and Background: Apply a slight border or a soft gradient background to differentiate sections without making the layout too busy.
- Hover or Focus Effects: For interactive elements like clickable cards or sections, implement a hover effect (e.g., slight scaling or background change) to provide visual feedback to users.
- Contrast Improvement: Check contrast levels to ensure text and interactive components within the containers remain legible, especially against light or branded backgrounds.
 |
| Fig 3.0 Improvements on Contact Details page |
 |
| Fig 3.1 Improvements to Ticket Details page |
 |
| Fig 3.2 Improvements made to show more contrast |
 |
| Fig 3.3 Improvements made to payment method page |
 |
| Fig 3.4 - App Showcase #1 |
 |
| Fig 3.5 - App Showcase #2 |
.png) |
| Fig 3.6 - App Showcase #3 |
2. Feedback
3. Reflection
Comments
Post a Comment