top of page
Opal_mockup_web.jpg

Opal Travel App Redesign

UI Design |  Information Design | Interactive Prototyping

01.png
Project Overview

“How might we encourage people to use the Opal Travel App more when they need to Top Up and plan a trip?”

Most of the users found that Opal Travel App cannot satisfy their needs, in regard to two main actions: Top Up and Plan a Trip. 

There has been a lot of complaints in regards to the “Top-Up delay” issue, plus most of the people do not realise there is a trip planning function in the app, therefore, most of the user will just use a third-party app to complete their trip planning.

ryan-tang-HrBNsh-wzN8-unsplash.jpg
02.png
Task

Review and redesign the user flow and user interface, to improve the user experience and brand perception, ultimately encourage people to use the app more frequently when they are planning a trip in Sydney / NSW.

03.png
Approach

 Learn → Analysis → Organise → Design → Iterate

opal_approach.png
04.png
Problem

“I don’t trust it, it always delays my Top-Up. Did you say it has auto Top Up and low balance notification? And also a trip planner? Where?”

Most of the user said that they have had an embarrassing experience with Opal Travel App due to its non-instant Top Up mechanism. The Top-Up may need the user to wait up to 60 minutes before the credit can be actually used, and the public transport will stop you from tapping on if your Opal card has low balance / cannot meet the minimum amount. 

While Opal Travel App does provide an alternative solution for its functional defect, which is Auto Top-Up and Low Balance Notification, but most of the user said they have never been told how and where they can enable the Auto Top-Up and Low Balance Notification. 

 

Besides, the trip planner is also not as popular as the design intended, because most of the user never know there is a trip planner. Most of the user said that they will only focus on the landing page, which they can only recognise there is “Top-Up” function and some notifications button.

road-trip-with-raj-J61Sh5YrQho-unsplash.
05.png
Solution

“Top-Up Opal card and plan trip at a glaze.”

Due to the low awareness of Auto Top-Up, Low Balance Notification and Trip Planner, the app needed to be redesigned on user flow and interface. 

 

The new interface will bring the two most important functions to the landing page:

  1. Top Up

  2. Trip Planner

 

Which will increase the awareness of the function and simplify the user flow at once, lower the probability of getting the user into embarrassing experience caused by the defected function - the non-instant Top Up. 

 

Also, the user flow and the interface is simplified and restructured according to the information architecture, user reading flow and the feature prioritization, with a more focus and less distraction interface will help the user to find what they are looking for in a shorter and easier way.

Opal_lineup.jpg
06.png
Interactive Prototype

Alternative Link to Prototype:

https://invis.io/M8XQVZZ39NU

Tasks

  1. Add a new card to the Opal Travel App
     

  2. Top Up $20 to Tammy's Opal card, using the preset credit card 
     

  3. Set up Auto Top Up $40 when Tammy's Opal card balance is below $10
     

  4. Plan a Trip and obtain detail itinerary
     

  5. Check how much you have spent in the last trip 

07.png
Process

“User experience project never end, it keeps evolving.”

In this 2-week sprint, I have conducted Interface Analysis, User Flow Review based on the insights from the previous project before getting into the design part.

flow_1.jpg
flow_2.jpg

From the skeleton we have developed from the early stage, the project entered the design stage which first explored the new user flow based on what are the key features of this app.

sketch_0.jpg
sketch_1.jpg
sketch_2.jpg

After the design stage, the interactive prototype was then placed in the usability test to learn from the angle of the user, to justify and to refine the prototype.

bottom of page