Who’s Transportation App? Mine!
Redesign an award-winning app.
For the next project that I am tasked to redesign an app. I have Kurien and Chloe in my team this time round. It took us a while to pick the app to redesign as there are already many established app around. But what stood out was the MyTransport app. It is a functional app but it is quite dated. We see the potential in that app and there are many things we can improve on the app.
We judged the app…
Whenever we got a project that we have to redesign, we will evaluate it with the heuristic. The things that really stood out when we were doing the evaluations are:
Match between system and the real world
- the icons used in the inner screens are quite confusing especially the traffic smart page.
Consistency and standards
- some of the screens have the home page at the bottom while some screens have it on the top.
Aesthetic and minimalist design
- the inception looking homepage is something we have to redesign.
Value (e.g. sections with information only)
From the heuristic, we realized what needs to be redesign and looked into.
It's interview time!
We interviewed some of the existing users, similar app users as well as users who deleted the app.
Users of MyTransport app:
They used it mainly for the traffic camera and traffic news functions as it is information from LTA.
Similar app users:
They used it for the bus timing functions as it will help them with the planning of their mode of commute. Many users used google map to plan their journey as it is what they are comfortable with.
Users who deleted the app:
When we asked the users why they deleted the app, the main reason is the overwhelming functions on the landing screen as well as the UI of the app.
From the interviews, we found out that there are many useful functions that the users didn’t realize that it was there. The functions(bus timing)that users used on other apps are also available on the MyTransport app but it was the UI that turned them away. The other problem is that the information are scattered all around in the app making it hard to navigate.
Competitor analysis
We did a competitor analysis with 3 other popular apps that our user used.
We were clear what had to be done for the redesign, so we moved forward to do a card sort of the information and feature that the current app has.
Affinity mapping
We did the affinity mapping after we gather all the raw information we have to make it clearer for us to see it as a big picture.
We grouped it according to the needs of users and also the pain points that our uses had. We also look out for the features that we should and should not keep.
Persona
We then created 3 persona and customer journey according to the users we interviewed. We came up with Rambu Tan, Mani Pulator and Eileen Dover to give us an idea how they feel and the opportunity for us to solve their problems.
After doing the customer journey, we managed to find out the pain points and how we can help them with the app.
Just internal…
We decided to do a card sort to rearrange the information structure for the app. But we realised that we only need to do the card sort internally.
After the card sort we thought that maybe doing a tree test will be more relevant for this project. But a lot of our users actually failed the tree test as it is hard to imagine what the app looks like and where are the features are.
Framing the app.
Due to the failure of the tree test, we decided to do the wireframe and test it with our users instead.
We did up a wireframe and tested it out with users. The feedbacks we got are:
- Confused about the coloured bar below the bus timings
- They couldn’t tell their current location
- Icons used as filters are confusing
- Users missed out the expanding/collapsing button that shows the detailed journey that they will go through.
From the feedbacks, we looked into improving the wireframe and decided to apply it to our high fidelity prototype.
High Fidelity Prototype
- Landing screen
Feedbacks: One user found the naming of bookmarks — Buses, Bus Stops, Routes — misleading.
Improvements: Bookmarked item names changed to Saved buses, Saved bus stops, Saved routes… - Result Screen
Feedbacks: Two users suggested using the SMRT colours for Train options.
Improvements: Train labels’ colours changed to show the suggested line to take. - Planned journey screen
Feedbacks: One of the user was curious to know about the bookmarking process.
Improvements: Displayed bookmark options when relevant.
After revising the hi fidelity prototype, we compared it to the original app and heres how we scored.
My thoughts and learnings…
We really had fun and got nothing done when we work together. The only way for us to get things done is to work it alone. But luckily we realised it during our first few session of working together. We decided that we will plan what we have to do for each person and get it done individually. It turns out to be a good working style for us.
We keep reminding each other on feature prioritisation but didn’t do the chart. I think it will help us more if we had done it.
Doing a rehearsal would have helped us managed the timing we had when we did our presentation.
Not all tools taught can be applied for the things we are designing. In this case, we didn’t have to do a tree test and card sort.
Time is passing by very very fast now. I’m looking forward to p4 and then p5!!!
