top of page
Ruby Connection
"Swap coffee for your goals"

Using UX Research, an insight was discovered - people wanted to beat the clock and pay back their loans faster so they could save on interest.  This lead to the creation of Coffee or Not - to help people pay back their loan faster or save for a goal. 

 

If a person gave up a daily cup of coffee they could potentially save $3,640 per year or $32,600 in saved interest for the life of a 30-year loan. Users were given a simple choice - would they prefer a coffee or goal (eg. holiday)? If they chose their goal, coffee money saved would be channelled directly to their loan or an account.

Design
MY ROLE

This project took place in 2016, where I contributed as the sole UX / UI Designer and Project Manager.

My vision was to create an application that would create a simple pain-free way of saving money. 

 

I was responsible for leading requirement from internal stakeholders, user research, wireframes, prototyping, information architecture, content strategy, art direction, user testing, recruiting animator and digital agency, UI design and project management.

Discovery
 
Business Requirements
Research
Persona / Archetype
Analytics
 
Design
 
Sketching
Wireframing
Prototype
Information Architecture
Validation
 
User Testing
Amends
 
UI Design
 
Visual Design
Usability Review
My Role
Case Studies
CASE STUDIES

A user’s pain point that came from Pepper Personal Loans research discovered that customers liked to “Beat the Clock” when paying back loans. Customers wanted to pay back the loan faster so they could save interest.

 

The visual identity was to create a trustworthy, simple and fun application that users could trust with their financial information. The colour palette was fresh, vibrant, colourful and bold to communicate important aspects of the mobile application.  An animator Crispe was recruited to create amusing animated vignettes so users could visualise their goals clearly. The images of a savings pig and holiday were to explain the app and to create a sense of playfulness. The characters reassure the user how easy and approachable the application is, with the goal lend a friendly helping hand.

 

I determined the scope of the project through facilitating collaboration between departments like Treasury, data warehouses, risk, legal, marketing and senior management. I engaged an agency to create the mobile application and recruited animator Crispe. Through this, I formulated a detailed project plan and budget for Coffee or Not.

 

My design took inspiration from Nir Eyal's Hook Theory which is a four-step process used to hook users and form habits among them. The four parts of the model include trigger, action, investment and variable reward.

 

  • Trigger: This is the spark for a behaviour that gets someone into a system. There are two types of triggers: external and internal. The external trigger alerts users with something like an email, link or icon. Coffee or Not alerts of a decision through a notification at a time that the user has chosen. Internal triggers happen within the system and are formed as a user cycles through successive hooks while using the product.
     

  • Action: This is the behaviour taken when a reward is anticipated. For instance, the action of clicking on a Coffee or Not’s animation of a goal. When you click that image, you anticipate that you’ll be taken somewhere interesting. This is an important part of the model because it draws upon usability design to drive users to take action.
     

  • Variable Reward: This is the part of the model that allows you to create a craving in users. Rather than using a conventional feedback loop, you can serve up a multitude of potential rewards to hold a user’s interest. In Coffee or Not, there is a different animation of a user’s financial goal that is given randomly in conjunction with verbal congratulations of a decision well made.
     

  • Investment: This is the part where the user now has to do some work. Think of it as giving back to the product, and that can take the form of time, data, effort, social capital or money. In Coffee or Not, after the user has made a decision they are given a tally of their progress. This also allows for gamification, as the user is playing against their immediate desire. Further, they are also given data for their progress in saving money.

Coffee or Not

Workable prototype - click to play 

Mobile Application
1

The user is asked to make a decision at an appropriate time by the user via notification.

2

The user if give a clear visual choice - coffee or a goal they have chosen. The image of the coffee remains static, so in contrast, the animated goal catches the eye and looks more enticing. 

3

I chose a bright punchy colour palette to denote that this is a fun way to save money. The animations were created by artist Crispe and were used to add a sense of playfulness. The animations reassure the user of how approachable Coffee or Not is and that their goal is in easy reach - just one click. 

4

If a goal is chosen, the user is rewarded with an animated visualisation of their goal which is randomly chosen from multiple animations.

 

When coffee is chosen, the application doesn't reprimand and is understanding. Encouragement to continue is given by a score card, that gamify the situation and encourages the user to try again next time. 

5

After the decision, the user is invited to see their progress as encouragement to continue, investing them into the savings process. They are given data on how close they are to their target goal, how much saved this week and money and how many swaps to make their goals. 

Workable prototype - click to play 

Onboarding
1

The saving animation pig is used on the splash page to show that the application is fun and easy, differing it from serious financial applications on the market.

2

There are 4 simple splash screens explaining to the user the value proposition before they are asked join in on a demonstration of how easy it is to use, hooking them in.

3

Once the user has a go, they are asked to be set up. As this deals with financial information, which can be long task, a progress bar of the savings pig moving closer to a bag of money encourages the user to pursue the set up as they have a visual representation on how they will be rewarded.

Onboarding
bottom of page