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.