Published on <a href="http://ift.tt/2qUBtl6">| Prototyping: From UX to Front End &mdash; Medium</a> Signe Roswall <img alt="" src="http://ift.tt/2qVcPyw">(Re)designing an app into a more user friendly, intuitive interface with more brand presence.
<blockquote>Update: I actually received a message from Lars Cimber, VP of the mobile payment partner <a href="http://ift.tt/2qanxUX">Unwire</a> who worked with DOT on the mobile app April redesign (which I here did a redesign of) and this project led to a great conversation and even being published on Medium! Thought I’d share this with you guys, thanks so much for your likes and love! Now, on to the article!</blockquote>
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 reserved for everyone else than me just because I’m a usability designer, just as it wasn’t a few weeks ago when I had to buy a ticket for the train, and my train was already about to depart.
<img alt="" src="http://ift.tt/2qV4dbd">Kurt Cobain’s train left long ago I think
<h3>Enter ‘Usability’</h3>
The Danish public transportation company DOT (Your Public Transport) recently launched an April redesign of their ticket app with an all-new, Material Design interface, which left thousands of travellers with completely new problems, including myself.
If you’re new to the concept; usability is how well a design solution — or even a real-life product such as a pair of scissors, performs in terms of being easy (or even pleasant) to use, intuitive, ergonomic and useful for its key goals or users, in specific situations — such as when you’re cutting paper.
Let’s take a look at first how the original app looked before the April update/redesign (“v 1,0” first image) and then the new design that came with the April update/redesign (“v. 2,0” second image) both which I’ve based my own “v 3.0” redesign on:
<img alt="" src="http://ift.tt/2qanyrZ">The old app (before the April update) may not be too pretty but it actually did a number of things right usability-wise<img alt="" src="http://ift.tt/2qVa9kx">The April update instead favours a more clean Material Design but abandons 2 core functions
Back on the train station, I was desperately fumbling with my phone to buy a ticket from the app 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. To top it off, when you finally have to show your ticket and if you’re in another app you’ll need to click 5–6 times to get back into the single ticket view. Phew!
So I decided to look into it, and give the app the usability and design its travellers deserve.
<img alt="" src="http://ift.tt/2qanyZ1">“If only you knew what I got in store for you guys!”
<h3>I decided to divide the project into four stages:</h3>
<ul>
<li>Initial research — identifying the users, their ‘pains’, trying out the app and exploring possibilities</li>
<li>App features and user experience — solving these ‘pains’ by focusing on the situation(s) of the user</li>
<li>Design and brand presence — making it look good, too.</li>
<li>Takeaways —how would I work with the app beyond this redesign.</li>
</ul>
<h3>Starting off: Initial research</h3>
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 available publicly on the different app stores. The app has a rating of 2.0 on the Google Play Store, and 1 star on the App Store, which is a bit low in my opinion. There are a lot of recent single-star ratings, all of them addressing their problems with the new redesign:
<img alt="" src="http://ift.tt/2qUZl5T">The app currently has a rating of only 2.0 in the Google Play Store. On App Store, the app only has 1 star.
A lot of the reviewers were actually asking for specific features back, but this is rarely the only answer. If the app has a general problem with its core structure and navigation, which I suspected it might, putting in more features may just make things worse.
<h4>Repeated issues or “pains” from the user reviews</h4>
I distilled some of the biggest issues from around 20 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 which and what to prioritise first, in case there’s a tight deadline. This “Cost/Benefit” inspired approach to usability optimisation will also help me when I present my findings to the client, because usually that’s a concept business people understand. Also, 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: buying a ticket. A high risk means an issue will actually prevent a user from completing a main feature, which you could argue makes the entire app a failure. A high gain means solving an issue will result in the user better completing the main feature.
<img alt="" src="http://ift.tt/2qatEsg">
So basically 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? This way I can chop up the work ahead into smaller pieces and approach them separately.
However, I also felt like the new Material Design sells the app short; in a redesign I saw the opportunity to integrate the brand a lot more and make the company more visible in the app through better brand presence. Hopefully this will establish trust between company and user, which might even add to the user’s patience, making them more forgiving.
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.
<h4>Investigating these pains in the app myself</h4>
Trying out the app myself for the first time with my usability glasses on, I recognised a lot of the problems mentioned in the user reviews.
<h3>App features and user experience</h3>
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.
<img alt="" src="http://ift.tt/2qUIUqr">Homescreens from the April update (left) and the old design (right) I reintroduced the old features into my own redesign.
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.
<img alt="" src="http://ift.tt/2qVcPyw">
The April design update organises everything in Material Design list views, but the text-only based layout doesn’t do much for readability in direct sunlight and has no visual cues for easy processing of information (the brain processes pictures faster than text). Say you wanted a bicycle ticket, your brain would subconsciously be looking for something relating to a bicycle.
<img alt="" src="http://ift.tt/2qatYXZ">Updating the Material Design list views into more visual layouts which requires less brain power usage⚡️
In my redesign I constantly focused on ensuring:
<ul>
<li>Smart use of both user data and logic to predict and solve needs</li>
<li>Easy access to everything with only a few clicks (and within reach)</li>
<li>Minimise the hassle of buying a ticket, make it faster!</li>
<li>Maximise communication and visual cues for guiding the user</li>
<li>Maximise and easy-fy additional sales with “renew” buttons</li>
</ul>
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 or User stories (at least not on paper) because I’m an empathic person who needs to observe and interact with people live.
But for this demonstrative project sadly I couldn’t do a whole lot of user interviews or testing, so I’m relying mainly on my own prior experience and the invaluable words of the usability/design giants, and I generally tried to focus a lot on the situation itself instead.
<h4>Designing for the pickle you’re in</h4>
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 of course always clumsy when you hurry. Just think about the woman from the Shining, she was so clumsy she dropped all her acting skills!
<img alt="" src="http://ift.tt/2qUIUGX">Okay maybe that’s even a tiny bit over the top.
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, still stressed out and maybe even more so because now you’re doing something illicit. (Before-mentioned 750DKK/$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… So, how do you use it?! No way the doors are closing, you didn’t get that ticket and now you positively hate that app.
<h4>New feature: The Prepaid Zonecard is now the default payment option if the user has one and there are enough prepaid zones left.</h4>
<img alt="" src="http://ift.tt/2qa7VRf">Adding the Prepaid Zone Card as the default payment option when the user has one makes buying a ticket very fast.
I quickly decided I wanted to add the feature of paying with the prepaid zone card right away with no need to reveal secret hidden stuff.
<h4>Also an old new feature (rough mockups): Type in destination and choose journey to buy tickets</h4>
<img alt="" src="http://ift.tt/2qVweja">
There’s no way this app should rely on third party apps or pages for users to
<h4>Also revamping payment flow and differentiating between paying with “clips” or credit card (DKK)</h4>
<img alt="" src="http://ift.tt/2qaiHao">
<h4>Prepaid Zone Card Pains</h4>
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.
<img alt="" src="http://ift.tt/2qV0ydC">Image above shows how the app looks with no purchased Prepaid Zone Card. Below are the changes if the user has a Prepaid Zone Card:<img alt="" src="http://ift.tt/2qahWOh">The Prepaid Zone Card is actually present in a few other places as well, these are just a few examples
<h3>Design and brand presence</h3>
<img alt="" src="http://ift.tt/2qVfcl2">Fancy-smanchy mockup of DOTs website and my App redesign looking as if meant for each other.
Streamlining the app and the website / current 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.
<img alt="" src="http://ift.tt/2qagJXu">I created a quick Moodboard over some of the DOT website UI (Copyright their respective owners). Screenshots from <a href="http://ift.tt/1sbwZ6s">http://ift.tt/1sbwZ6s</a>
I further developed the DOT brand in the app redesign, making it more modern and favouring icons and visual cues to guide the user (which are actually completely missing on the website). I loved the idea of the bright pink as the primary call to action, as well as having subtle greens, oranges, reds, blues for different statuses.
All in all I think I managed to create a beautiful design which kinda makes me sad I don’t have a public transportation app.
<img alt="" src="http://ift.tt/2qa6lPr">Some of the UI elements from the app which are clearly heavily inspired by the website UI.
<h3>Takeaways — what to work on from here</h3>
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:
<ul>
<li>One-click adding a bicycle/dog ticket feature to the ticket order page</li>
<li>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.</li>
<li>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.)</li>
<li>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)</li>
<li>Bonus feature: “floating” icon on top of everything else for quick switching between another app and the single ticket view:</li>
</ul>
<img alt="" src="http://ift.tt/2qUPai4">Enjoy your Facebook or Netflix and quickly swap to your Ticket view with the floaty button
<h4>Project Overview in Adobe XD:</h4>
<img alt="" src="http://ift.tt/2qa6mCZ">The full overview over my Adobe XD file. Phew!
You can try out the App Prototype @ <a href="http://ift.tt/2qUZm9X">http://ift.tt/2qUZm9X</a> (if you get stuck just use the arrow buttons to go through the screens.)
<blockquote>That’s it! I had a fun time creating this redesign, if I missed anything or if you have some cool tips, feel free to drop a comment. Thanks for reading!</blockquote>
<img src="http://ift.tt/2qaxQsd" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou">
<hr>
<a href="http://ift.tt/2qV4hrw">I got frustrated with an app, so I redesigned it ⛈💁✨📱☀️</a> was originally published in <a href="http://ift.tt/2cAqCpx">Prototyping: From UX to Front End</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.

I got frustrated with an app, so I redesigned it ⛈✨☀️

Top Stories