Bus-tracking Mobile App


Background: As the team leader of the bus tracking mobile app project, I led the group to conduct user research and app design. Based on a survey and interviews, we found the basic users’ needs of bus riders: real-time bus tracking and a reminder to get off the bus.

Challenges: It was difficult to clearly display the multi-type information on the mobile screen because the interface of the mobile map was busy.

Research and design strategies: We conducted a competitive analysis on the existing bus mobile apps and developed the conceptual map of the app (see image 1). We took the iterative design process with the usability testings.

Image 1: conceptual map

Design cycle I: After we drew wireframes of the app interfaces with pencil and paper, we conducted expert review on the sketches.

Image 2: sketches

Design cycle II: Based on the feedback from expert review, we revised the wireframes and created the low-fi prototype (see image 3). And we conducted usability testing with convenient samples.

Image 3: Low-fi prototype

Design cycle III: The results of usability testing helped us to create the second prototype (see image 4). We conducted usability testing with five tasks and identified a few problems.

Image 4: second prototype

Design cycle IV: We revised our design and created the hi-fi prototype (see image 5 and image 6). We conducted usability testing again with the hi-fi prototype and got very good feedback.

Image 5: Hi-fi prototype-homepage

Image 6: Hi-fi prototype-bus detail page (set alarm page)

Results: I learned how to work more efficiently, how to design the information architecture and present multi-type information on the mobile screen.