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.