Client Project | Noobil - Ai Lee, Marita Tate, Suzan James, Shufan Ash

A new onboarding experience Team 2: Shufan, Suzan, Maria and Ai

UX Team

Ai Lee

Maria Tate

View LinkedIn ● ● ●

Team lead Client liaison UX/UI Designer

View LinkedIn

● ●

UX/UI Designer UX Researcher

Suzan James View LinkedIn

● ●

UX/UI Designer UX Researcher

Shufan Ash View LinkedIn

● ●

UX/UI Designer UX Researcher

Agenda Our journey so far...

Initial proposed solution Usability test Final product & demonstration Where to from here?

Our journey so far Client’s initial brief Change the way people view and use bill

Improve the onboarding experience

Understand the benefits and process of noobill

User feel confident to proceed

Improve the conversion rate User successfully switching to noobill’s service after signing up

Research conducted

10

interviews

42

surveys

+ Desktop research and competitor analysis

Key insights Users are attracted to noobills service but aren’t prepared to convert until they understand how it works.

Users are seeking transparency, knowledge, and trust from both noobill and the proposed suppliers

Users need reassurance that their personal information remains secure and are kept informed on the conversion process.

Problem Statement Potential users are apprehensive about committing to noobill as they are seeking clarity and transparency on what the benefits are by switching to the new supplier and how privacy and security are guaranteed, but faces a lack of information.

Personas Pain points:

"I am so excited to see the deals and savings, but I want to make sure I am not falling into a sales trap."

James, 26 Conservative

Adventurous

Skeptical

Optimistic

Planner

Improviser

●

Lack of in depth explanation about how the best deals are formed with alternative suppliers.

●

Doesn't understand how the savings are calculated, especially when the deal is calculated before uploading his current bill.

●

The onboarding process is confusing and unclear, as he does not know if he have been locked into a deal or not.

●

Too much reading and too many steps

●

Terms & Conditions are hidden making him feel uncomfortable

Personas Pain points:

"I can see how noobill can potentially save me time and money, but how do I know I can trust the company?"

Sandra, 39 Conservative

●

Lack of information regarding noobill as a company: how do they do it? what's the catch?

●

Lack of information regarding the conversion process

●

Feels uneasy about uploading all of her personal data and bank account details to noobill, a company she does not know much about.

●

Sceptical about the security protection of the app, such as how noobill manages cyber attack and other security issues.

●

Finds the home page confusing

Adventurous

Skeptical

Optimistic

Planner

Improviser

Design challenge ●

How might we improve the onboarding experience for potential users so that they understand what the benefits are of switching to the new supplier?

●

How might we demonstrate the credibility so that users can build trust with noobill in terms of privacy and security?

●

How might we improve onboarding experience for users to have better clarity on the conversion process?

Initial proposed solution 1

2 Preliminary onboarding

How it works 3 Initial set up

Home 4 Switching supplier process

5

Overall increase privacy and security

Usability test

Participants ● ●

9 users 28–45 years old

Goal ●

Successfully converting users to use noobill's proposed supplier

Measure of success ● ●

users feel confident to proceed users feel confident to convert to noobill’s proposed supplier

Usability test • onboarding Before

After Findings: Too much text and reading involved

Design iteration: Reduced text

Feels overwhelmed by the information

Provide options for more info if needed Merged content from ‘How it works’ pages

Usability test • onboarding Before

After Findings: After the preliminary onboarding, users land on the log in page where they can find more info under ‘How it works’.

Users were confused as they thought they have already seen ‘how it works’

Design iteration: Removing ‘How it works’ and merging content with preliminary onboarding.

User can review the onboarding pages again on the top right button.

Usability test • home page (First time user) Before

After Findings: “12 months guarantee” message confusing and not enough explanation

Design iteration: ● Made the copy shorter and clearer ●

Added the “learn more” button so users will be able to check out the details

Usability test • home page (First time user) Before

After Findings: Some users are distracted by “3 things to do”, and missed the call out button “Start a service”.

Design iteration: Removed the “3 things to do” section from the home page.

Usability test • home page Before

After Findings: ● Most users don’t understand the term “Ongoing optimisation” ●

Most users are skeptical of clicking on “Activate now” as they want to find out more about this first

Design iteration: ● Changed the phrase to “Ongoing price checker” to make it more clear ●

Changed “Activate now” button to “Check details” to motivate user going to the next step

Usability test • conversion to new supplier Before

After Findings: ● When users read through the comparison prices, some users missed the top saving numbers. ●

Some users like to know the saving percentage number of each price.

Design iteration: ● Moved the saving prices into the relevant comparison section and added “save” to make it clear to users. ●

Added a small percentage figure to each of the price bars.

Usability test • conversion to new supplier Before

After Findings: ● When users go through “add ID” page, some users feel like they have to add three IDs.

Design iteration: ● Used a selection bar instead of three buttons.

Results Preliminary onboarding

Initial set up

78%

100%

of users have a clear understanding of noobill’s function and objective

of users found the initial set up intuitive and clear

7 out of 9

100%

have confidence to proceed to the following stages

of users rated ease of set up greater than 4 out of 5

78%

6 out of 9

are pleased with the onboarding experience

rated the initial set-up 5 out of 5

Results (continued) Supplier switching process

Conversion

89%

89%

found the price comparison useful and visually informative of noobill’s offer

78%

had a very clear understanding of the supplier switching process

successful conversion rate

78%

rated the services noobill provides as very beneficial

The new onboarding experience

Click here to view prototype Click here to view prototype video

Where to from here?

Urgent

Semi-urgent

Copywriter ● Human language ● Less jargons ● Personable ● Proofreading

Referral program ● Using word of mouth to get friends of existing users on board ● Giving incentives for existing users to leave reviews ● Incentive to stay on the app eg. point system, carbon offset

Long-term ● ●

Accessibility considerations Continue noobill’s current development plan with increasing more bill management

It’s very encouraging that users seem committed to noobill for the long haul. We had multiple comments that users were disappointed that the various functionalities that noobill is already planning on including in the future are not yet in place.

In summary, we think that noobill, pending amendments, could be a market leader in the fintech industry and our users seem to agree.

Thank you

Break slide to be remove

A new onboarding experience Team 2: Shufan, Suzan, Maria and Ai

UX Team

Ai Lee

Maria Tate

View LinkedIn ● ● ●

Team lead Client liaison UX/UI Designer

View LinkedIn

● ●

UX/UI Designer UX Researcher

Suzan James View LinkedIn

● ●

UX/UI Designer UX Researcher

Shufan Ash View LinkedIn

● ●

UX/UI Designer UX Researcher

Client’s initial brief 1 Change the way people view and use bill Understand the benefits and process of noobill

2

Improve the onboarding experience Wireframes deliverables that can be implemented within weeks

3 Improve the conversion rate User successfully switching to noobill’s service after signing up

Discover

● ● ●

Project scoping Research methods Problem statement

Project scoping Scoping framework and Project Canvas were developed to get a bird’s eye view of noobill’s objective and motivation, and to get a better understanding of the challenges, constraints, deliverables and any other requirements.

Click on the image to go to the source document in full resolution

Research methods

10

interviews

42

surveys

+ Desktop research and competitor analysis

Problem Statement Potential users are apprehensive about committing to noobill as they are seeking clarity and transparency on what the benefits are by switching to the new supplier and how privacy and security are guaranteed, but faces a lack of information.

Define

● ● ● ● ● ● ●

Competitors & Opportunity Affinity Maps Key Insights Empathy Maps Personas Customer Journey Maps How Might We Questions

Competitor Analysis There are a few applications out there that offers users the ability to consolidate bills, set reminders and organise finances in one place but we’re yet to come across one that can guarantee the cheapest providers, Setting noobill aside from the competitors.

We also did some research into the onboarding process and flow of the competitors.

Competitor Analysis strengths social proof, everywhere

upload a bill by taking a photo directly from the app

sleek app which reunites and organizes all finances, accounts, bills in only one place

Four flexible fortnightly instalments.

No interest or late fees.

security is one of their first priorities, the application being regularly tested by well-known companies such as McAfee, VeriSign or TRUSTe.

Check your bills any time from your account. Your bill will be updated when it's processed and again when paid. A receipt number will be populated when your bill has been paid.

bills are paid directly from your budget

create a repetitive reminder of the due-date

Doesn’t save any information about users’ password or other private stuff so that privacy will not be affected.

A nice thing is that developers put a big importance on the security aspect and they permit users to create a security code in order to access the application.

Competitor Analysis Opportunities

Nowadays, time is the main issue and when this vital resource becomes more important than ever, you hardly have time to manage and organize your bills properly.

Being so busy all the time, we have to find help in other places.

Lemonade Inc. is a Public Benefit Corporation and certified B-Corp. Social impact is part of our legal mission and business model - not just marketing fluff.

Onboarding Research strengths Benefits-Oriented Onboarding focuses on the benefits of the app and the value it can provide to users. The purpose of this method is to increase your conversion rate and motivate people to use your app.

All the copy is clear, concise, and adds value to a succinct and selective onboarding experience that gives new users the lay of the land without overwhelming them with too many features.

The product tour starts with a “choose your own adventure” modal that lets users opt in to onboarding experience that fits their needs. This sort of segmentation lets users feel like they’re in control of their own onboarding, while allowing you to provide more tailored experiences.

The tooltips look native to product, but have enough visual contrast to stand out from the main UI

Function-Oriented Onboarding teaches users how to execute common functions using your app. Rather than providing an overview of each tool, this method takes a deeper dive into how each feature is used to accomplish a goal.

The best interactive guides and walkthroughs teach users about the product by having them use the product itself. Learning by doing is the best approach.

the user is given timely information that helps them understand the basic functions of your app.

A “Getting Started” checklist helps users prioritize their first actions in the platform and motivates them to complete the onboarding process by tapping into a number of powerful psychological principles.

Onboarding Research Opportunities onboarding is the process of introducing new users to your app, ideally with the goal of retention and long-term engagement.

Your interactive walkthrough should focus on one or two key events.

include a demo that allows users to test actions before moving on to the next step.

step-by-step tutorial of your app direct and encourages users to take action

Product tours are not very effective. This is because they simply dump a load of information at you, but don’t engage you in any way.

avoids the urge to drag new users through every single feature one by one, and instead focuses its onboarding experience on providing context to a few essential features.

Affinity map

Affinity map

Mapping out the end-to-end onboarding flow of noobill v2.1 from sign up to conversion to gain a better understanding.

Observed habits and behaviour 86%

are content with their current energy provider

57%

have visited a comparison website

1 in 2

Changed suppliers 12 months ago Users have experienced an overdue bill with 68% selecting ‘I forgot’ as the reason Users check their bills only occasionally, and 12% never check their bills

OPPORTUNITY

60%

When asked if user would trust a third party to pay and organise their bills

Key insights Users are open-minded with trying new methods

●

Users are not actively searching for novel methods of bill management as they are unaware of the market options

●

●

An understanding of supplier credentials and quality assurances provides users with reassurance

●

Comparisons of competing suppliers is a key information that reassure and encourages users to commit

●

Providing a sense of security is crucial

The application is appealing to users, however a lack of understanding of noobill as a company prevents further progression

●

Users are seeking transparency, knowledge, and trust from both noobill and the proposed suppliers and how information is gathered

Users want confirmation and clarity on the supplier commitment process.

Empathy map

Primary persona (Sandra)

Secondary persona (James)

Customer journey

How might we?

1.

How might we improve the onboarding experience for potential users so that they understand what the benefits are by switching to the new supplier?

2.

How might we demonstrate the credibility so that user can build trust with noobill in terms of privacy and security?

3.

How might we improve onboarding experience for user to have a better clarity on the conversion process?

Develop

● ● ● ● ●

Ideation MVP Matrix Wireframes Client Feedback Information Architecture & User Flows

Ideation We ran a collaborative ideation workshop to generate ideas based off of our HMW questions.

Techniques used included Brainstorming and Crazy 8s.

MVP Through the MVP and dot voting workshop, the initial design solutions have been created, such as: ● ●

● ● ●

Creating the price comparison pages for user

Explaining “how it works” up front so users have a clear idea before signing up Providing Privacy policy, PDS, etc.

Requesting on mandatory info 2 factor authentication when signing in or creating account, etc.

Wireframes Proposed solutions and scope presented to clients at Week 3 meeting

noobill’s v2.1 flow Onboarding

Initial set up

Switch supplier

Home There are several pain points for users in the current (v2.1) flow of the noobill app.

You onboard the user, which then goes straight into their account set up followed by the supplier switching process, before reaching the home page.

How it works

User flows (pre usability test) 1

2 Preliminary onboarding

How it works 3 Initial set up

We came up with the proposed flow as the solution to the brief. With the scope of our project in mind, we suggest focusing on these 5 key features that will help the user feel more at ease and reassured as they journey through the process.

5

Home 4 Switching supplier process

Overall increase privacy and security

1 Preliminary onboarding Highlight noobill’s main features and Point of difference so that it is clear to users what the functionalities are.

All bills in one app

Safety and privacy

Auto compare for best rates

Free to use, always

We pay now, you pay later

2 How it works Provide clarity and transparency to users on the step-by-step guide of how noobill works so that users know what to expect.

More detailed version than the preliminary onboarding screens It's a fun explanation across 7 screens (with animations) It’s quite visual, for those that don't want to read too much.

1.

Uploading your bill 2.

Comparing the market 3.

Switching providers 4.

How the bills are paid 5.

How noobill makes their money and how you can have no fees.

6.

How noobill decides which is the best offer?

7.

Conclusion How reverse-auction works

How noobill gets the best price

What’s the catch?

3 Initial set up Improve the initial set up experience so that it is less cumbersome for users which will increase conversion rate and avoid drop offs.

Requesting only mandatory information

Short and sweet

Get user to the dashboard

Reduce drop-off rates

4 Switching supplier process

Improve the supplier switching flow by providing more information so that users have more clarity and can make an informed decision.

Implementation of comparison table Readily available information on proposed supplier Updated flow and order

Reduce drop-off rates

5 Overall increase in trust, privacy and security Privacy and security was a common issue form all of our research. All of the pain and exit points in the customer journey was a result of uncertainty around this issue. Increasing security measures builds trust to the users.

Updated copy / no spelling errors Created username for login Multiple payment methods

Requesting only mandatory information 2-factor authentication Visible Ts&Cs

Increase awareness of noobill as a company

Explanation of Cloudflare

Customer journey of our proposed solution

Client feedback Overall feedback from the client was positive.

We had another session with the client to: ● Clarify the essential features needed to proceed with the proposed solution ○ Emphasise the importance and reduced pain points of the updated flows by showing two customer journeys → our proposed flow vs v2.1 ○ Ensuring the proposed solution is feasible eg. if it is possible to provide other payment options to users ● Cement our scope ○ Made it clear to George that we will be working within the scope of v2.1 which is what he initially briefed ● Re-emphasise the importance and need of a comparison element during supplier switching process ○ Provide transparency for users ○ Client was unsure of this solution, we decided to bring it onto usability test

Information Architecture

User flows Preliminary onboarding

Create Account

Start a service

Upload Bill

Comparison

Switch Supplier

noobill Customer

●

Deliver

● ● ● ●

Design system and style Guide Usability test Results Final Prototype Where to from here?

Design system and style guide We used the basic design elements of noobill’s existing branding style, and applied the dark background colour through the entire design. The dark grey colour represents a feeling of formality, trustworthy which fits the purpose of this project. We have tried to be inclusive with all the users and keep accessibilities standards in mind when designing it.

Usability test

Participants ● ●

9 users 28–45 years old

Goal ●

Successfully converting users to use noobill's proposed supplier

Measure of success ● ●

users feel confident to proceed users feel confident to convert to noobill’s proposed supplier

Usability test The overall feedback were quite positive which gave us confidence in the direction that we’ve pursued, there were a couple of minor changes which we then implemented.

Click here to view the usability test questionnaire

Usability test • onboarding Before

After Findings: Too much text and reading involved Feels overwhelmed by the information

Design iteration: Reduced text Provide options for more info if needed Merged content from ‘How it works’ pages

Usability test • onboarding Before

After Findings: After the preliminary onboarding, users land on the log in page where they can find more info under ‘How it works’.

Users were confused as they thought they have already seen ‘how it works’

Design iteration: Removing ‘How it works’ and merging content with preliminary onboarding.

User can review the onboarding pages again on the top right button.

Usability test • home page (First time user) Before

After Findings: “12 months guarantee” message confusing and not enough explanation

Design iteration: ● Made the copy shorter and clearer ●

Added the “learn more” button so users will be able to check out the details

Usability test • home page (First time user) Before

After Findings: Some users are distracted by “3 things to do”, and missed the call out button “Start a service”.

Design iteration: Removed the “3 things to do” section from the home page.

Usability test • home page Before

After Findings: ● Most users don’t understand the term “Ongoing optimisation” ●

Most users are skeptical of clicking on “Activate now” as they want to find out more about this first

Design iteration: ● Changed the phrase to “Ongoing price checker” to make it more clear ●

Changed “Activate now” button to “Check details” to motivate user going to the next step

Usability test • conversion to new supplier Before

After Findings: ● When users read through the comparison prices, some users missed the top saving numbers. ●

Some users like to know the saving percentage number of each price.

Design iteration: ● Moved the saving prices into the relevant comparison section and added “save” to make it clear to users. ●

Added a small percentage figure to each of the price bars.

Usability test • conversion to new supplier Before

After Findings: ● When users go through “add ID” page, some users feel like they have to add three IDs.

Design iteration: ● Used a selection bar instead of three buttons.

Results Preliminary onboarding

Initial set up

78%

100%

of users have a clear understanding of noobill’s function and objective

of users found the initial set up intuitive and clear

7 out of 9

100%

have confidence to proceed to the following stages

of users rated ease of set up greater than 4 out of 5

78%

6 out of 9

are pleased with the onboarding experience

rated the initial set-up 5 out of 5

Results (continued) Supplier switching process

Conversion

89%

89%

found the price comparison useful and visually informative of noobill’s offer

78%

had a very clear understanding of the supplier switching process

successful conversion rate

78%

rated the services noobill provides as very beneficial

The new onboarding experience

Click here to view prototype Click here to view prototype video

Where to from here?

Urgent

Semi-urgent

Copywriter ● Human language ● Less jargons ● Personable ● Proofreading

Referral program ● Using word of mouth to get friends of existing users on board ● Giving incentives for existing users to leave reviews ● Incentive to stay on the app eg. point system, carbon offset

Long-term ● ●

Accessibility considerations Continue noobill’s current development plan with increasing more bill management

It’s very encouraging that users seem committed to noobill for the long haul. We had multiple comments that users were disappointed that the various functionalities that noobill is already planning on including in the future are not yet in place.

In summary, we think that noobill, pending amendments, could be a market leader in the fintech industry and our users seem to agree.

Thank you

Further info from week 3 feedback George’s Feedback: noobill back-end AI can not detect the numbers on users bills.

Suggestions: We have done further research and found there are back-end technology that could detect prices via E-bill. We could ask users to upload their E-bill. However, if it is not achievable by noobill, an option for user to manually input their bill has also been included.

If user find it too cumbersome they have the option to skip the comparison and still convert.

Further information from week 3 feedback George’s Feedback: noobill has tired to ask potential customers uploading bills via email and provide comparison prices, and the responses from customers are low, therefore price comparison does not work well in the past.

Suggestions: Replying emails in a few business days could make users to lose motivation significantly, we suggest this process should be finished in one go, the App system could generate price comparison info in a few seconds instead of days.