Disclaimer: I am not affiliated with Tampere city public transport in any capacity.
Note: Majority of the users are native Finns, so at least for now all the user interview materials and quotes are in Finnish.
Project type: Case study, Unsolicited redesign
My role: Research, Analysis, Design
Tasks included: Affinity diagram, User persona, Sketching, Paper prototype, Site map, Interactive prototype
Tools used: Pen & paper, Figma
Tampere regional transportation has two mobile apps for traveling by bus: Nysse and Nella. Nysse is for single and 24h mobile tickets and Nella is for travelcards, aka. seasonal and value tickets. Having two separate apps seems confusing, and both apps seem incomplete and inconsistent. I have no doubt the two apps will be combined in the near future, but meanwhile I envisioned what it would be like.
Public transportation should be easy, so I observed issues with the apps and pursued this redesign as an opportunity to improve both my skills and the user experience.
I had two main motives for this case study:
- Facilitate a better user experience for Tampere regional transportation apps by combining them and adding some longed for features
- Try to implement as many steps of a full UX process as I naturally could, taking the various roles involved in designing a product
Nysse prevents taking screenshots or recording screen. You can see some images here.
However, I recorded a short video of the travelcard app Nella. As you can see, it’s somewhcat clumsy, inconsistent, old-fashioned and stripped of many necessary features.
Understanding the People
I conducted a short online survey to find out a little bit about the people who use Tampere travelcard, and how they use it. I posted the survey to local Facebook group and got 350 responses.
Most popular ways to top-up were (people could choose up to two preferred methods):
- Web site 68%
- R-kiosk 33%
- Mobile app 18%
All age groups prefer same methods for top-upping.
- 56% buy only 1 ticket type regularly.
- 72% buy Value tickets either as their only option or in addition to other ticket types.
- 21% also took care of someone else’s travelcard top-upping.
Guerrilla Usability Testing... Almost
To test the app’s user experience, I was planning on surveying people at Tampere regional transportation office, asking them to perform a few predefined tasks in the Nella Mobiili Android app as I recorded their actions and took notes. Some of the planned tasks and possible interview questions were:
- Finding travelcard info
- Finding available ticket types
- What kind of tasks do the users typically do?
- What do the users expect to see first when they open the app?
Unfortunately, at this point the coronavirus social restrictions were applied, and I could not conduct this survey nor any additional interviews.
What I did instead
I ended up checking out both apps in Apple and Play app stores to find some user feedback and improvement suggestions. This is what users had to say concerning buying tickets, payment, using their tickets and the apps in general:
“Saisi 5 tähteä, jos olisi mahdollisuus maksaa myös MobilePaylla, Pivolla tai muulla vastaavalla.” (Nella Mobiili)
“Miksi sovellukseen ei voi lisätä voimassa olevaa bussikorttia?” (Nysse Mobiili)
“Jos turkulaiset osaa ohjelmoida Mobile Payn toimimaan Fölin mobiiliappiin niin luulis onnistuvan tamperelaisiltakin.” (Nysse Mobiili)
“Vanhojen korttien poisto tai nimeäminen ei onnistu.” (Nella Mobiili)
I conducted an affinity map to group similar observations together. The quotes are taken from Nella Mobiili and Nysse Mobiili app store pages.
Identifying the problems
The following three issues stood out the most:
- Two separate apps caused a lot of confusion and frustration; people needed features from both
- Both apps were missing important payment options
- In Nella people wanted to rename and delete their travel cards
Persona of a typical Nysse user
I created two user personas to put faces on Nysse’s target users and to visualize their behavior and motivations. Since I could not do user interviews, I had to make some assumptions.
Ideation & Prototyping
I listed all the features I wanted to add, based on the information I had collected so far. I also checked out some of the other cities’ public transportation apps. I simply wanted to take Nella’s key features plus a few new ones, and pretty much blend those into Nysse’s existing UI, since that would be the most cost-effective solution.
I sketched out a few solutions on paper for the most important stuff before committing to high fidelity designs. I also made a paper prototype and tested it with 2 people who have never used the actual app. Since wider face to face testing was not an option, I soon decided to move on to a functional wireframe, which I could improve based on feedback.
I built a greyscale, mid-fidelity app where one could test the changes I made, and gave the instructions for testing for a couple of people. Based on that feedback, I decided to change the sub menu order, so that travelcard is always the default view (see Site Map changes). I also implemented a digital travelcard that would coexist with the physical one. After that I was ready to make a high fidelity mockup.
Site Map changes
The original structure did not seem to be an issue, it just needed some tweaking to make space for the travelcard features. Since my goal was to not change the existing app too much, I tried to place Nella Mobiili features where they would naturally fall in the existing app. Since a lot of people use travelcards, I put the travelcard section as the first tab in both Buy and Ticket sections. The green dotted-line boxes represent features brought from Nella.
In the existing Nysse app, Buy tickets is the default view when opening the app. I changed Tickets to be the default view, more specifically Travelcards, as the majority who use public transport regularly own a travelcard.
- Travelcard’s name and user group are clearly visible – user avoids confusion between multiple cards
- Seasonal ticket section shows ticket type, default zones, date of expiry, and days left so that the user doesn’t have to do the math
- Value ticket section shows balance and default zones
- QR helptext added
- Clearly visible buttons make travelcard info and top-up options super accessible
Travelcard detailed info and travel history
Some features, like changing a travelcard’s name or deleting it from a user account cannot be done in the current travelcard app Nella. User has to go to the website to touch those. I brought these features to the mobile app and added push notifications.
Note: email notifications are currently available on the website, but emails are so much easier to miss, and the feature is not very easy to find either.
- Deleting a card from a user account is super easy
- Travelcard’s name can be edited easily
- I added push notifications to remind the user about travelcard’s date of expiry
I also made travel history available for those who want to keep track of their travel habits or see the costs of a single value ticket trip (for example, I never remember how much is my fee, so I can’t calculate how many trips I can afford with the balance left on my value ticket unless I go check the prices).
I combined the single and 24-hour tickets under one tab, and this gave me space to move purchase history and receipts to the tab bar. In the actual Nysse app there’s a button for that in the ticket view, and it seems just out of place.
- Travelcards and single tickets have their own tabs
- Purchase history and receipts used to be a separate button in the tickets view, I moved it to the tab bar so that it’s more discoverable
Purchasing travelcard tickets in the existing Nella travelcard app is more limited than in it’s browser version. I brought 90 day tickets and benefit tickets to the mobile app. I also added more payment options.
In the current existing app deleting a payment card requires the following steps: Info -> My settings -> Payment cards -> Delete a payment card. I made deleting more accessible by moving all payment card related options right next to where you actually use them. This would also include editing the card info, e.g. when a payment card is renewed.
- I added a third tab called Travelcard (Matkakortti) and set it as the default view
- All options can be found in the app, no need to visit the web site for benefit tickets and such
- I added more payment methods and put all payment card related options here, plus added the option to edit payment card info
I used Figma to create a functional prototype of all the screens relevant to the changes I made. Please note that it works best on a desktop browser, as it does not fit correctly on most mobile device screens.
This was a lot of work, and I faced some minor inconveniences on the way. One thing I would change if I could: doing more actual research and validating my decisions with usability testing. However, this was a great opportunity for me to practice my skills and work on my understanding of the overall process, and I think it served me well.
I hope you enjoyed reading about my project!