Smart Retire US

Design of a new retirement product for the US market

The challenge

Design a product detailed enough to support users through their entire retirement journey but easy enough to actually use.

Responsibilities

Design lead Research analysis Design exploration UX, UI design (Figma) Prototyping - real-code prototype builds (Framer)

Results

An ‘awareness and interest’ website, built in Webflow. An end-to-end high-fidelity responsive prototype of the Smart Retire US user journey, built in Framer. Well received in user research, product expected to launch in mid 2024.

9:41

Situation 

Smart in the US was missing out on a huge opportunity for a product that guides users through the full retirement process - over 80 million participants ($32.6tn in assets) in the potential market. [Cerulli Report - U.S Retirement End-Investor 2021]

There was already a ‘Smart Retire’ product in the UK, but the retirement landscape and laws are very different in the US, so Smart needed a brand new product for the US market.

Smart US brought requirements to the Innovation team in the UK, backed up by research. It was a hands-on consultancy project - I was Lead Product Designer on the project, working in our small team, collaborating with US stakeholders.

The product had to support accumulation and decumulation, taking users through all retirement stages:

  • Pre-retirement: build understanding of retirement saving, nudges, goal planning

  • Transitioning to retirement: retirement plan creation & execution, social security analysis and education, nudges based on life events

  • In retirement: automatic withdrawal based on participant needs, flexible one-off payments, ability to update plan

The challenge was providing users with a product detailed and comprehensive enough to properly support them through the entirety of their retirement journey, while ensuring its ease of use. Historically any ‘retirement planner’ style apps have been either lengthy and incomprehensible to most users, or very ‘surface level’ and near to useless. This delicate balance needed to be struck, while also attracting customers and educating them along the way.

Task

  • Research analysis

  • Design exploration - running workshops with stakeholders, building and testing high-fidelity exploratory prototypes

  • Design the end-to-end user experience - UX, user journey map

  • Design all components - visual and interaction, building on the Smart Platform Design System (case study on this project coming soon)

  • Deliver a final end-to-end high-fidelity prototype

Action

Research analysis

The research provided was based on contextual interviews with US residents at various stages: 12 pre-retirement, 12 transitioning to retirement, 12 in retirement. The research team also interviewed 10 US financial advisors for their perspective - this would help inform how we designed the options presented to users.

Analysing the research, we came to several main conclusions:

  • Healthcare and outliving your retirement savings were the two top sources of stress in retirement for participants.

  • Participants generally do not understand the retirement products already on the market.

These findings broadly matched our hypotheses and assumptions, but it was good to have data (even with a relatively small sample) to support them.

Cerulli Report - U.S Retirement End-Investor 2021

This was the main user journey map initially presented to us.

UX and design exploration

This user journey map, while detailed, was needlessly complex, for both the users that would experience the journey, and anyone working on the project trying to understand it.

I ran a journey mapping workshop with stakeholders, to both simplify the journey and clarify key points.

After a lot of discussion, as a group we decided that the project actually needed two distinct (but connected) parts - ‘Awareness and interest’ and ‘Illustration and quote’.

The original journey lacked a real ‘Awareness and interest’ phase - it relied on users already knowing enough about this ‘Smart Retire’ product to want to click on a card somewhere in their pension app (that they likely rarely or never opened). As well as within the main retirement planner phase (within the second part of the journey, ‘Illustration and quote’), the users needed information before using our app - before committing to using any product, they need to be educated and sold on it. 

Users needed to choose to use the product, ahead of competitors. The product needed a good, persuasive acquisition funnel. The solution was a simple informational and marketing website, combined with email campaigns for existing Smart users.

Participants nearing retirement would receive an email. Rather than driving users to a sign in process (which would require high effort and have a high drop-off rate), we’d drive them to the public website, that explains and markets the Smart Retire US product. 

This new agreed user journey overview set us up to delve into more detailed UX and design explorations - defining the individual pages of the journey with wireframes.

UX of the planner onboarding and main planner journey, ending with the ‘completed’ dashboard screen. These were developed on as I moved to high-fidelity static mockups, and further when moving to prototype build.

As part of the design process I explored many different patterns for what was the most complex and important part of the user journey - the retirement planner phase. This was where the biggest challenge of the project was most central - providing users with a comprehensive set of options and information, while ensuring high ease of use.

These explorations always started as static mockups in Figma, before moving to simple interactive prototypes in Figma. I then built the most feasible patterns as high-fidelity ‘real’ feeling prototypes in Framer. These Framer prototypes used real react code, a fully interactive chart library and ensured completely realistic interactions. The virtually-shippable nature of these prototypes ensured they could be realistically tested for their usability and practicality.

One of the exploratory prototypes focused on the user action of choosing which incomes to include in their retirement plan.  You can try it out, below.

This isn't real

All figures are for demonstration purposes only. This is not linked to any of your finances in any way. That's obvious, right?

This is not the real finished product. It's just an interaction prototype.

Add an income

Social security

This is an insurance scheme providing benefits for pensioners and those who are unemployed or disabled.

Annuity

Sometimes known as a "guaranteed income". A fixed sum of money paid each year, for the rest of your life. Adding this will reduce your Flexible income.

Your retirement plan

Flexible income

$1,740 – $2,690

monthly

Social security

$920

monthly

Annuity

$1,142

monthly

9:41

One of the design exploration prototypes - which I built in Framer. Exploring a simple interaction design as well as fast data gathering. In the end the interaction felt great but the project stakeholders wanted more comprehensive data gathering for users. Click or tap it and try it yourself!

This isn't real

All figures are for demonstration purposes only. This is not linked to any of your finances in any way. That's obvious, right?

This is not the real finished product. It's just an interaction prototype.

Add an income

Social security

This is an insurance scheme providing benefits for pensioners and those who are unemployed or disabled.

Annuity

Sometimes known as a "guaranteed income". A fixed sum of money paid each year, for the rest of your life. Adding this will reduce your Flexible income.

Your retirement plan

Flexible income

$1,740 – $2,690

monthly

Social security

$920

monthly

Annuity

$1,142

monthly

9:41

One of the design exploration prototypes - which I built in Framer. Exploring a simple interaction design as well as fast data gathering. In the end the interaction felt great but the project stakeholders wanted more comprehensive data gathering for users. Click or tap it and try it yourself!

This isn't real

All figures are for demonstration purposes only. This is not linked to any of your finances in any way. That's obvious, right?

This is not the real finished product. It's just an interaction prototype.

Add an income

Social security

This is an insurance scheme providing benefits for pensioners and those who are unemployed or disabled.

Annuity

Sometimes known as a "guaranteed income". A fixed sum of money paid each year, for the rest of your life. Adding this will reduce your Flexible income.

Your retirement plan

Flexible income

$1,740 – $2,690

monthly

Social security

$920

monthly

Annuity

$1,142

monthly

9:41

One of the design exploration prototypes - which I built in Framer. Exploring a simple interaction design as well as fast data gathering. In the end the interaction felt great but the project stakeholders wanted more comprehensive data gathering for users. Click or tap it and try it yourself!

Building the prototypes in Framer meant the entire design was using real React code - this is the same library that the final shipped product would use. This way the development process could be much quicker - engineers can use the prototype code in the real build.

A component in the final Framer prototype, this one is used in the main planner interface. On the right you can see some example React code that developers can use to build this component in the real shippable product.

Dynalinking UI

One of the interaction design challenges for this product was connecting the users’ choices with the results. Many financial planning products ask users questions or give them settings to choose, then later on in the journey the results of those choices are shown. We wanted to instantly show users the effects of their choices. This isn’t rare in digital products overall (picture turning up a brightness slider in a photo editing app and seeing the photo become brighter instantly), but in the world of fintech, the complex nature of the data displayed means this isn’t as common.

I had experience in making this work with previous Smart products (Retirement calculator and planner - case studies on these projects coming soon), using what’s known as ‘dynalinking’. This is where “information depicted in one window explicitly changes in relation to what happens in another”. “The beneficial effect of dynalinking enabling learners to make explicit links is evident” (Rogers, Scaife, Aldrich and Price, 2003).

To make the link between the inputs (left, dark blue) and outputs (right, light), the outputs would be animated to make the changes more obvious, but animate quick enough to feel like instant results of the users actions on the left.

A Figma prototype showing the dynalinking UI on desktop - the users makes changes to the inputs the left and these are reflected in the outputs on the right.

This is a bigger challenge on mobile. The Smart Retire US product needed to be accessible to as many users as possible, many of them using devices with small screens. For most mobile interfaces, when you have a lot of content to show, you can simply make a page longer - you can assume users know how to scroll down a page. When dynalinking, you need to show both the input and output on screen at the same time.

The most effective solution was to use what’s often known as a Spring Bottom Sheet. This is a way of showing content at the bottom of the screen on a ‘sheet’ or ‘drawer’, (this would be our output) while hinting at there being more content further down, off screen. The user can tap or drag this drawer of content up, sometimes over ‘on top' of the input content, to see more of it. They can easily dismiss or minimise this content by tapping a button or dragging the whole sheet back down. You can see in the example prototype below how the colourful chart is peeking out from the bottom of the screen, hinting that there’s more content to the output, if  the user wants to see it.

A high-fidelity Framer prototype showing dynalinking on mobile. The inputs are at the top in the dark section, the outputs are shown in a spring bottom sheet - the user can tap or drag this up to see it’s full content, and easily dismiss it back down.

A high-fidelity Framer prototype showing dynalinking on mobile. The inputs are at the top in the dark section, the outputs are shown in a spring bottom sheet - the user can tap or drag this up to see it’s full content, and easily dismiss it back down.

A high-fidelity Framer prototype showing dynalinking on mobile. The inputs are at the top in the dark section, the outputs are shown in a spring bottom sheet - the user can tap or drag this up to see it’s full content, and easily dismiss it back down.

This felt an effective way of fitting a relatively complex finance product onto tiny screens. Stakeholders were happy with the final prototype, and early research supported our confidence.

Small scale user research results were very positive, with 76% of participants saying they found the (prototype) product “easy to use” and 88% of participants ranking it first for ‘ease of use amongst retirement products you have used’.

Results

An ‘awareness and interest’ website

Built in Webflow, this is a responsive information and persuasion site that’s easily edible by the Marketing team via a CMS.

An end-to-end high-fidelity responsive prototype of the Smart Retire US user journey

This was built in Framer, running on real React components, speeding up the final development process. This project was unusual in my time at Smart, in that it was ‘handed over’ to engineers be fully built, rather than a more collaborative process of supporting and working with engineers throughout development. The prototype was extremely well received in early user research and the full product is expected to launch in mid 2024.

9:41

The final prototype, on mobile. End-to-end user journey, built in Framer.

9:41

The final prototype, on mobile. End-to-end user journey, built in Framer.

9:41

The final prototype, on mobile. End-to-end user journey, built in Framer.

The final prototype, on desktop. End-to-end user journey, built in Framer.

The final prototype, on desktop. End-to-end user journey, built in Framer.

The final prototype, on desktop. End-to-end user journey, built in Framer.

© 2024 Joe Russell, all rights reserved.

© 2024 Joe Russell, all rights reserved.

© 2024 Joe Russell, all rights reserved.