I got frustrated with an app so I redesigned it 💁📱✨
As a designer, I always try to make something more beautiful if I can, just like as part developer I always try to optimise code, or as a creative strategist I’ll always try to favour solutions with better end value.
And as a usability designer, I try to solve problems. These are, undeniably, mostly people problems.
But people problems aren’t only reserved for everyone else.
A few weeks ago I had to buy a ticket for the train, but I was running a bit late and my train was already about to depart. When I opened my mobile tickets app ready to quickly buy a ticket…*dun dun duuuuun*…
It was a completely new design.
I only just barely managed to secure myself a ticket just in time for the train and was left feeling there was definitely room for some improvement.
Enter ‘Usability’
If you’re new to it ‘usability’ is actually an “old” practice. Ever held a screw driver or any other tool? Usually they have “hand-friendly” handles specially designed to be comfortable and easy to get a firm grip on.
ISO defines usability as “The extent to which a product can be used by specified users to achieve specified goals with effectiveness, efficiency, and satisfaction in a specified context of use.” — Wikipedia
When designing for usability you’re trying to make something intuitive, easy to use, easy to learn and even easy to fail in which usually involves a focusing on its users, their tasks and goals. In our age of technology and information (and competition), the human aspect of design is especially important and many usability design principles have already been formed, tried and tested.
But when the Danish public transportation company DOT launched an update of their mobile tickets app in April with a completely new redesign; instead of making buying tickets easier, it left thousands of commuters with completely new problems. Including myself.
Let’s take a look at how the original app looked before the April update:
Here are the same app screens as the image above with the old design, but in the the new Material Design which came with the April update:
This was the new design I was desperately fumbling around in to buy a ticket which, despite the fact I know my credit card numbers by heart, was neither as quick nor as painless as my situation required it to be. Riding without a ticket results in a fine of 750DKK ($112), so getting on the train and then buying the ticket would be risking it.
One thing is buying a ticket, another is having to show it when the ticket usher asks for it . If you’re in another app, which you of course are because riding the train is boring as hell, you need to click 5–6 times to show the ticket. Phew!
I decided to give the app the usability and design its commuters deserve.
I divided the project into four stages:
- Initial research — identifying the users, their ‘pains’, trying out the app and exploring possibilities
- App features and User Experience — solving these ‘pains’ by focusing on the situation(s) of the user in my redesigns
- Design and Brand Presence — making it look good, too!
- Takeaways —how to work with the app beyond this redesign.
Initial research
Since I don’t have access to DOTs data or their design team, as this is not an official project, I had to approach the user research differently to figure out the problems with the new design. Luckily, there were a lot of reviews publicly available in the app stores.
The app has a rating of 2.0 on the Google Play Store, and 1 star on the App Store. In general, there were a lot of recent single-star ratings, all addressing the problems with the new update:
“Terrible. I missed my train after being forced to upgrade and then spent 10 minutes trying to buy a ticket. I liked the old app — it just worked!”
“I lost my purchases after updating and the new design is not user friendly… I really hate it”
“There are so many things wrong with the new version, it’s more of a punishment rather than an app.”
Ouch. Just ouch.
I’d hate to have these ratings on my own designs, so my deepest sympathies went out to the product team. Some of the reviews were straight up tasteless and insulting, too. But on the positive side, most were really specific and this gave me a lot to work with.
Repeated issues or “pains” from the user reviews
I distilled some of the biggest issues from around twenty of the constructive user reviews and gave each a description as well as a “Risk” and “Gain” rating (see image below). The Risk and Gain rating is mostly a help to myself so I know what to prioritise first:
This “Cost/Benefit” inspired approach to usability optimisation will also help me when I present my findings to the client. Talking about the possible gains of an optimisation is much more constructive than only talking about how bad an issue is. It also helps put the issues in perspective.
My issues are rated in regards to the main feature of the app which is buying a ticket. A high risk means an issue will actually prevent a user from completing a main feature which is bad, really bad. Not being able to log in may sound like a very big problem, but for this app it wouldn’t be a high risk because you don’t have to log in to buy a ticket. Puts things in perspective, doesn’t it?
However, I also felt like the new Material Design was selling the app short. In a redesign I saw the opportunity to integrate the brand a lot more and make the company appear more trustworthy and modern.
The Prepaid Zone Card generally seems like a great feature as well, but it’s not properly incorporated into the complete app experience which could be why people can’t seem to find it and are even unsure if they have one.
Armed with better knowledge of the problems people were having and theories about why they might be having them, I was ready to design.
App features and User Experience
Obviously user interviews and testing is (in my opinion) the only way to fully understand who you’re designing for. I generally don’t do much in Personas because I’m an empathic person who needs to observe and interact with people live. I also tried very hard to maintain my focus on the situation itself while designing.
Designing for the pickle you’re in
I imagined this: You spot your train on the station or you’re late for it, stressed out, sweating from running. You fumble with your phone because you’re always so conveniently clumsy when you hurry.
You need to get a ticket so you can get onto the train. Or you decide to just say fuck it and buy it once inside, even more stressed out than before and thinking about that big fat $112 fine.
But what if the app won’t go online? Crap, your credit card is buried in your wallet in your bag. Good thing you bought that prepaid zone card… But where is it?! How do you use it? No way the doors are closing, you didn’t get that ticket. Now you positively hate that app so you spend the remaining of your trip writing an angry review.
In my redesign I constantly focused on ensuring:
- Smart use of both user data and logic to predict and solve needs
- Easy access to everything with only a few clicks (and within reach)
- Minimise the hassle of buying a ticket, make it faster!
- Maximise communication and visual cues for guiding the user
- Maximise and easy-fy additional sales with “renew” buttons
The app also generally has a structural problem. I needed to work on the information architecture by prioritising as well as making core features obvious and easy to access. Forget about menu drawers and hiding away stuff, let’s get what’s important out there.
Bringing back the original homepage layout
The new redesign of the app has some serious problems, most of which I think could have been avoided by not removing the old app’s homepage features. There’s no longer a “type in destination” feature so you need to actively search on a separate site such as Rejseplanen.dk (danish travel site) to figure it out.
Guiding the users with visual cues
The April design update organises everything in Material Design list views, but the text-only layout doesn’t do much for readability in direct sunlight and has no visual cues for fast communication. Our brains actually process pictures faster than text. Say you wanted a bicycle ticket, your brains would subconsciously be looking for something relating to a bicycle. And now that I’ve said bicycle, you’ll probably instantly notice it in the picture below:
The Prepaid Zonecard is now the default payment option
I quickly decided I wanted to add the feature of paying with the prepaid zone card right away. If a user has paid for a prepaid Zone Card, it’ll be the default selection payment option, saving the user precious seconds.
Type in destination and choose journey to buy tickets (lo-fi mockups)
There’s no way this app should rely on third party apps or pages for users to complete a ticket purchase which it currently does. In order for a user to find the right ticket for their journey, they need to exit the app and enter another or search online. That’s a big no-go.
Revamping the payment flow and differentiating between paying with Zone Card “clips” (default) credit card or mobile payment.
Prepaid Zone Card Pains
A colleague once asked me whilst testing out another app I designed; “Do you really need to include a button for the profile 3 different places in the app?”
My answer was and still is; yes, if you’re working with users who have very different approaches to handling a digital service (called mental models). I’d rather have one time too many than one time too few. And not once in my user tests back then did a user fail in finding their profile, no matter which part of the app they were in.
So I decided to take advantage of every single possibility of integrating the Prepaid Zone Card into each page, because it’s such a central feature of the app, which saves users money. So let’s help them find it and earn some additional sales in the process, shall we.
This is how some of the page sin the app will look with no purchased Prepaid Zone Card:
And here the same pages are with if the user has a Prepaid Zone Card, changes highlighted with a green stroke:
Design and brand presence
Streamlining the app, the website and DOTs brand only seemed like a natural thing to do. The app itself needs to establish as much trust as possible, if it succeeds then people might be more forgiving of the errors which will always be there no matter how well you build and design it.
I further developed the DOT brand in the app redesign, making it more modern and favouring icons and visual cues to guide the user. I liked the idea of keeping the bright pink from the new Material Design as the primary call to action. I also implemented subtle greens, oranges, reds and blues for different kinds of feedback and statuses.
Takeaways
A design and especially an app design is never a finished thing, it’s constantly evolving and getting better as we get more information and data on how our users behave, as well as how tech evolves.
So finishing off, I like to include a list of possible optimisations I personally see great opportunities in:
- One-click adding a bicycle ticket feature to the ticket order page. In Copenhagen we have a lot of lazy bicycle people who take the train 😉
- Help section: I didn’t get to make a whole lot of help pages but I definitely think the whole knowledge base should be revamped as well, integrating the guide from the website, in a light weight version (!) in the app. Most importantly placing the information where it’s relevant.
- Automatic renewal feature which lets users set a limit of zones left on a Prepaid Zone Card which will result in the Prepaid Zone Card getting renewed (example: renewal when there’s only 2 clips / zones left.)
- Buy and pay with (new) Prepaid Zone Card all in one step, lets the user buy a ticket as well as a new Prepaid Zone Card and pay for the ticket with that (zone card 20 clips ÷ 2 zone ticket = new prepaid zone card with 18 clips left)
- Bonus feature: “floating” icon on top of everything else for quick switching between another app and the single ticket view:
Project Overview in Adobe XD:
And that’s it — thank you for reading! I hoped you enjoyed my article and the project as much as I enjoyed making it ✨
Update: A few days after publishing the article I received a message from the mobile payment partner Unwire who worked with DOT on the mobile app April redesign. This project led to some great conversations, a few new updates in the app and even being published on Medium! Thank you all so much for your feedback and likes.
