Smart Retire

UI Design, Design Systems, Product Design
What is it?
Smart Retire is an innovative digital retirement product that gives users flexibility to plan and manage retirement savings in a personalised way. Members can divide their savings into four pots, each designed to accommodate life's unpredictability by serving different purposes. It also guides users through the complexities in the run up to retirement, bridging the 'advice gap' through guidance.

Originally launched in late 2020 exclusively for Smart Pension Master Trust members, Smart Retire swiftly garnered popularity, paving the way for its global rollout.
What was my role?
I joined the project during its early design phase, just after the initial discovery stage. For around 4 years, I collaborated closely with a UX lead, content designer, user researchers, developers, product owners and stakeholders on a regular basis. My primary role was to design and own the UI for the product across various platforms.

I took charge of creating a comprehensive design system that also fed into Smart’s core product, designed the web & mobile app, contributed to UX and research work, and designed the brochure website for Smart Retire.
The Problem

Retirement presents a challenging phase in people's lives, where managing savings and making crucial financial decisions can be daunting. Many individuals approaching retirement age are fraught with concerns about depleting their savings prematurely or making ill-informed financial choices. Additionally, a lack of understanding about available pension options further compounds the challenge.

Research conducted by YouGov on behalf of Smart revealed that 35% of UK adults either approaching retirement or already retired express a preference for self-managing their retirement finances. 7% of UK adults aged over 55, anticipating retirement or already retired, remain unsure about their financial management preferences during retirement. Furthermore, 20% of individuals in this age group lack comprehension about their financial options upon retirement. This aligns with broader research, indicating that people often neglect long-term retirement planning beyond their initial post-career phase.

Retirement is no longer perceived as a singular event; instead, individuals view it as a series of life stages where they seek control over their savings to achieve their desired lifestyle. Worryingly, 52% of all UK adults express concerns about the possibility of a restricted lifestyle during retirement, and 13% of those aged 55 and above, anticipating retirement, have postponed their retirement plans due to the impact of the Covid-19 pandemic.

Smart Retire strives to address these challenges by bridging the gap between financial providers and savers through innovative, user-centred design, offering a solution that empowers individuals to navigate the complexities of retirement planning.

You can find a brief 2-minute video from Smart here, where you can listen to the subject matter experts talking about retirement problems and our approach.
The Challenges

Age-responsive design
Crafting an age-responsive UI design that considers the unique needs and preferences of individuals over 60 was a distinctive challenge. This includes considerations such as setting legible text styles, ensuring accessibility, simple lay-outs, and clear iconography that align with users' visual and cognitive capabilities.

Tech-savviness spectrum
During our user research sessions, we observed a wide range of tech-savviness among people in their retirement age. Balancing the user interface to cater to this broad spectrum of tech-savviness was crucial. From straightforward navigation for beginners to more advanced options for proficient users, the design must seamlessly accommodate varying levels of digital literacy.

Accessible UI
Ensuring an accessible UI design was vital, taking into account potential physical limitations of older users. Design elements such as button sizes, contrast ratios, and screen layouts must comply with accessibility standards to make the app usable for everyone.

Cognitive load management
Designing the user interface to minimise cognitive load was a significant challenge. Retirement planning involves various financial terms, calculations, and decision-making processes. The UI must present information to educate users on financial matters and provide interactive elements in a way that doesn't overwhelm them.

Legal compliance
Crafting a UI that effectively conveys the difference between guidance and advice was paramount from a legal standpoint. Using visual cues and clear messaging to delineate the app's role in providing support rather than personalised financial advice presented a design challenge at times.

Simplicity
Presenting users with a range of retirement options and investment choices while maintaining a clear and uncluttered UI was a challenge. Visual hierarchy and intuitive navigation should guide users through these decisions effortlessly.
Design System

I joined the project during its early design stage and inherited the ongoing component library work initiated by the previous UI designer. This component library proved invaluable as a living documentation, serving as the foundation for our design and development work. Continuously, I refined the design guidelines and components, introducing new elements and enhancing existing ones as we crafted new features and user journeys. Throughout this process, I consistently prioritised the visual aesthetics, accessibility, and ease of use, ensuring a user-friendly experience. In parallel, we also prioritised design and development consistency, establishing clear rules to govern our design system.

In addition to standard UI components such as buttons and input fields, Smart Retire presented unique product-specific requirements, necessitating the design of bespoke elements tailored to our users' needs. This component library emerged as the definitive 'source of truth' for our development teams, facilitating seamless collaboration between design and front-end. To ensure no details were lost in this collaborative process, I maintained a detailed 'changes log' within the Figma file. Over time, this library seamlessly integrated with Smart's core accumulation product, aptly named STEM.
The Product

Smart Retire represents a four-year-long journey in my career, a complex financial product that I had the privilege to contribute to. In this brief overview, I won't delve into the fine details of the process or specific design decisions. From the outset, my work was marked by close collaboration with UX leads and content designers, grounded in a mobile-first approach.

At its core, the product operates on a 4-pot model, allowing users to allocate their pension savings across two income pots and two savings pots, each serving distinct purposes. Our primary challenge often revolved around simplifying the communication of how these pots work, while providing users with the flexibility to manage their savings effectively. Tasks ranged from transferring funds between pots and adjusting retirement age to changing income, making withdrawals, and providing educational content.

Here is a fun and brief explainer animation about the 4-pot model (not created by me).
Here is another promotional video created in an earlier stage of the product, where you can also briefly see me actually working on the designs 😅

The income pots introduced a layer of complexity, as they could easily fall into surplus or shortfall based on variables like income amount or duration. In these intricate scenarios, our focus remained on delivering clear and straightforward explanations through effective UI, UX, and content design, adopting a user-friendly, hand-holding approach.
Complex journeys, such as building a retirement plan and transferring funds between pots, underwent numerous iterations guided by extensive user research. We had a great team of in-house user researchers, and I had the privilege of regularly participating in user research sessions not only by creating prototypes of specific journeys, but also attending the sessions and learning from their expertise. For a more in-depth exploration of our work on the Illustration & Quote journey, please refer to a separate case study linked here.
The dashboard played a pivotal role in the user experience, serving as a central hub for an overview of savings and providing essential actions.
Additionally, we designed other essential pages and journeys, including enrolment, transaction history, pot detail pages, inbox, and account settings.
To ensure accessibility, we collaborated with a digital accessibility agency to audit our designs and iterate accordingly. Throughout this project, beyond design work, I actively engaged in agile ways of working with our cross-functional project team, comprising product owners, project managers, business analysts, and stakeholders. I occasionally led and consistently participated in UX workshops, discovery sessions, and agile rituals. This collective effort proved invaluable in navigating the challenging stages of the product development cycle, aligning design and development processes, and ensuring that our plans and scopes aligned with business requirements.

Here's a video where I talk about the UI design aspect of Smart Retire:
In 2020, Smart Retire was successfully launched and made available to members of the Smart Pension platform. We also expanded our horizons by working on global projects in the United States, Australia, and the United Arab Emirates, tailoring the product to meet specific country-specific terminology and regulatory requirements for our clients. Working on Smart Retire provided me with the valuable experience of the end-to-end design and development cycle of a complex fintech product.
Smart Retire