Simplifying Homebox's user onboarding journey
Homebox, UK. February, 2023
Homebox works with utility providers to simplify bill payment for tenants.
My Role
Principal Product Designer- Design system, Interaction design, Visual design, User flows, Rapid prototyping.
Industry
Hospitality
Financial Services
Timeline & Status
4 months.
Launched August 2023
Overview
After the Homebox acquisition by Billing Better (now renamed Homebox), the company sought a rebrand and complete overhaul of the onboarding flow, main and admin workflows to encompass new services, new products and a new look.
I worked with the team of managers, researchers, developers and other designers 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 a handful of the participants experiencing some slight difficulty progressing because of one or more required steps.
This has has caused a lot of user drop-off at some section of the current homebox onboarding that we needed to look into
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, starting with the onboarding. In doing this, we had to take care not to alienate our existing base.
A pile-up of constraints
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 about 3 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, added to the offered services, 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 onboarding.
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".
A section from the old onboarding
image
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.
Great, so what about the number of forms?
How do we make the user unaware that they're filling in a lot of forms? So we thought, what if we shared the workload and helped the tenants fill out some of the forms via the letting agent?
At that point, the letting agent side of things was pretty barebones, compared to the tenants'. Most of what they had to do was register tenant names, and some light details, and send the tenant an invite link to fill in the bulk of information.
This way, tenants, who already have a lot of information to fill in, aren't burdened by some of these forms and might spend less time during onboarding. The thing is, however, that they still needed to see these bits of information for confirmation, in case of errors or misnomers.
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.
We spoke to engineering on how feasible this would be In terms of data persistence - letting both sides of the coin have access to the same bits of information and they ensure that it wouldn't be a problem.
And the user drop-off point?
A lot of user drop off, about 54% of it, happened at the "invite bill-payers" stage. Inviting the bill payers meant entering the details of those with whom the bills will be split. Nothing was particularly wrong with this page structure, except that you couldn't skip the page.
It turned out that a lot of the time, users found it inconvenient to enter their prospective housemates' details because they might not be available at the time of onboarding.
So what if we made it skippable?
Some in-house feedback :
PROPOSED 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.
It's not done, but does it taste good?
With Framer, and some code, we were able to prototype what we had designed for testing, and make user data persistent as they progressed. There were some limitations, but this was a much faster way to test the ideas than going straight to development.
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.
To be objective about the new direction, we decided to test with a curated selection of users who had never used the platform.
Getting started v2
image
Account setup. v2
Animation
Rent setup. v2
Animation
Bills setup. v2
Animation
Bill payer setup. v2
Animation
Split bills. v2
Animation
DESIGN CONUNDRUM
The Big problem
Too different.
For the most part, this approach was simple and kept the ball rolling with the new test users. Testing had users spending an average of 7 minutes during onboarding, from the 10-14 minutes spent on the old version.
So, we decided to open it up to the main test group —- this time, to users who were already familiar with the platform - the letting agents and selected tenants. (we promised them coupons for participation)
It didn't test well, for a plethora of reasons.
Despite the fact that having the Letting agents enter some more information was optional, they didn't appreciate having to enter those details. They quite preferred how things worked before.
This was new— too new for them. It was too different from what they'd known and trusted all these years. It wasn't that it was bad, as far as they could tell too, it was just different. Too different.
These were serious issues because, we needed the fluidity of the platform in time for student resumption. So the question remained… "How do we keep the improvements we have made while staying true to what the users already know and love?"
At this point, we were already close to the deadline we had set, and engineering was ready for handoff.
02.Feedback and insights
image
The Rollback
We went back and forth with this problem, as we had seen that, objectively, the new direction wasn't bad. However, while new users were obviously very important to company growth, it was most essential that we kept our current user base happy.
We hypothesised that we'd fed them a little too much at once.
We needed to ease users in to the new direction and features, so to do that, we applied the new design system to the old structure and called this the v1.
This came with all the functional improvements earlier mentioned — even the part about Letting agents having to enter some extra information, because this was important to the company merge.
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:
FINAL DESIGN
A straightforward experience.
RETROSPECTIVE
Well, that was quite the experience.
A WIN
After launch, and over a period of 3 months, we recorded a 31% increase in onboarding speed, and 22% decrease in churn rate.
03.Feedback and insights
image
Key Takeaways