Simplifying Homebox's user onboarding journey

Homebox, UK. February, 2023

My Role

Principal Product Designer- Design system, Interaction design, Visual design, User flows, Rapid prototyping.

Industry

Hospitality

Financial Services

Timeline & Status

5 months.

Launched July 2023

Overview

After the Homebox acquisition by Billing Better (now renamed Homebox), the company sought a rebrand and complete overhaul of the onboarding flow to encompass new services, new products and a new look.

I led the team to craft a new design system themed by the new look, and then implement the said system onto the new company web app, starting with the onboarding journey.

CONTEXT

It isn't broke, but we're going to fix it.

We had to make some changes to what was working.

As depicted in the feedback below, the current onboarding flow (at the time) had tested mostly positive with the test users, with slight complaints to bits of the information architecture and placement of certain screens within the journey.

Screen recordings of the platform being used showed ease of navigation on most of the pages with only two of the participants experiencing some slight difficulty progressing because of a required step.

"I would say provide a review summary showing me again what I will be paying for and explaining if the amount I will be billed is per housemate or per household as it is a bit unclear"

"I would say provide a review summary showing me again what I will be paying for and explaining if the amount I will be billed is per housemate or per household as it is a bit unclear"

"I would say provide a review summary showing me again what I will be paying for and explaining if the amount I will be billed is per housemate or per household as it is a bit unclear"

"Yes asking for my housemates details as I might not have my friends last name at hand as I might not know the correct spelling of my friends last name to proceed so I wouldn't want to make a mistake"

"Yes asking for my housemates details as I might not have my friends last name at hand as I might not know the correct spelling of my friends last name to proceed so I wouldn't want to make a mistake"

"Yes asking for my housemates details as I might not have my friends last name at hand as I might not know the correct spelling of my friends last name to proceed so I wouldn't want to make a mistake"

"I am satisfied with the bill package section"

"I am satisfied with the bill package section"

"I am satisfied with the bill package section"

"I would say everything was related to the kind of service youre providing and it made sense to me"

"I would say everything was related to the kind of service youre providing and it made sense to me"

"I would say everything was related to the kind of service youre providing and it made sense to me"

"It'll be really helpful to highlight the current date on the date picker"

"It'll be really helpful to highlight the current date on the date picker"

"It'll be really helpful to highlight the current date on the date picker"

"what if we could add multiple power utility service providers to the list? Instead of just one"

"what if we could add multiple power utility service providers to the list? Instead of just one"

"what if we could add multiple power utility service providers to the list? Instead of just one"

"I think it would be cool to have the option to add other billers later, instead of having to do it now"

"I think it would be cool to have the option to add other billers later, instead of having to do it now"

"I think it would be cool to have the option to add other billers later, instead of having to do it now"

"Allow to continue without all members details, we could do this later on"

"Allow to continue without all members details, we could do this later on"

"Allow to continue without all members details, we could do this later on"

"I think the onboarding process is pretty straightforward, except the phone number bit"

"I think the onboarding process is pretty straightforward, except the phone number bit"

"I think the onboarding process is pretty straightforward, except the phone number bit"

"Do we have other options for our bill (not real a quote , if everything is selcted)"

"Do we have other options for our bill (not real a quote , if everything is selcted)"

"Do we have other options for our bill (not real a quote , if everything is selcted)"

"When I was prompted to invite my other housemates to sign up for billing better as I would need their consent to ensure that they are happy for me to do this"

"When I was prompted to invite my other housemates to sign up for billing better as I would need their consent to ensure that they are happy for me to do this"

"When I was prompted to invite my other housemates to sign up for billing better as I would need their consent to ensure that they are happy for me to do this"

"Error messages while type rather then after submitting"

"Error messages while type rather then after submitting"

"Error messages while type rather then after submitting"

"I think the only part is when i had to keep confirming my password, although i do kind of understand that that was neeeded so that was fine, and that was my fault, if i was actually conducting this in a real life setting i would use a password that i know and i wouldnt quit, so no, i think the process was easy and it didnt make me feel like quitting or frustated"

"I think the only part is when i had to keep confirming my password, although i do kind of understand that that was neeeded so that was fine, and that was my fault, if i was actually conducting this in a real life setting i would use a password that i know and i wouldnt quit, so no, i think the process was easy and it didnt make me feel like quitting or frustated"

"I think the only part is when i had to keep confirming my password, although i do kind of understand that that was neeeded so that was fine, and that was my fault, if i was actually conducting this in a real life setting i would use a password that i know and i wouldnt quit, so no, i think the process was easy and it didnt make me feel like quitting or frustated"

There's more where these came from.

01.Feedback and insights

image

THE PROBLEM

We had a lot of changes to make, from the visuals to the whole experience, and we didn't want to alienate our existing base.

A pile-up of constraints

A new coat of paint

Because of the acquisition, the whole platform was getting a facelift, and this might throw off regular users. We had to make the changes as familiar as possible.

A new coat of paint

Because of the acquisition, the whole platform was getting a facelift, and this might throw off regular users. We had to make the changes as familiar as possible.

More and more

Re: Acquisition, a good number of features are being added to the platform, which would be referenced in the onboarding. There are already a lot of forms in the current version, so it was easy to see how this might make things a bit difficult.

More and more

Re: Acquisition, a good number of features are being added to the platform, which would be referenced in the onboarding. There are already a lot of forms in the current version, so it was easy to see how this might make things a bit difficult.

Comfortable Loop

A good portion of our customers were letting agents who, as expected, would spend a lot of time onboarding a ton (hopefully) of potential tenants on the platform. This meant coming back to the onboarding repeatedly to do the same thing over and over again. This, combined with the increase in features might complicate the loop.

Comfortable Loop

A good portion of our customers were letting agents who, as expected, would spend a lot of time onboarding a ton (hopefully) of potential tenants on the platform. This meant coming back to the onboarding repeatedly to do the same thing over and over again. This, combined with the increase in features might complicate the loop.

A stitch in time

We had about 10 weeks to get this done, which considering the fact that we might just be testing the design system and making changes to that as we go along, might not be enough time at all.

A stitch in time

We had about 10 weeks to get this done, which considering the fact that we might just be testing the design system and making changes to that as we go along, might not be enough time at all.

THE CHALLENGE

Redesign and (hopefully)improve the onboarding journey, adding and removing the needed features, and provide a much more intuitive experience, while keeping a familiar look... in less than three months.

01.Proposed project timeline

image

UPDATED FLOW

Forms. Forms. Forms.

We need to make the sheer number of forms less overbearing.

With features like bill splitting, power usage selection, rent inclusion etc, the number of inputs required on single or multiple runs were a lot, even if we pre-filled some of the redundant information. We needed to find a way make users unaware of that fact.


We looked to inspirations like Airbnb and Wise, for their cleaner approach to similar situations.

A section from Wise onboarding

image

But it's not the same.

While it would've been nice to solve our problem this way, it spawned two new problems to solve if we were going to keep the pages "clean".

Our onboarding had a summary section that HAD to be there so users could see how much they had to pay at every step of the process.

Our onboarding had a summary section that HAD to be there so users could see how much they had to pay at every step of the process.

Our onboarding had a summary section that HAD to be there so users could see how much they had to pay at every step of the process.

This looked NOTHING like our existing platform. sigh.

This looked NOTHING like our existing platform. sigh.

This looked NOTHING like our existing platform. sigh.

Reducing the number of forms on page would mean increasing the number of PAGES… so it quickly became the devil and the deep blue sea type of thing.

Reducing the number of forms on page would mean increasing the number of PAGES… so it quickly became the devil and the deep blue sea type of thing.

Reducing the number of forms on page would mean increasing the number of PAGES… so it quickly became the devil and the deep blue sea type of thing.

Also, 10 WEEKS!! I was still salty about that by the way.

Also, 10 WEEKS!! I was still salty about that by the way.

Also, 10 WEEKS!! I was still salty about that by the way.

A section from the old onboarding

image

  1. So how do we solve the summary problem, you ask?

We explored a number of options including getting rid of the summary which was a fun laugh because we knew how disastrous that would've been.

We went with relocating the redesigned summary widget from the right side to the bottom, which would leave the top part of the page clean as intended, and the bottom less intrusive yet accessible.

Old

New (proposed)

Summary relocation

Interaction

Old

New (proposed)

Summary relocation

Interaction

Old

New (proposed)

Summary relocation

Interaction

  1. Great, so what about the number of forms?

How do we make the user unaware that they're filling in a lot of forms? By making estimates and remembering information.

We figured out a way to deduce certain information that you might have to fill in by yourself. Stuff like date of tenancy start and end, number of tenants etc

This information is automatically generated based on the property address you have entered (size, and location etc.)

Having some information pre-filled and located where the summary would be (you don't get the summary till you have added your bills) reduces the number of active forms on screen. We are able to add the extra features on some extra pages without needing to sacrifice the minimal approach we're going for.

Old

New (proposed)

Number of pages and number of forms on each page

Interaction

Old

New (proposed)

Number of pages and number of forms on each page

Interaction

Old

New (proposed)

Number of pages and number of forms on each page

Interaction

Some in-house feedback :

It was much cleaner, as intended and gave more focus

It was much cleaner, as intended and gave more focus

It was much cleaner, as intended and gave more focus

The information estimate approach had a high chance of correct estimates

The information estimate approach had a high chance of correct estimates

The information estimate approach had a high chance of correct estimates

It looked nothing like the current platform, We couldn't compromise on that.

It looked nothing like the current platform, We couldn't compromise on that.

It looked nothing like the current platform, We couldn't compromise on that.

The number of pages might be noticeable to some users

The number of pages might be noticeable to some users

The number of pages might be noticeable to some users

KEY DISCOVERY

Relocating the summary widget and adding the predictive feature made the platform more intuitive and focused than the current version.

LAYOUT

Focused. Intuitive. Focused.

How was the plan working out so far?

Well, let's begin with structure.

A standard set of layout grids defined by desktop-based breakpoints, was critical in ensuring the team could design and build with velocity and consistency.

Tablet

Mobile

Web

Layout grids

Interaction

Tablet

Mobile

Web

Layout grids

Interaction

Tablet

Mobile

Web

Layout grids

Interaction

It's a question of focus and progression.

We went with an attempt at amplifying the perception of progression, further mitigating distractions by making readability simpler— placing high emphasis on the forms you're about to fill.

Basically, we made the forms the primary element on screen.

Show user perception overlay

Double-aligned

Confirmation-driven

Old approach

Interaction

Show user perception overlay

Double-aligned

Confirmation-driven

Old approach

Interaction

Show user perception overlay

Double-aligned

Confirmation-driven

Old approach

Interaction

Show user perception overlay

Center-aligned

Progress-driven

New approach

Interaction

Show user perception overlay

Center-aligned

Progress-driven

New approach

Interaction

Show user perception overlay

Center-aligned

Progress-driven

New approach

Interaction

Focus is on both sides of the screen; motivates users to confirm their every input as it is entered.

Focus is on both sides of the screen; motivates users to confirm their every input as it is entered.

Focus is on both sides of the screen; motivates users to confirm their every input as it is entered.

The forms and summary widget are both primary elements of the screen.

The forms and summary widget are both primary elements of the screen.

The forms and summary widget are both primary elements of the screen.

Focus is one thing at a time; the forms, then the summary. Motivates users to confirm after all forms are filled.

Focus is one thing at a time; the forms, then the summary. Motivates users to confirm after all forms are filled.

Focus is one thing at a time; the forms, then the summary. Motivates users to confirm after all forms are filled.

The form is clearly the primary elements of the screen.

The form is clearly the primary elements of the screen.

The form is clearly the primary elements of the screen.

DESIGN CONUNDRUM

One final problem

Still Homebox... ish.

We were getting there, except for one last thing. This new design is NEW to the current user-base.

How to solve that?

We went back and forth with this, as we really loved the new direction too. We realised that the new design system and the design direction were two different things.


We needed to ease users in to the new design, and to do that, we applied the new design system to the old structure and called this the v1.

The plan was to use this version for a few months to get users accustomed to the new colours and some feature additions before switching to the final phase, the v2.

It did not contain some any of the structural changes or improvement to intuitiveness we had worked on, sadly.

Old

New

Old vs v1

Interaction

Old

New

Old vs v1

Interaction

Old

New

Old vs v1

Interaction

Old

v1

Old vs v1

Interaction

Old

v1

Old vs v1

Interaction

Old

v1

Old vs v1

Interaction

Energy set-up v1

image

How did this approach go?

About as well as we'd expected. The new features were rather self explanatory, and with most of the issues raised during the earlier version of feedback solved, it went better with test users. Some of the issues raised included:

Because of the new features, we then had a lot of forms to fill, with no intuitiveness and sturcutural placements to mask them.

Because of the new features, we then had a lot of forms to fill, with no intuitiveness and sturcutural placements to mask them.

Because of the new features, we then had a lot of forms to fill, with no intuitiveness and sturcutural placements to mask them.

Some preferred the previous version because if seemed shorter. This however couldn't have been avoided because of the addition of the new features.

Some preferred the previous version because if seemed shorter. This however couldn't have been avoided because of the addition of the new features.

Some preferred the previous version because if seemed shorter. This however couldn't have been avoided because of the addition of the new features.

FINAL DESIGN

A straightforward experience.

You kinda just click through it.

For the most part, v2 was simple and kept the ball rolling with the user. Testing had users spending an average of 7 minutes during onboarding, from the 10 minutes spent on the old version.

Getting started v2

image

One of the features added was the ability to determine if you wanted to add rent what you needed Homebox to handle. This would determine the structure of the pages to follow.


Account setup. v2

Animation


Rent setup. v2

Animation

The sections estimated by Homebox are placed blow the CTA, making sure that you can see it without being hindered by it, and you can also edit it if the information proved to be incorrect.

Bills setup. v2

Animation

we also used the new "under the CTA structure for any extra information that we would not want to distract you with.

Bill payer setup. v2

Animation

The acclaimed summary section that plagued us for a while is displayed under the CTA, visible, accessible and out of your way.

Split bills. v2

Animation

The option to skip is present here, as requested by the test users, making sure you are not delayed by the inaccesibility of that bit of information.

RETROSPECTIVE

Well, that was quite the experience.

A WIN

We recorded a 31% increase in onboarding speed, and 22% decrease in churn rate.

"Yes, this is definitely better than the first"

"Yes, this is definitely better than the first"

"Yes, this is definitely better than the first"

"I liked how the other one, but I can't argue with how much better this is, visually I mean"

"I liked how the other one, but I can't argue with how much better this is, visually I mean"

"I liked how the other one, but I can't argue with how much better this is, visually I mean"

"I like it"

"I like it"

"I like it"

"I honestly don't have anything else to say, it does feel seamless in a way and I'll take it"

"I honestly don't have anything else to say, it does feel seamless in a way and I'll take it"

"I honestly don't have anything else to say, it does feel seamless in a way and I'll take it"

"Nothing to add, I like this one but could we maybe have options to use either whenever we're trying to log on?"

"Nothing to add, I like this one but could we maybe have options to use either whenever we're trying to log on?"

"Nothing to add, I like this one but could we maybe have options to use either whenever we're trying to log on?"

"Works for me, no comment"

"Works for me, no comment"

"Works for me, no comment"

01.Feedback and insights

image

Key Takeaways

Experiment

Sometimes, the ideas don't come at once; you have to throw a lot of stuff on the wall and see what sticks

Experiment

Sometimes, the ideas don't come at once; you have to throw a lot of stuff on the wall and see what sticks

Experiment

Sometimes, the ideas don't come at once; you have to throw a lot of stuff on the wall and see what sticks

Versioning isn't a bad idea

One thing that we did here that I hadn't done before was versioning. Having a middle phase before going on to implement the main design turned out to be a smart move that I couldn't have seen coming

Versioning isn't a bad idea

One thing that we did here that I hadn't done before was versioning. Having a middle phase before going on to implement the main design turned out to be a smart move that I couldn't have seen coming

Versioning isn't a bad idea

One thing that we did here that I hadn't done before was versioning. Having a middle phase before going on to implement the main design turned out to be a smart move that I couldn't have seen coming

More clicks

Sometimes, having extra pages (or clicks) might just be what the project needs; reducing the number of clicks to a goal might not work in a lot of context. If an added extra step led to a more intuitive and error-free experience, it was worth the additional manual effort.

More clicks

Sometimes, having extra pages (or clicks) might just be what the project needs; reducing the number of clicks to a goal might not work in a lot of context. If an added extra step led to a more intuitive and error-free experience, it was worth the additional manual effort.

More clicks

Sometimes, having extra pages (or clicks) might just be what the project needs; reducing the number of clicks to a goal might not work in a lot of context. If an added extra step led to a more intuitive and error-free experience, it was worth the additional manual effort.

Taking the team along for the ride

Involving every member of the team from the start is the way to go. In addition to carrying them along and keeping them updated so that they can contextualize on their ends, their perspectives might be just what the doctor ordered.

Taking the team along for the ride

Involving every member of the team from the start is the way to go. In addition to carrying them along and keeping them updated so that they can contextualize on their ends, their perspectives might be just what the doctor ordered.

Taking the team along for the ride

Involving every member of the team from the start is the way to go. In addition to carrying them along and keeping them updated so that they can contextualize on their ends, their perspectives might be just what the doctor ordered.

Get in touch

harfyzz@gmail.com

Connect on LinkedIn

Afeez Yunus

Hire me on Toptal

Afeez Yunus

Get in touch

harfyzz@gmail.com

Connect on LinkedIn

Afeez Yunus

Hire me on Toptal

Afeez Yunus

Get in touch

harfyzz@gmail.com

Connect on LinkedIn

Afeez Yunus

Hire me on Toptal

Afeez Yunus

CONTENT

The Context

The Problem

Updated Flow

Layout

Visual Conundrum

Final Design

Retrospective