Application Design 1 - Project 3 : Lo-Fi App Design Prototype

18/11/2024 - 9/12/2024 ( Week 5 - Week 10 )

Ho Winnie / 0364866

Application Design 1 / Bachelor's of Design Honors In Creative Media

Project 3 : Lo-Fi App Design Prototype

1. Project 3 : Lo-Fi App Design Prototype

2. Feedback 

3. Reflection

---

1. Project 3 : Lo-Fi App Design Prototype

Requirements : 

Once the UX design process is completed, students can now create a low fidelity prototype of the app. Students needs to arrange all the screen wireframes, actions, visual feedback and link them up in Adobe XD/ Figma/ Invision Studio or any other prototype software’s. Students are then required to perform usability testing whereby they will invite guests to test out their low fidelity prototype and gather all the information, response, feedback, pain points observed from the test.

Students need to document this process with video and produce a document containing detail analysis of this task and the solutions to the problems faced by the testers.

Progress : 

1.1 Paper Sketches & References

First off, I downloaded a phone screen mockup to begin my sketches for my redesigned TBS application. The main screens I am going to design are as follows : 

• Onboarding and Log In Screens 
• Home Screen featuring the main function on the top , which is the bus booking function, followed by the real time bus updates than the news and annoucements. 
• Bottom Navigation bar featuring "Home Page" , " My Ticket " and " My Profile " where the core functionalities of the application are split across these 3 main sections 
• Bus Booking Pages - which include input of travel details , bus timing selection page , filter function , seat selection page with indicators , adding of passenger page , redeeming of TBS points and payment page 
• Ticket page featuring "Upcoming" and "Past" tickets , each with viewable QR ticket. 
• Profile page featuring FAQ which can provide any information help to users

Initial Paper Sketch : 

Fig 1.1 Initial Paper Sketches

After analyzing competitor apps such as Easybook, I observed that their onboarding process for new users is highly effective. It clearly introduces the app's core functionalities, providing users with a seamless and intuitive introduction. Inspired by this approach, I conducted online research to explore best practices and design principles for onboarding screens. This allowed me to better understand how to create engaging, informative, and user-friendly onboarding experiences that highlight key features and enhance user engagement from the start.

Fig 1.2 "Onboarding" Screen References

1.2 Designing Prototype In Figma 

With my prior experience using Figma, I initially assumed that meeting the basic requirement of creating a clickable prototype would be a straightforward task. To push myself further, I decided to challenge my skills by incorporating advanced interactivity into the prototype. This included features like an interactive calendar, a seat selection page, and engaging loading screen animations.

To kick off the design process, I set the frame size to 898 x 350 pixels and established a layout grid with 4 columns, a 16px margin, and an 8px gutter. This structured approach provided a clear visual guideline, making it easier to organize and align design elements. The layout grid not only enhanced the overall aesthetics but also ensured consistency and precision throughout the interface.

Fig 1.3 Layout Grids 

For iconography, I chose to utilize the "Iconify" plugin, which provides a vast collection of free, high-quality icons suitable for various design needs. While this resource was extremely helpful, I also wanted to incorporate a personal touch into the design. 

As a result, I created some custom icons from scratch, including the profile user icon. This approach allowed me to maintain visual consistency and tailor the design to better align with the app's unique style and branding. 

Fig 1.4 Profile Icon 

Fig 1.5 Iconify Plug In

Onboarding and Login Pages : 

The onboarding process consists of three dedicated pages that highlight the key functions of the TBS app. Users are given the flexibility to either skip the onboarding entirely and proceed directly to the login page or navigate through each onboarding screen sequentially. This approach ensures a user-friendly experience by accommodating both new users who need guidance and returning users who prefer to get started immediately.

Fig 1.6 Onboarding Pages

To maintain consistency in the spacing and alignment of buttons, I utilized Figma's auto-layout feature. This approach allowed for dynamic adjustments, ensuring uniform padding, spacing, and alignment across all buttons. By leveraging auto-layout, I was able to create a more responsive design that adapts seamlessly to changes, enhancing both the visual appeal and the user experience.

Fig 1.7 Auto Layout of Buttons

The login page provides users with multiple options for account access. Users can either input their registered email and password or connect their account via social media platforms for a quicker login experience. To enhance interactivity and usability, I designed components like "Email Tabs" and "Password Tabs" with multiple variants, such as selected and unselected states. This dynamic approach ensures visual feedback for user interactions, creating a more intuitive and user-friendly interface.

Fig 1.8 Login Pages

Homescreen Page : 

Since the login page extends beyond the standard screen height, I implemented a vertical scrolling effect to ensure a smooth and seamless user experience. To maintain navigation consistency, I fixed both the header and the bottom navigation bar in place, allowing users to access essential controls without interruption.

For interactive elements like "Active Tickets" and "Events & Announcements," I incorporated horizontal scrolling, enabling users to browse through content intuitively. To achieve this, I created a master frame that contains all the components and nested a smaller frame within it. This nested frame serves as the scrollable container, allowing for vertical scrolling of the entire page while maintaining fixed elements. By properly aligning and structuring the content within these frames, I ensured a clean, functional, and user-friendly interface.

Fig 1.9 Framed contents to enable scrolling for homepage

In addition to the main page design, I created reusable components for key interface elements to ensure design consistency and efficiency. These components include the bottom navigation bar, phone status bar, and bus status indicator.

The bottom navigation bar provides users with quick access to essential app sections, enhancing navigation and user flow. By turning it into a component, I can easily apply changes across all screens, ensuring consistency throughout the app.

The phone status bar at the top displays crucial system information like battery life, time, and signal strength, maintaining a familiar experience for users. Designing this as a component allows for easy updates and alignment with the overall app style.

The bus status indicator provides users with real-time updates on bus schedules and availability. By creating it as a component, I was able to ensure visual consistency and enable quick modifications if changes were needed.

These component-based designs contribute to a scalable, cohesive, and user-friendly interface while streamlining the development process.

Fig 2.0 Bottom Navigation , Bus Status , Phone Status Components

Bus Booking Pages : 

The core functionalities of the app are centered around the bus booking experience, so I aimed to make it as interactive and user-friendly as possible using Figma. To achieve this, I designed an overlay interface where users can input their arrival and departure destinations.

To create a more immersive and realistic experience, I applied an overlay effect with the input form centered on the screen. The background is dimmed using a 50% opacity black overlay, mimicking the feel of a real mobile phone interface. This approach draws users' attention to the input fields while maintaining a clean and modern aesthetic.

By aligning the overlay to the center and ensuring smooth transitions, I enhanced the user experience, making it feel natural and intuitive. This design choice not only prioritizes usability but also creates a visually appealing and engaging booking process.

Fig 2.1 Enter Arrival & Departure 

The next key feature in the bus booking experience is the date selection. To ensure an interactive and visually appealing design, I took the initiative to study how to create an interactive calendar in Figma. I referred to a YouTube tutorial, which provided valuable insights on designing dynamic calendar components with multiple states.

The calendar includes three interactive states for each date:

1. Default State – The standard appearance of a date when it is not interacted with.
2. Hover State – A visual change that occurs when a user hovers over a date, signaling interactivity.
3. Selected State – The appearance of a date once it is chosen, making it visually distinct from unselected dates.

To streamline the design process, I created a component with all three states. This allowed for easy reuse and updates throughout the app. I then placed the date selection into a vertical layout that fits seamlessly into the seat selection flow. This logical progression from selecting the date to choosing a seat ensures a smooth and intuitive user experience.

By following the tutorial, I gained a better understanding of Figma's interactive features, and I successfully implemented an engaging, interactive calendar for the TBS app. 

Creating an interactive calendar from scratch was a rewarding experience, as it allowed me to deepen my understanding of Figma's interactive components. After designing the calendar with default, hover, and selected states, I placed it into a properly structured frame to ensure seamless alignment and responsiveness within the app's layout.

Once the frame was set up, I conducted thorough user testing on the calendar's functionality. This involved interacting with the different states to ensure smooth transitions and responsiveness. The testing process helped me identify and resolve any inconsistencies, ensuring that users would have a fluid and intuitive experience when selecting dates.

Fig 2.2 Components for Calender

Fig 2.3 My final output of interactive calender

The next step in the booking process is the seat selection page, where I applied a similar approach to the one used for the interactive calendar. By leveraging the same interactive components with default, hover, and selected states, I ensured consistency in user experience and visual design.

To tailor it for the seat selection process, I modified the text details inside each component to reflect the seat numbers instead of calendar dates. This approach allowed for a quicker and more efficient design process, as I could reuse and customize existing components rather than starting from scratch.

The interactive states make it clear to users which seats are available, hovered over, or selected. This design strategy enhances the user experience, providing visual feedback for user actions while maintaining a clean and intuitive layout. By reusing and customizing components, I ensured a consistent design language throughout the app, leading to a more cohesive and user-friendly interface.

Fig 2.4 Seat Selection Page 

Fig 2.5 My final output of interactive seat selection

Bus Schedule & Filter Page : 

For the bus schedule page, I implemented a vertical scrolling effect to accommodate a larger list of bus timing options. This design choice allows users to conveniently browse through multiple schedules without feeling overwhelmed by too much information displayed at once.

To maintain a clean and organized layout, I used Figma's auto-layout feature to structure the schedule cards. Each card is spaced 22px apart, ensuring consistent alignment and clear separation between individual bus timing options. This layout makes it easy for users to scan the list and select their preferred schedule.

For the filter page, I designed an intuitive click-by-click selection process that allows users to filter bus options based on their preferences. This could include options like price, departure time, and bus type. By providing users with a simple and interactive filtering system, I enhanced the overall booking experience, making it faster and more personalized. 

Fig 2.6 Bus Schedules & Filter Screens

Adding Passenger and Travel Insurance Pages : 

For the Add Passengers and Travel Insurance section, I adopted a click-by-click selection process to create a simple, interactive experience for users. This design allows users to easily input key details for each traveler while also exploring the benefits of travel insurance.

Passenger Details Input

Users can add information for each passenger, such as name and age, through intuitive input fields. The click-by-click process guides users step-by-step, reducing errors and making the task feel more manageable. This approach is especially beneficial for users adding multiple passengers, as it keeps the process organized and easy to follow.

Travel Insurance Benefit

To enhance the presentation of travel insurance benefits, I implemented a horizontal scroll effect. This allows users to swipe or scroll through the available benefits in a carousel-style layout. The horizontal scroll keeps the interface clean and uncluttered while encouraging users to explore the full range of insurance perks.

Fig 2.7 Adding passenger and travel insurance screens

Redeeming TBS E-Points Pages : 

To enable users to redeem points and access cheaper bus tickets, I designed an interactive level-based progress bar. This visual representation shows users how many points they have accumulated and how close they are to reaching the next reward level. The progress bar adds an element of gamification, motivating users to engage more actively with the app.

Level-Based Progress Bar

The progress bar is designed to visually track the user's progress toward the next reward level. It provides a clear, real-time indicator of how many points are needed to level up. By introducing levels, users feel a sense of accomplishment as they progress, encouraging repeat usage and engagement.

Points Redemption Process

When users reach the required point threshold, they are given the option to claim their points. Upon clicking the "Claim Points" button, an overlay appears with a popup centered in the middle of the screen. The background is dimmed using a transparent black overlay to draw attention to the popup.

The popup contains key information such as:

• The number of points being redeemed
• The resulting discount on the bus ticket
• A confirmation button to finalize the redemption process

This design ensures that users can easily track progress, redeem points, and receive clear feedback on their rewards. The centered popup and dimmed background help focus the user's attention on the action, creating a smooth, user-friendly experience.

Fig 2.8 Claiming E-Points Screens

Payment & Loading Screens : 

To enhance the user experience, I incorporated micro-interactions by adding a loading animation during the payment processing stage. To achieve this, I turned to YouTube tutorials to learn how to create engaging, smooth animations directly within Figma.

The loading animation adds a sense of responsiveness and reassurance, signaling to users that their payment is being processed. This small but impactful design choice reduces user anxiety during wait times and provides a more polished, professional feel to the app.

Loading Animation Design

1. Style & Movement: I designed a simple, modern loading animation, often using rotating circles, progress bars, or bouncing dots — common visual cues that users instantly recognize as "loading" indicators.
2. Timing & Duration: The animation is set to loop for a few seconds to simulate real-world payment processing times.
3. Feedback & Clarity: Clear, simple text like "Loading Payment..." accompanies the animation to provide context and clarity to the user.

By adding this micro-interaction, I created a more engaging, polished, and professional experience. It reassures users that their payment is in progress and improves the overall perception of the app's speed and reliability.

Fig 2.9 Payment Processing Screens

Fig 3.0 My Final Output on Screen Loading Animation

Profile & FAQ Pages : 

Next, I focused on designing the Profile Page, which serves as a centralized hub for user settings and support. This page is crucial for user experience, as it provides access to essential features like FAQ & Support.

Key Features of the Profile Page

1. FAQ & Support Section

• The FAQ & Support section allows users to quickly find answers to common questions.
• A search bar is prominently displayed at the top, enabling users to search for specific queries instead of scrolling through a list.
• I implemented an accordion-style design for the FAQ, where each question has an arrow drop-down toggle. When users click on the arrow, the answer is revealed below the question. This design keeps the page clean and uncluttered while still allowing access to in-depth information.

2. User-Centric Design

• The layout of the Profile Page is simple and intuitive, ensuring users can easily navigate to important features.
• Other profile-related elements, such as account settings, personal information, and log-out options, are neatly grouped for easy access.

3. Interactive Elements

• I made use of interactive components, such as clickable FAQ questions and a responsive search bar.
• The drop-down effect for FAQ answers adds an element of interactivity and engagement, making the user experience feel dynamic and modern.

By structuring the Profile Page in this way, users can quickly find the information they need without feeling overwhelmed. The combination of a search bar, drop-down FAQ, and accessible support options ensures that users feel supported and in control of their experience.

Fig 3.1 My Profile Pages

My Ticket Pages :

Next, I focused on designing the Ticket Pages, ensuring a clear and user-friendly experience for managing both upcoming and past tickets. To prevent confusion, I implemented a tabbed layout that distinctly separates the two categories. This organization allows users to quickly find and review their travel history or check their upcoming trips.

Key Features of the Ticket Pages

1. Tabbed Navigation (Upcoming & Past Tickets)

• Users can seamlessly switch between Upcoming Tickets and Past Tickets using a simple tab system at the top of the page.
• Upcoming Tickets display current and future bookings, enabling users to stay updated on their next trip.
• Past Tickets show previous trips for reference or record-keeping purposes, enhancing user transparency and accountability.

2. Ticket Details Display

• Each ticket is displayed as a card-style component that shows key details such as:
• Departure & Arrival Locations
• Date & Time
• Seat Number
• Gate Number
• Booking ID/Reference Number
• The layout is clean and well-structured, making it easy for users to scan for relevant information.

3. QR Code for Tickets

• For upcoming tickets, users can view and download a QR ticket directly from the page.
• This feature allows for easy check-ins and boarding at the bus terminal. Users can save the QR code to their device or present it directly from the app.
• The download button is prominently displayed to ensure accessibility and convenience.

4. Interactive Elements

• Clickable buttons, such as "View Ticket" or "Download QR", provide a seamless and interactive user experience.
• I also considered accessibility by ensuring that interactive buttons have clear labels and adequate spacing to reduce accidental clicks.

By structuring the Ticket Pages with a tabbed layout and an interactive QR ticket system, I created an intuitive, easy-to-use platform for users to manage their bookings.

Fig 3.2 My Ticket Pages

Finally, I cleaned up the Figma interface and organized all the screens to create a more structured, professional, and user-friendly file. This final step ensures that the design is easy to navigate, collaborate on, and present to users during usability testing.

Fig 3.3 Figma File - Before Cleaning Up

Figma File & Prototype :

 

2.3 Usability Testing 

The next phase of this project is the usability testing in which I created 3 different scenarios for the users to try in the app. Descriptions were added to help the users navigate through each scenarios easily. 

Fig 3.4 Scenarios given to users

Task Given : 

Scenario 1 : Login To App

Imagine you are a new user who just downloaded the TBS app, your first task is to go through the onboarding and input your username and password in order to log in. After successfully logging in, explore and navigate the homescreen.

Scenario 2 : Booking Of Bus Tickets

After navigating the home screen, imagine you are using the TBS application to plan and book your next bus trip.

Starting from the home screen, navigate and find the booking bus ticket function. After that, input your travel destinations, select the date "15th February 2024" and key in economy seat class.

You will be directed to the next page which shows the bus timings available. Next, locate the filter option and input the filters as you wish.

Select the first "Sri Maju" bus ticket and proceed to seat selection "3A" . Proceed to checkout page and claim the TBS e-points before making payment.

Once you've completed the payment, you can easily check and download the virtual QR code ticket

Scenario 3 : Viewing FAQ

Imagine you are a user who landed on your profile page and forgotten your password. You wish to know the procedures to change your password so you click on the FAQ section. After landing on the FAQ section, locate the " How Do I Change My Password "question and click on it.

Recorded below is the user walkthrough for usability testing and how they interacted with the app to complete the 3 scenarios : 

2.4 User Feedback

During the interview on Zoom call while the participants are interacting with the prototype, I made a set of questions to ask the users on their overall thoughts on the app and how it can be further improved, below documents the thoughts and feedback of the participants.

     

Summary of Improvements Suggested By The Users : 

1. Homepage Enhancements

- Display Wallet Balance: Show the TBS wallet balance on the homepage for easy access and visibility for users.

2. Calender Page Improvements

- Show Cheapest Ticket Price: When users select a date on the calendar, display the price of the cheapest ticket available for that specific day.

3. Redeem Points Section Updates 

- Custom Point Input: Replace the current popup with an input field that allows users to enter the exact number of points they wish to redeem.

- Dynamic Conversion Display: Display the equivalent amount of money users will receive based on the number of points they input.

4. FAQ Section Update

- Report Button: Add a "Report Issues with Recent Booking" button to allow users to submit complaints or report booking-related problems.

5. Bus Booking Enhancements 

-"One Way" or "Round Trip" Option: Add a toggle option for users to choose between "One Way" or "Round Trip" bookings for more flexible trip planning.

6. Filter Page Enhancements 

- Accurate Filter Results: Ensure that when users select filters like bus company or other criteria, the displayed results are updated accordingly and reflect the filtered choices.

1.5 Improvements 

Based on user feedback, I added the wallet that displays the amount of money left in the TBS wallet at the top and included a top up button inside the card. The TBS Wallet feature now prominently displays the remaining balance at the top of the app, ensuring users can easily monitor their funds. A "Top-Up" button is integrated into the wallet card for quick access, allowing users to seamlessly add funds through predefined or custom amounts using various payment methods.

Fig 3.5 Newly added wallet section 

Following Mr. Zeon's feedback, a black header has been added to the TBS Wallet to visually distinguish the title from the rest of the interface. The header prominently displays a bold, centered title such as "TBS Wallet" in contrasting white text for clear readability. This header not only enhances the visual hierarchy but also provides a polished, professional appearance to the wallet section. It seamlessly integrates with the wallet's existing features, ensuring a cohesive and intuitive user experience across all devices.

Fig 3.6 Final wallet and homepage section

Secondly, I enhanced the calendar date selection section by incorporating the feature to display the cheapest prices available for each date. This addition allows users to quickly identify the most budget-friendly travel options at a glance, improving decision-making and overall usability. Each date in the calendar now dynamically highlights its respective lowest price, ensuring a seamless and user-centric booking experience. 

Fig 3.7 Changes done to calender page

Thirdly, I enhanced the FAQ & Support section by introducing a Report Issue button. This feature allows users to easily report problems or provide feedback directly from the support page. The button is prominently placed for accessibility and initiates a streamlined process for users to describe their issues, ensuring quick resolution and improved user satisfaction.

Fig 3.8 Final FAQ page

Fourthly, I improved the filtered bus section page by ensuring the displayed results dynamically update based on the filters selected by users. This enhancement allows users to view buses that match their specific preferences, such as departure time, price range, or amenities, providing a more personalized and efficient search experience. The filter functionality is responsive and intuitive, ensuring a seamless interaction that helps users find their ideal travel options quickly.

Fig 3.9 Enhanced filter page section 

Lastly, I updated the redeem points section to include a dynamic calculation that shows users how much money they can claim based on the points they choose to redeem. This improvement provides greater transparency and clarity, allowing users to make more informed decisions about their redemptions, enhancing their overall experience with the reward system.

Fig 4.0 Final redeem points section 

Final Outcome :

Project 3 Low Fidelity Prototype 

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

Click HERE to view the final low fidelity Figma wireframe 

 

---

2. Feedback

Week 7 : 

Mr Zeon mentioned that some subtle drawings can be added to make the app look more interesting. Additionally, he added that it is good that I created the components myself for the interactive calender and seat selection. 

Week 9 : 

Mr Zeon mentioned that the prototype is good to go for usability testing and I shall change accordingly to what some of the feedback from the users were given. He added that it is a good idea to make the titles stand out more compared to body text. 

Week 10 : 

The changes I did for the final lo-fi prototype was approved by Mr Zeon and he commented that it is good and I can work on the color palette and hi-fidelity prototype. 

---

3. Reflections

Experience : 

I felt that it was a very meaningful experience going through the design of the screens from scratch to usability testing. The process of doing low fidelity design is very important as it sets the layout of the entire application. I had to go through many iterations to get the satisfied look of certain elements, for example - the interactive calander. In order to make it more interactive, I even went online to study how other designers made it so it was definitely a good learning experience for me and it polished my skills in Figma too. 

Observations : 

I found how important it is to conduct usability testing as some feedback given by the users were very valid but for some reason, as the main designer i did not realized it in the beginning and I learnt a ton from Mr Zeon and my users when they tested the app. Small changes such as the spacing can make a huge difference in the information hierarchy. Therefore, asking comments from peers and Mr Zeon is a very important factor and I am glad I showed progress weekly so i can improve on my design. 

Findings : 

I found out how crucial time management was for this project as the longer we dragged for this project, the lesser time we will get for our final project. I started this early so I had extra time to refine my prototype and conduct usability testing. By challenging myself to learn more, it is crucial that one must practice self learning and I hope that I can execute the final project well. 

---

QUICKLINKS

Project 1 : Mobile Application Proposal

Project 2 : UIUX Document 

Final Project : Completed Mobile Application Design Prototype ( Hi-Fi )

Final Compilation & Reflection