Mini Design Brief

The Challenge

We're working on a mobile application for train transit. The current ticketing system requires travelers to have a physical card that is scanned prior to entry on to the train. Previously, in order to refill a card, travelers were required to visit a train station and insert their card into a ticketing kiosk. The transit authority is now allowing travellers to refill their transit card via a new mobile application.

Goals & Objectives

• Design a flow diagram that shows how a user will refill their transit card.

• Mock up two high fidelity screens to show what the interface might look like.

• Show your work! List out the process you'd take to achieve all of these tasks.

Additional Details

• Transit card refills have a maximum allowed balance of $50 dollars and must be refilled in $5 increments.

• Available payment methods include Apple Pay or Credit Card.

• Users may choose to auto-reload their card when it reaches zero funds.

• Spend no more than 3 hours on this project.

Design Process

Step 1 - Research

I started by conducting some quick research into who uses public transportation to gain a better understanding of the app’s users using a research study conducted in 2017. 

https://www.apta.com/research-technical-resources/research-reports/who-rides-public-transportation/

Insights

• The age range of most riders is from 25-54

• Most transit user households include one or more working persons

• A two-person household is the most common type of household among transit users

• 54% of transit users say they have a vehicle available on an ongoing basis

• The most common reasons for using public transit include a preference for the economy and convenience of it (saving money, more convenient than driving, saving time, helping the environment)

Personas and User Stories

With a better understanding of the end user, I generated some quick personas and user stories to keep the design process user centred.

Jane Gormond

"As a grocery manager who commutes to work, I want an easy way to add money to my transit pass so that I don’t keep running out of funds and missing my train."

Ideation

From here I started brainstorming scenarios users would face, possible features, and any thoughts/ideas that came to mind. I also began creating paper wireframes to help visualize the eventual design of the two screens I chose to focus on (the Home Screen and the Card Refill Screen).

Based on the design brief requirements, the short 3 hour design timeframe, and my user research, I narrowed down what to include in the app design and flow chart. 

Essential features included the ability to:

• View available balance on the card

• Log in/out or sign up 

• View recent activity on the transit pass

• Manage payment methods for Apple Pay and multiple credit cards

• Auto-refill a pass when the balance reaches zero

• Load additional funds onto the card in $5 increments up to $50 total

• Manage multiple transit passes from the same account (including the ability to add/delete cards and transfer the balance of one transit pass to another in the case of a pass being lost or stolen) 

• Update account/profile information.

User Flow Chart

Once I decided what to include in the app, I then created the flow chart to detail how users would be able to move around in the app and accomplish tasks.

Rapid Hi-Fi Mocks

Lastly, with a solid understanding of the end user and the layout/flow of the app, I created high fidelity mockups of the Home and Card Refill screens, as well as a quick logo and business name to give the mockups a more authentic look and feel. Once my first iteration was complete I sought feedback on the design (in this case from someone who happened to be in the vicinity while I was completing the task), and changed the account icon at the top of the page from one that was more generic to the one you see below that is more colourful and engaging.

Outcome

As much of my work is under NDA, this short design challenge is meant to highlight my process in a condensed, 3 hours long project like those often used in UX interviews. Although it closely resembles how I approach product/UX design, there are additional steps I take when there is time. 

Some of these steps include: 

• Conducting more in depth research including user interviews and usability testing

• Conversations with stakeholders to clarify product details (for example, in this case I would have clarified aspects of the auto-refill kicking in at a zero balance to make sure there was not the potential for a user pain point of having funds on the card, but not enough to cover the cost of a ticket)

• Other UX tools like storyboarding, competitive analysis, digital wireframes, and low-fi mockups (to name a few) 

Like What You See?

Check out my portfolio at www.daniel-beaudoin.com 

or 

My LinkedIn at LinkedIn at www.linkedin.com/in/daniel-beaudoin-ux-design