Tongtar Transport
A private bus charter booking platform for staff to book their daily transport services to office.
A redesigned mobile app for booking of daily staff transport services for office staff.
PRODUCT
UX Research and Testing
Low-fidelity wireframes
Hi-fidelity design
MY ROLE
TIMELINE
SOFTWARES
1 month
Figma, Figjam, Adobe Photoshop
Disclaimer: I am not in any way affiliated with Tongtar.
Staff find booking of bus for office commute on the Tongtar Transport mobile app frustrating.
PROBLEM
2 times / week
average number of times staff uses app
5 out of 7 &7
experienced scrolling fatigue when searching for routes
3 out of 7 &7
unable to change booking details after confirmation
43%
made errors when making a booking in the past month
57%
restarted the app due to frustration during booking
100%
shared their negative experiences with others
Statistics obtained from User interviews
Existing Tongtar mobile app
How might we improve the current app to help users plan their office commute efficiently and effectively?
User Stories
I used User Stories to capture the essence of the need of my users and serve as a guiding point for this redesign.
As a busy working professional, I want to plan my commute on days I need to return to office, so that I can utilize the remaining time of the day to do the things that matter to me most.
USER RESEARCH
Conducted User Interviews
I interviewed 7 users to understand their motivations and pain points on using the Tongtar mobile app to book a commute to and from work.
FINDINGS
User frustrations are mainly on:
Lack of information organisation clarity
Lack of flexibility to change booking details
Mapping out existing User Journey and identifying opportunities
I created a user journey map of the existing mobile app and tried to identify the improvement opportunities along the way. This provided more insights into designing the information architecture for the app.
Reorganising Information Architecture (IA)
As the main user frustration was the lack of clarity of the information organisation, this reorganisation of content was critical for the success of the redesign. I also used the IA to redesign how the user flow of booking a trip would be like.
LOW-FIDELITY PROTOTYPING
Visualising user flow in Low-Fidelity
I drew out low-fidelity wireframes to visualise the booking process that I had planned when reworking the IA, and to ensure its technically feasibility and functionality. At this stage, I decided that a bottom navigation bar is necessary to ensure that the contents of the app can be easily accessible throughout all screens.
HIGH-FIDELITY DESIGN
Creating clear, functional yet aesthetically pleasing interfaces
I designed functional screens for the mobile app and added some graphics to make the user experience more visually appealing. View prototype in full screen mode.
PRODUCT FEATURES
IMPROVED BOOKING
Booking information is spread out across more screens to prevent information fatigue. Users can now book round trip in a single booking.
EXPERIENCE
Users can view route information in this newly added section. Previously, users had to view this information separately via their work email.
ROUTE INFORMATION
Users can view upcoming and past trip activity, with the option to book trip again, in this newly added section.
TRIP ACTIVITY
Android users can now pay conveniently with GPay or Paypal.
MORE PAYMENT OPTIONS
Designed and led usability testing
I conducted 2 rounds of usability studies with the same 7 users that I interviewed, at different stages of the high-fidelity prototype development, so as to constantly improve on the design. This revealed the aspects of the design that needed to be refined.
USABILITY TESTING
ROUND 1 FINDINGS
Most users want to book trips one by one, they don’t plan their entire week of trips.
Users find it difficult to find rescheduling page.
ROUND 2 FINDINGS
Users find hassle in going back to home page to book trip while viewing route information.
Users find it difficult to locate the barcode for upcoming trip.
Extracted insights from testing and improved on design
I used the insights gathered and made further improvements on the prototype to suit the users’ needs.
#1: RESCHEDULING
The reschedule trip button was not easy for users to locate. I streamlined this flow by making the reschedule trip button easily available on the activity page to view their booking details.
#2: MORE BOOKING PATHWAYS
Users can now book the trip button directly in the route information page, without reentering the trip destination and pick up.
#3: ADDED FAB FOR BARCODE ENTRY
Users can now quickly locate the barcode of their latest booking upon launching the app via the Floating Action Button on the homepage.
“This version is so much better. You should pitch this to management.”
TAKEAWAYS
Lessons Learnt
The first drafts of the redesign only marked the beginning of the redesign process. Usability studies and user feedback are what drives the design forward as they heavily influence each iteration of the app design.
I am not my user, was a bias elimination statement that I constantly had to reinforce to myself during this process. As an avid user of this app, there was a lot of biasness in the initial process of the user research and user design. I constantly validated my assumptions with research and testing. This was an important lesson to never assume our users’ problems and motivations.
Next steps
There is more to explore with this redesign. What if the notifications were enabled in the app when the bus breaks down, or there is a change in the pick up point? What if messaging was enabled to contact the driver? These are just some questions I would like to expand on as I continue to work on this project.