Moneybox: Registration Projects

Background:

Moneybox is a mid-size financial startup, with ~1m customers in the UK. The app allows customers to save, invest, start a pension, and set aside money for a first home.

  • One of Moneybox’s strategic goals for 2023 was to acquire 280K+ customers.

  • The conversion through Moneybox’s app registration was under 25%

  • If we could improve this conversion, we knew we could help the business reach that target faster, alongside efforts from marketing to drive customers to the app further up the funnel.

  • There was a desire to increase the amount of money users added in registration, to get them ‘on track’ from their first day.

  • Elements of the reg flow hadn’t been examined in a number of years, and we knew there was an opportunity to improve the quality of the experience for new users.

Projects

This page features a number of projects, worked on over a few build cycles, touching various areas of registration, with different purposes.

My Role:

As the main Product Designer on the project, I worked closely with my squad: a Product Manager, Engineers, QAs, and also with collaborators from Brand, Marketing, and Compliance.

 

🧪 Running discovery research with customers

While the conversion data was fairly clear, highlighting areas users were dropping from the registration flow, in many cases, we didn’t know why this was.

We didn’t have any existing research on registration, so avoid help steer hypotheses away from guesswork, and build a better understanding of user pain points in registration, we planned and ran a new piece of user research, with support and input from a UX researcher. The result was:

  • Generative user interviews, mixed with usability testing of the existing experience.

  • 7 participants (non-moneybox-customers) interviewed.

  • Participants with an interest in investing, as initial conversations and directions focused heavily on improving the Stocks and Shares ISA conversion.

  • Roughly 1.5 weeks of planning, conducting interviews and analysis, plus presenting back to key stakeholders across our mission and beyond.

🧠 Insights from Discovery research

The three following projects do take insights from different parts of the research output, so will draw on more detail further down the page, however, some high-level take-aways were:

  • Overall, the functional usability of the existing registration flow was deemed satisfactory, although we did identify several small and medium issues, including one related to the email verification step.

  • A focus had been on the adding money stage of reg. The research helped stakeholders realise that the issue was predominantly about trust, which was built further up the flow.

  • We identified more than 7 ways we were losing trust from unfamiliar or undecided customers.

  • We identified key differences between customer mindsets (cautious vs impatient), and between how users interact with account types (investing vs cash).

  • We found users feeling lost at times, and stage-signposting (which did exist at points) benefitted them greatly. We found that customers felt that some steps were in the wrong order, and some were introduced in an ‘abrupt’ manner.

 
 

Project 1: Email verification improvements

Existing email verification flow: 👇

In registration, users had to verify their email for practical and compliance-related reasons.

Users had to:

  1. Leave the app

  2. Find their email app

  3. Tap the link in the email, which redirects them to the web browser success

  4. Return to the app, and close the window

  5. Re-type their full username and password

In the research, we observed users

  • Getting lost on the way to their email app, or forgetting what they were doing

  • Getting frustrated at having to re-type their email and password

  • Forgetting the password they had just set

  • Re-sending verification emails

  • Taking more than a minute to go through the process

🤜 🤛 Exploring solutions collaboratively

I brought a set of ‘How Might We’ statements to a squad kickoff workshop. Alongside the engineers, we generated some different technical solutions to the key user pain points, which included:

  • Bringing email verification in-app, removing the browser step

  • Logging the user in automatically, removing the login step

✏️ Ideating and wireframing around those solutions

Off the back of this, I then began:

  • Sketching up different concepts for the email verification flow, with varying scopes, for the engineers to estimate

  • Considering other small improvements we could make to bring the sign-up more in-line with standard patterns, and solve for other small usability issues we encountered in the research (in-line password validation, switching the DOB format).

  • Transitioning the sketches into wires once we had settled on a direction, and a scope we felt comfortable with.

👨‍👨‍👧 The new email verification flow

While a number of improvements had to be left out due to scope, we managed to successfully include:

  • A new, clearer ‘check your email page’ with native email redirect buttons

  • Email verification completed in-app rather than through a browser

  • Direct app-login from the email (no more re-tying passwords)

  • New, ‘you’ve got mail’, verifying and success state animations

  • Contingency journeys and screens for edge-cases and failures

✍️ Working with motion and engineering to deliver ‘delightful’ animations

I involved Daisy, one of our motion designers in the Brand team, to collaborate on two new Lottie animations.

This creative process was done alongside the product design work, and involved:

  • Briefing, setting requirements and gathering reference animations. We wanted the process to feel connected from start to finish.

  • Collaborating on design aspects, like timing, colours and utilising design system components

  • Working closely with my squad’s iOS and Android devs to specify how the background states should interact through various frames of the JSON, ensuring the animation ran and transitioned smoothly. (Which required some patience, and trial and error!)

 
 
 
 

Project 2: Registration ‘Welcome’

  • A positive impact of running the discovery research was its impacts on the direction of subsequent projects and build cycles.

  • Its findings that new users needed to build trust, and needed more information helped direct stakeholder attention away from the ‘add money’ stages of registration, and further up the flow.

  • Users weren’t adding less money to the platform in registration purely because the add money page was poorly designed. A core reason was that they didn’t trust the app, or have enough information in the lead-up to this crucial commitment point.

  • With a 50% drop-off of users downloading the app to entering their details, we decided to focus on this area (pre-sign-up), and examine if making changes would also affect depositing amounts, and conversion further down the flow.

👋 What had we learned from the user research?

  • Users would benefit from more information before reaching certain ‘commitment points’ in the app

  • Users would benefit from being able to ‘dig deeper’ into information relevant to the product they’re more interested in

  • Users wanted to build an understanding of what the app would look like, and how it would work

  • New users needed to build more trust in Moneybox as a brand. The original design felt childish, and users sometimes felt pressured into making decisions.

👇 The old ‘Welcome’ experience: The Carousel

🎯 Generating HMWs from the research

HMW:

  • Build a sense of moneybox as an established, trustworthy brand

  • Give customers the information they need, and the opportunity to ‘dig deeper’

  • Allow customers a clear opportunity to open an account quickly if they know what they want

  • Give customers a better impression of what the app will be like before committing (visually and functionally)

  • Showcase our diverse range of product offerings to build trust

  • Make the Moneybox ‘welcome’ feel more visually ‘grown up’

✨ Taking the HMWs into ideation with stakeholders

  • I ran an ideation workshop with members of my squad (and beyond). I presented back some of the relevant research, gave everyone the ‘How Might We’s‘, participants sketched, and we discussed the results

  • Participants were a mixture of the product, engineering, marketing and product design teams.

🧠 Generating considered concepts from the workshop output

  • Using some of the ideas voted on in the workshop, I started sketching them into fully-fledged concepts, adding and combining some new ideas, and considering their pros and cons.

  • Starting with ~7 distinct concepts, we started to narrow down towards one, having conversations around their scope and size, and the user needs they would be solving.

✅ Choosing the ‘Product Hub’ concept

  • The product hub was a concept that allowed new users to ‘dig deeper’ into products whilst signing up, but also gave customers who knew what they wanted an easy and clear path.

  • Users could ‘explore’ or ‘get going’.

  • The messaging and structure focused on building trust and providing information.

  • The format enabled us to tailor the information and ‘sell’ of each product differently.

  • It gave users an opportunity to see all of our offering early, something we knew built trust.

  • It gave users time to pause, and not feel pressured into a sign-up.

  • It gave us an opportunity to hero UI from the app, to demonstrate how it worked, and lead with some of our most exciting feature benefits that we knew customers were interested in..

🎯 Working the concept through the fidelities

  • I began to translate the concept sketches into medium fidelity, so the team and I could see how they felt in prototype form.

  • I worked extremely closely with members of the marketing and brand team to bring the structure, narrative and copy together of each product carousel. I also spent many working sessions with compliance, to make sure we had approval on copy and format.

🎯 Final UI

  • The project had some last minute changes of direction due to changing focus and appetite that build cycle. It was decided instead that we would start by launching a single carousel, wrapping many aspects of the individual product carousels into one: continuing to pull forward the app UI and using social proof to build trust.

  • I worked up the final screens, with rich, bright imagery celebrating key features from the app, adding a new carousel format to our design system in the process.

  • I also worked with Brand and a Motion designer to design a new ‘landing’ page of the app, which was crisper, cleaner, had clearer navigation, and used a new custom lottie animation of the app logo.

 
 
 

Project 3: Improved Product Selection

  • Another area of the flow that had lower conversion was where users select a product.

  • Research showed customers found arriving on the page ‘abrupt’ and they needed more hand holding.

  • The research also told us that users also simply found the page unattractive and ‘not welcoming’, which we saw lowering trust (perhaps the ‘aesthetic-usability effect’).

  • Data showed some of the page organisation was leading to lower conversion on certain accounts, and our usability testing confirmed design was a factor.

  • We had new accounts set to be launched that would need to be incorporated into the information architecture of the page.

👇 Research and original product selection page

How Might We’s generated:

  • HMW make arriving at the stage where customers choose products less ‘abrupt’

  • HMW might we make the product selection experience less ‘formal’ and ‘impersonal’

  • HMW might we make customers feel that the account selection process feels more tailored to their needs, or ‘holding their hand’

  • HMW might we make the ISA offering more visually grown-up

  • HMW might we help new customers build trust by ‘digging deeper’ while allowing customers who know what they want a clear route.

Ideation and Sketching around the HMWs:

In Figjam, Invision and Figma, I began doing some thinking around the information architecture, and coming up with various concepts that aimed to satisfy the requirements and user needs we had.

✌️ Two approaches

  • Emerging through the product design process, and conversations with stakeholders were two sets of hypotheses – leading to slightly different approaches

  • One was that by making things easier to find, simpler, and visually more cleaner, we could increase conversion. Accounts would be treated the same, but we would give customers the ability to ‘dig deeper’ into key pieces of information.

  • The second was that we should treat accounts ‘proportionally’ to their needs, and how much we wanted users to sign up to them. LISA customers knew what they wanted, and conversion was high (74%), meanwhile ISA customers were nervous, needed to be ‘sold to’, and converted much lower (31%).

  • Both approaches involved asking users why they had come to Moneybox, and reordering / highlighting accounts – to solve for the ‘hand-holding’ and ‘abruptness’ issues we saw in research.

Approach 1: Cleaner redesign

Approach 2: ISA Explorer

👩‍🎨 Designs

  • Approach 1 features a new information architecture, solving for some of the usability problems we saw in testing. It has dropdowns for users who want more information. It features new account icon styles, and a new design system header component.

  • Approach 2, is more experimental, and leans into our two core account types, giving the LISA more prominent key features, while Stocks and Shares borrows from concepts not used in the Product Hub project, utilising an in-card carousel to visually ‘sell’ the account, hero the UI and give users an impression of ‘how it will work’. Other account cards are less prominent.

🧪 Launch

  • Because both designs featured similar and reusable components, we could build both in the same build cycle.

  • I worked with the developers in my squad to roll out these redesigns, which we are currently testing against the existing as a control.

  • We have been working collaboratively with Brand to build a new set of icons for accounts, that we aim to launch app-wide, an initiative I kicked off as part of this project.

✨ Summary

📧 Email verification

  • After launching email verification for a small cohort, it was turned on for all users signing up to the app.

  • The verification step saw a roughly 5% increase in conversion. While a marginal increase, this was an early step in registration, so kept a significant number of users from dropping early in the funnel. Having seen users navigate this original step in testing, we were also confident we’d be reducing frustration, and time taken, for many users

📱 Product Hub / Carousel

  • While the ‘product hub’ wasn’t launched in its final form, we saw those engaging with the new carousel and landing page converting at higher rates, and depositing more money onto the platform.

  • Much of the thinking from the concepts was recycled, and brought forwards into the product selection designs.

👉 Product Selection

  • A combination of the carousel and Approach 2 – ‘ISA explorer’ product selection resulted in a higher overall conversion, a 6% increase for the entire registration flow, as well as higher numbers of customers choosing to open an ISA.

🧑‍💻 Non-design changes

  • Based on the findings of the user research, registration was reengineered to be modular. Shifting ‘Add money’ to a new location (based on our findings that it felt too ‘early’) in the flow resulted in a 7% conversion increase.


These projects are helping us get to our 280K+ acquisition target faster, sitting 10% ahead of our projected monthly acquisition targets.

Work is being still being carried out to examine the combined impact of these projects on conversion, and our customer acquisition targets, alongside other product and marketing initiatives not shown in this case study.