Noobill
Customer onboarding experience
Project Overview
Overview
Client: noobill
Type: Mobile application
Duration: 6 weeks (part-time)
Role: UX/UI Designer
Team: Nashid, Dan and Nicole
My responsibilities
Survey, One to one interviews, Persona, Ideation, User flows, Wireframings, collaborating with the stakeholders, Prototype, User testing
Tools
Google Survey,
Pen & Paper,
Adobe XD,
Trello, Miro,
G-Suite
The Problem
noobill deployed a utility bill management app called noobill app. But the conversion rate was very low, due to the lack of transparency, flexibility and control over the whole onboarding journey.
Goals
To increase the conversion rate by To improve/design the onboarding experience where the user can have total control over the whole onboarding journey in order to increase the conversion rate. This includes –
- enabling a smooth onboarding process with a few simple steps so that the users do not have to share a lot of personal information just to know how noobill works.
- educating the user on the benefits and processes of how noobill works
- developing trust between the users and the noobill solution.
Outcomes
- Data safety and security policy is introduced in the first few updated welcome screens. This enables the users to be confident and learn about the benefits of noobill.
- More payment methods are added such as Apple Pay and Pay Pal and Google Pay along with bank account for the direct debit
- More payment periods are added such as fortnightly, monthly and when due to provide a better control for the users.
- Added hamburger menu at the homes page to enable easy access to all the required information for the users.
Background
noobill is an Australian fintech startup based in Melbourne that is applying mobile and AI technology to redesign how people receive and manage their utility bills. Noobill constantly keep checking for better deal based on user’s usage profile in the market and informs the user if there is any better deal than the deal user is offered from his existing service providers.
The Process
Our process is based on the Double Diamond theory and Agile UX process. We aim to incorporate the key phases of Discovery, Definition, Ideation and Delivery in all of our projects.
Research & Discovery (Collecting insights)
Together we carried out our research in 3 different manners: surveys, interview and competitor analysis. Each team member has conducted one to one interviews and contributed in formulating survey questions. I put together all the questions and conducted an online survey with Google Survey as well.
Our research encompassed-
- Understanding the needs and expectations of the users
- Uncovering pain points with the existing user journey
- Determining the success of the tasks
- Collecting more information about the best practices
21
Survey
7
One to One Interviews
10+
Define and Synthesis
Affinity Mapping
Insights and findings
Based on the user interviews conducted with 7 users on the existing audience wizard, we found the following key issues:
Lack of control over the services:
- Not able to compare and choose a supplier on their own
- Don’t want to be forced to put down personal details before deciding to use the service
- Lack of flexibility, e.g. frequency of payment and methods of payment.
Lack of information transparency:
- Want to know details of noobill’s suppliers and why / how a supplier is chosen for the user
- Lack of clear explanation about switching process
- Want to have a look at some confidential data, e.g. number of people onboarded, average money saved.
“Rushed along by the app”:
- Need to understand how the application works before start using the app.
- Lead to a feeling of distrust, unconfident and insecure to use the app
Empathy Mapping
Ryan, 27 (primary persona)
Based on our research, we developed 3 personas based on 3 user types that we are designing to solve problems for. We decided to focus on Ryan, since his need was the greatest. Ryan missed his due date to pay his energy bills with a fine which he was not happy about it. Sometimes he thinks that he is paying more these days but doesn’t have enough time to find and connect to a new provider.
Customer Journey
Ryan looks for an app that will help him to manage his bills after he missed his due date to pay his energy bills with a fine. He found noobill and decided to learn more about it. After flicking through some pages he ended up with disappointment and did not register. His whole journey is mapped out in our customer journey.
Development (Ideation, Concept)
Turning the problem into opportunities-
How might we redesign the onboarding journey to allow users more flexibility, transparency and control with a sense of trust while switching to a different supplier.
We ran a collaborative ideation workshop to generate ideas. That includes brainwriting and brainstorming to develop the ideas within the team
Defining the Minimum Viable Product (MVP)
Based on the needs, pinpoints and key insights, we captured the MVP on our Ideation workshop within the team.
We identified the following key features:
- Creating Energy Usage Profile to show the best deal for the user by
- Entering user’s last used data manually or
- Uploading a bill or
- Answering few questions about the energy usage.
- Introducing the data safety and security policy.
- Redesigned homepage with a clear hierarchy of information to meet the needs and expectations of the users.
- Adding more payment options and payment periods to improve the control and flexibility
User Flow
I designed the user flow to list the logical steps and pages needed for using the app.
Wireframes
Client Feedback at This Stage
At this stage, we presented our concepts and ideas and wireframes based on our findings from research. We discovered the new information and findings from the feedbacks that the client provided us –
- Noobill’s current business model cannot support a flow that allow users to compare suppliers and prices on their own. Thus, the proposed concept “Energy Usage Profile” cannot be implemented with the existing business model.
- Considering the plan, budget and time that Noobill has already invested in, it is suggested that it’s better to improve the current version of the app to make it more flexible, transparent and trustworthy, instead of designing an app with the whole new flow.
Re- Defining the Minimum Viable Product (MVP)
After receiving the feedback and observation from the client, we conducted several session for new ideas that would solve the existing problems of the app without introducing any new flow-
We identified the following new key features:
- Simple sign up process to land to the homepage
- Introducing the data safety and security policy
- A redesigned homepage with a clear hierarchy of information to meet the needs and expectations of the users.
- Adding more payment methods
- Adding more payment period options
Re-designed the User Flow (based on client feedback)
At this stage, I have come up with a new user flow to list the logical steps and pages based on the new concepts and ideas.
Deliver (Build & Test)
Style Guide
Accessibility Considerations
How we met Level AA compliance:
Adaptable
- Icons have been included to
reflect content. - Auto-fill function in form sections
- Text examples within input box ie.
“email address”.
Distinguishable
- Ensuring that a contrast ratio of 3:1
is provided for icons. - Level AA text spacing, line height and other formatting for all content.
- Ensuring a colour contrast ratio for text on background is 4.5:
Understandable
- Content appears and operates
in predictable ways. - Helping users avoid and correct
mistakes ie. back buttons, clear information on choices. - Giving users enough time to read and
use content. ie. there is no time limit or time out on choices.
Navigable
- Search bars and menus provide multiple ways to access content.
The Design Solutions
New welcome Screens
Home page redesigned
A home page that showcases a clear hierarchy of information based on users’ needs. Brand colours reoriented on home screen as well.
Hamburger menu navigation
Slide out side navigation panel with a hamburger menu added to house important information for the users. This feature allows the home page to be less overwhelming and more predictable to users.
Payment Methods
PayPal, Google Pay and Apple Pay options are added to allow users more control and flexibility with their payment methods.
Payment Periods
Summary Page
Summary page is introduced by packaging all the information and preparing the user to switch to the new offer. This enables more control and transparency to the user and allow them to take decision.
Validating the designs (User Testing)
Example of Tests Screens With Iterations
Result (Prototype)
Key Takeaways
- Sometimes the best solution may not meet the business model. After doing proper research and one to one interviews, we found out few issues. One of those was that the users wanted to compare all the offers and choose the best deal by themselves. We proposed the best solution empathising with the users, but the client did not want to proceed with the concept as the business structure does not support the price comparison solution.
- The best result comes from asking the right questions.
Limitations/ What is Next
- Users wanted to compare the all the current offers and choose the best offer from the list, which enables more control over the whole process and establish transparency across the onboarding journey.
- The client targeted 18 to 26 years age group of people as their primary customer. This is a narrow age group to target to and the solution is actually missing out a large age group of people.
- We did not have much time to work on the design system and user interface
- There are more information that needed to convey to the users such as, what would happen, if a user fails to pay on due dates. But due to time constrain, proper investigation couldn’t be carried out.