Bear with me, I'm constantly working to improve my portfolio website.
Research, Sketches, Wireframes, User Experience, Concept & Prototype.
Over the last year we'd been thinking about a new vision, including Open Banking - a fast and secure way for users to connect their bank accounts to WonderBill.
Unlike app 1.0 - app 2.0 would allow users to connect their bank accounts just once, rather than connecting multiple bills individually. Not only would this make onboarding quicker, it would give users more data at the click of a button.
The goal of the project was to create a frictionless onboarding experience that enabled users to connect their bank accounts as quickly and easily as possible. We wanted to give users more value quicker so that we would better retain them. The more value we could give to users in the initial experience, the more likely they were to come back and use the app in the future.
WonderBill was funded by BCG Digital ventures and Shell Plc. The app helped users to manage all their household bills in one secure place. Company ceased trading in 2022.
Over the last year we'd been thinking about a new vision, including Open Banking - a fast and secure way for users to connect their bank accounts to WonderBill.
Unlike app 1.0 - app 2.0 would allow users to connect their bank accounts just once, rather than connecting multiple bills individually. Not only would this make onboarding quicker, it would give users more data at the click of a button.
Create a frictionless onboarding experience that enables users to connect their bank accounts as quickly and easily as possible. Highlight the value quicker to better retain users. If users understand the value of the app in the initial experience, the more likely they are to come back and use the app in the future.
I followed The Design Thinking Process as a human centered approach to solving problems based on the users' needs. This way I could be sure that my design decisions were supported by feedback from usability testing and my assumptions were set aside.
After stake holder and kick off meetings I gained more insight into what we wanted to achieve. There were some fundamental issues with the current proposition:
- No open banking
- No feature that would keep users coming back every month
- There was no 'Ah-ha moment' in the initial experience
- The app didn't really help users to budget
- There was no reward for the user after taking action
- An unclear way of viewing historical data
- The home dashboard wasn't adding value
- Users couldn't remember their passwords for each bill
To build empathy with the people we were building for - we ran customer interviews with users that had used app 1.0 and new users that had never used WonderBill before.
We interviewed different segments of people from various combinations of age, income, free time and living situation to understand how different types of people managed their household spending/budgeting.
We mapped each customer interview to a persona that we'd previously created with an agency. This was an important step to help gain more insight into the different types of users' we were building this for.
To gain more insight into the problem with the current app's performance I worked with data scientists and marketing to analyse the daily performance funnel conversion. Where we looked into the screens with the biggest drop offs in the funnel (some of which we already knew about).
What we discovered:
- We needed to sell the value proposition better/more clearly.
- Sell how the app was going to benefit/help the user
- Give more an incentive for users to add a bill (become a customer)
- Explain how it will make them feel emotionally
Next I collaborated with the design team to analyse the results and findings from the customer interviews. We compiled and categorised the findings ready for a mind mapping session with the Product Team, where we came up with some potential ideas.
We started to see patterns in customers pain points and their goals/needs. We noticed some issues we could capitalize on:
After earlier research we found that some users we acquired through paid media didn't finish sign up. They also didn't see value in the app and therefore didn't become a 'customer' (add their first bill to the dashboard). This impacted cost per acquisition, engagement and retention metrics.
I researched our competitors, downloaded their apps, completed their sign up, and used the product putting myself into the users shoes. I wanted to identify their strengths and weaknesses. I kept in mind the needs/goals that were mentioned in our customer interviews.
When I asked customers how they currently manage their bills, households and family outgoings in the earlier customer interviews - most customers gave an app, website or company they used. I made sure to look into these closely to see if there was anything they weren't doing and how we were competing with them.
The main goal here was to see what each of these competitors offered from a value proposition level. I checked every competitor that was mentioned on the app store.
I spent time focusing specifically on the features competitors offered - which features answered pain points? Which served user needs? For each competitor I grouped post-it notes for features to see if there were any patterns in what others were offering.
I collaborated with the product team to brainstorm some potential features we could include to solve user problems and pain points.
To give a clear understanding of how individual screens and sections are related to each other I created a site map. This was shared with the business and would be used for mapping new content in future releases.
I created a flow diagram for the onboarding flow. I wanted to make everyone aware of the steps of the flow now we were adding Open Banking.
I created scaled down, low fidelity wireframes to test with to reduce the design time and cost of the project. I used these wireframes to create prototypes and tested them internally.
I added post-it notes to the flows anywhere I had concerns regarding loading times, hidden content, compliance checking, number of steps, email verification and potential drop offs from leaving the app etc.
I tested the prototypes with people from all areas of the business, using test phones. I wanted to check their reactions to the navigation, flows and features by observing them as they used the prototypes.
This was also a good opportunity from me to get the whole business on board with my thinking, design decisions and allow for development to get eyes on this early on.
To put my assumptions aside - I ran user testing sessions with a variety of users that had used app 1.0 and new users that had never used WonderBill before.
The tests were set up using two meeting rooms. In one room the participant would be interviewed by myself and other user testers. The room next door was filled with WonderBill employees listening in and watching the screen recording from the session.
- Did this solve the problems and pain points that were in app 1.0?
- Can people complete tasks easily with no friction
- Was it usable? Did the flows and features make sense to people?
We discovered many useful insights from user testing but here were a few things that stood out:
- Majority of users mentioned switching providers being too much hassle (revenue issue)
- Some users found the terminology for linking a bill confusing
- A lot of questions around how Open Banking would work with bill linking
- Some users didn't see the carousel signals on the sign up > welcome screens
- Some confusion around insights/ what they would expect to see here
After the user tests I analysed the data with the design team. I worked on iterations based on some of the feedback that was gathered. We then created a presentation for a company wide presentation where we presented findings and how we had worked to implement changes based on user feedback.
Given that we were moving from just bills to household management (including cards, bank accounts with open banking) the app would need to portray a more mature, trusting feeling. During competitor analysis we realised our style was completely different to other apps that were used to display financial information.
The app needed a clean feel with lots of white space. This would allow information to be more readable, findable and scannable.
Simplicity was key. After looking at the goals and needs for users coming to the app it was clear that a simple layout backed up with a simple colour palette was needed.
After various iterations and company presentation on the new logo and brand we came up with a new logo concept. We explored various brand styles that could fit with the company and our brand values.
After we agreed on the new 'Wonder' brand we came up with multiple directions for the app - different ways we could incorporate the new branding in the app. After some collaboration with different areas of the business we finally agreed on a direction.
The new designs for app 2.0 needed to fit into future scalability and the tone of voice. With no data on the types of users that used the new app we didn't have a clear picture of who the users were. Which branding/theme suited what they wanted? We kept the app screens neutral so we could easily pivot and make changes based on their wants and needs.
After various rounds of iterations and a company wide presentation the designs were signed off. It was important for me to get the whole company onboard with the progress and direction before moving to implementation.
I spent a lot of time with development team where we worked together to decide on the plan for implementation. We also agreed on components that would need to be built. Below are just some of the components that were built for the Wonder design system.
We carried out ongoing testing of the app to a Beta panel of users. Before releasing the app we wanted to understand if the app solved the problems we set out to solve.
User testing of the prototype was positive, however sadly just as the app was due to be released the company went into liquidation so we never got to see how the live app performed.
