Retrospective 3: High fidelity prototyping

Identify opportunities and redesign an existing mobile app

Kurien Kalarickal
Sep 15, 2018 · 6 min read

This was a team project with Camilla Loh & Chloe Tang and we chose the MyTransport SG app. It is owned by the Land Transport Authority (LTA) of Singapore and has low ratings in both the Android and iPhone markets. Since it will eventually be in our portfolios, it made sense to go after the big boys.

This is the landing page(s) of MyTransportSG. It’s almost another smartphone within an app

User Research

We set about by doing a quick heuristic evaluation using good old Nielsen’s and Abby’s heuristics. We interviewed:

  1. Current MyTransportSG users: There definitely must be something that the competitors don’t have. (I mean, look at that interface)
  2. Users who have used the app previously but not anymore: What are the major letdowns? What do the competitors have that MyTransport doesn’t?
  3. Non-users: What are the general requirements people want in a transport app? Had they seen MyTransport when considering options for a transport app and did not install it for some reason?

We also did a competitor analysis with SG Buses, Google Maps and City Mapper, in which we compared the features, the layout and the information architecture.

Sample section of Competitive Analysis

Research Synthesis

Summary of responses from current users

MyTransportSG is a comprehensive repository for all transport-related information in Singapore. It gives you all the badly organised information you need but it is up to you to analyse it and formulate your journey plan. One of the quotes from a user stood out:

When I walk into a clothes store, I don’t want to look through all the 70 options. I want the shop assistant to understand what I want and present 4 options.

The current users use other apps for journey planning and only use MyTransportSG for the traffic news and accurate bus timings. They don’t care or aren’t aware of the other features.

The Problem

The users need a way to plan their journey and access only information that is relevant to them. They are wasting time switching between apps and or processing the raw data presented to them.

The business needs a way to increase engagement with users and other businesses by leveraging on their credibility as the prime source of transport-related news in Singapore.

Affinity Mapping and synthesising our problem statement. My bald spot is not part of the problem.

We came up with User Personas — Rambu Tan, Mani Pulator & Eileen Dover to represent our target user types and plotted out their Customer Journey Maps to identify opportunities for us to solve their problems.

Customer Journey Maps for our User Personas

Our solution

We decided to combine all the bus, train, cycling, driving and walking sections into one journey planner on the landing page, which would also show relevant information (arrival times, delays etc…)on bookmarked things like bus services, bus stops, traffic cameras, if they are nearby. The full list of bookmarked items and traffic information would go under a side menu.

We carried out a Tree Test to make sure information is organised in a way that is intuitive for the users. But the test participants found it difficult to perform the tasks when not in the context of a mobile app. So we ditched the tree test and proceeded to making quick wire-frames to carry out usability tests on them. We prepared 5 tasks for our users who assumed the persona of Rambu Tan. The tasks:

Task 1 It’s Monday. You are about to leave home for school and would like to know what time the bus you regularly take — 185, is arriving.

Task 2 You have entered your destination address and are presented with suggested routes. Now, you want to see “bus-only” suggestions.

Task 3 You lost track of time and place after a round of playing “Maple Story”. Can you find out the name of the bus stop you just passed by?

— Traffic disruption popup —

Task 4 You would now like to continue your journey using a means of transport not affected by the disruption.

Task 5 While in the train, you want to read up about the disruption. Where do you think you can locate this information?

The usability tests on our wire-frames highlighted several shortcomings: 1) The filter and sort buttons were not easily recognisable. 2) The green bar for trains and buses to indicate seat availability did not have any legend. 3) The expand/collapse button to show the details of all the bus stops was not easily seen by users.

We did not meet our success metrics. We incorporated the findings and worked on our high fidelity prototype

1. Landing page with current location and info on bookmarked items and legend for the seat availability 2. Search results with filters and sort (added text labels to remove any ambiguity), ERP indicator and option to switch to a taxi app 3. Detailed route page
4. Disruption alert 5. Search results page with disruption indicators on affected routes 6. Get-off alert
7. Optional feedback for journey 8. Traffic cameras page with drop-down selector 9. Traffic news update page with menu overlay

We repeated the usability test with the Hi-Fi prototype and it passed our success metrics: all users completed all tasks, each task could be done within 5sec. In addition, we received some bonus comments too.

“I love the occasional Singlish in the app!”

“The traffic alert and bookmark features are quite useful.”

“The interface is clean and simple, its easy to interact with the app. ”

On the finalised prototype, we did an analysis akin to the heuristic evaluation and competitive analysis performed during the research phase, to demonstrate where the redesigned app stood in comparison to the existing app.

Sample section of Before and After — Evaluation

Learning Outcomes

  1. Tools like card sorting and tree testing are not relevant in all situations. And sometimes does more damage than good. For simple mobile apps it is better to do monitored usability tests.
  2. For mobile apps, working in Adobe Xd is exponentially less painful than working in Axure. But this will probably change when complex websites and responsive layouts are required.
  3. Our team hadn’t rehearsed the presentation together and we overshot the allotted time.
  4. We didn’t formally document our feature prioritisation but just drafted the new Information Architecture with verbal consensus as we went along. Much informal, So Agile. And probably not recommended either.

What next?

LTA could increase engagement with customers and businesses by:

  1. Providing a feature that takes the user from MyTransport to a taxi app with the destination addresses pre-filled. LTA could partner with taxi companies and offer deals for users coming to the taxi app via MyTransport. Analytics can monitor the success of this feature to decide whether to keep it.
  2. Similar arrangements with bike-sharing apps.
  3. Partnering with electric car rentals (blueSG)
  4. A feature to let users contribute by reporting incidents.
  5. Live-location sharing so users don’t have to constantly update whoever they are meeting about their location.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade