Nysse & Nella

A UX case study about an unsolicited merging of Tampere regional transportation mobile apps.

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 info

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

The problem

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 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
 

Current situation

Nysse prevents taking screenshots or recording screen, but you can see some images here. I recorded a short video of the travelcard app Nella. As you can see, it’s a bit outdated, clumsy, and stripped of many necessary features.

What I did

Online Survey

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 learned where people top-up their cards and what type of tickets they buy.

Figuring out the pain points

To test the app’s user experience, I was planning on doing some guerrilla usability testing, but COVID-19 cancelled my plans. So instead I ended up checking out both apps in Apple and Play app stores to find some user feedback and improvement suggestions.

Affinity Diagram

I conducted an affinity map to group similar observations together. The quotes are taken from Nella Mobiili and Nysse Mobiili app store pages (green stickies are for Nella and blue ones are for Nysse).

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 changes I wanted to make, based on the information I had collected so far. I also checked out some of the other cities’ public transportation apps. Taking Nella’s key features (and adding a few new ones) and blending those into Nysse’s existing UI seemed like the most effective solution, so I went with that.

I did some sketching and made a paper prototype which I tested with 2 people who have never used the actual app. Due to COVID-19, in-person testing was not an option, so I decided to move on to a functional wireframe, which I could improve based on feedback.

I built a greyscale, mid-fidelity app and tested it with a couple of people. I did some tweaking based on the feedback, like changed the sub menu order, and implemented a digital travelcard that would coexist with the physical one.

Site Map changes

Before

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.

After

The solution

Main View

  • Changed default view from Buy tickets to Travelcards
  • Travelcard’s name and user group are clearly visible – user avoids confusion between multiple cards
  • Digital travelcard shows detailed information about seasonal and value tickets, such as default zones and balance
  • Clearly visible buttons make travelcard info and top-up options super accessible
Digital travelcard is the first thing a user sees, if they own one.

Travelcard detailed info and travel history

  • Deleting and renaming travelcards can be done in the app instead of the website
  • Push notifications remind the user about travelcard’s date of expiry
  • Travel history available for those who want to e.g. keep track of their travel habits or see the costs of a single value ticket trip
All travelcard details can be found in two tabs, and travel history and value ticket prices are in a neat list.
  • 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 (Ostohistoria ja kuitit) so that it’s more discoverable

Buy Tickets

  • 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

Clickable Prototype

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.

Retrospective

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!