Contents

＋

#Overview 1Introduction 2User Flow Analysis

3User Research 4Competitor Analysis 5Design System

6Wireframing 7Final Design 8Conclusion

Intro
The Nutmeg mobile app allowed users to build and manage diversified investment portfolios, offering transparency around where funds were allocated while keeping fees low through the use of technology.

Challenge
As part of a broader company rebrand, the app required a comprehensive refresh. The previous interface lacked clarity, consistency, and did not fully instil trust—particularly among less experienced investors.

Solution
The app was redesigned to align with the new brand identity. The updated interface delivered meaningful information in a clean, intuitive layout, increasing usability, promoting user confidence, and reinforcing brand consistency.

1. Introduction

Following the success of Nutmeg’s web redesign, the mobile app was identified as the next key touchpoint to reflect the brand’s updated visual identity. The app enabled users to build and manage investment portfolios, track performance, and understand where money was being invested, all while maintaining low fees. The challenge lay in aligning the app's functionality with the cleaner, more confident brand image, while improving usability and clarity across the experience.

App Screens

1. User Flow Analysis

A detailed user flow diagram (shown below) was produced to visualise the end-to-end onboarding journey, from registration through to portfolio access and management. Key integrations with backend services (authentication, risk assessment, KYC, and account setup) were identified to highlight technical dependencies.

User Flow

The flow began with registration, including email, password, and biometric setup, followed by navigation to the Non-Investor Home. Users then progressed through pot creation steps such as goal setting, contribution preferences, and risk level selection. Once the pot was completed, a profile was filled out, leading to a verification stage that included risk assessment and AML/KYC checks. Upon successful verification, users moved on to selecting investment preferences and completing payment processing. An optional ISA account path was also available.

Decision points such as “Is pot 100% complete?” and “Does user want an ISA?” were clearly mapped to show branching paths.

Screens were colour-coded for clarity:

Green

Existing screens.

Yellow

Existing screens requiring updates.

Blue

New screens to be designed.

The following new screens were introduced to improve the flow structure, compliance, and user clarity:

Email, password, marketing consent

Consolidated account credentials and marketing preferences at the start of the journey, ensuring GDPR compliance and setting clearer communication expectations.

Non-Investor Home

Provided a dedicated space for users who had not yet completed onboarding, enabling targeted prompts and reducing confusion compared to showing a default dashboard.

Pot Overview

Offered a high-level summary of pot setup progress before moving to verification, giving users a chance to review and confirm key details such as goals, contribution plan, and risk level.

This visual artefact provided a shared reference for stakeholders, supported the identification of opportunities to streamline the journey, and ensured the right interactions and content were surfaced at appropriate stages in the user experience.

2. User Research

To gain deeper insight into user sentiment, moderated interviews were conducted with 20 participants from a range of financial backgrounds, including both seasoned investors and those new to investing. The goal was to understand user behaviour, expectations, and emotional responses when navigating the Nutmeg app.

Each session explored the full end-to-end journey, from onboarding to checking performance, and participants were encouraged to think aloud while using the app. The collected feedback was synthesised through affinity mapping, which revealed recurring themes and shared frustrations.

Group Brainstorming Sessions Were Held to Dig Deeper into the User Research

The following pain points were identified:

Onboarding Was Too Lengthy

The initial sign-up and pot creation journey involved too many steps, leading to user fatigue and increased drop-off rates.

Content Was Overwhelming

Excessive reading and dense blocks of text required frequent scrolling, which felt tedious—especially on mobile.

Navigation Was Confusing

Users often struggled to locate important information such as portfolio performance or account details.

Financial Jargon Was a Barrier

The use of complex, industry-specific terminology alienated less experienced investors and hindered understanding.

Design Lacked Visual Appeal

The app’s overall aesthetic was seen as outdated and uninspiring, failing to build trust or reflect a modern investment platform.

Inconsistent Visual Language

UI elements varied in style and hierarchy, making interactions feel disjointed and reducing the overall sense of cohesion across the app.

3. Competitor Analysis

To gather insights and uncover best practices, a competitive review was conducted across several leading investment platforms, including MoneyFarm, Wealthify, Wealthfront, and Hargreaves Lansdown. The goal was to assess how these apps handled layout, usability, and overall user experience.

Competitor App Screens

Key Findings

Navigation Standards

Most apps positioned core menus and charts prominently, making performance tracking and navigation quick and intuitive.

Efficient Onboarding Patterns

Several competitors streamlined the onboarding experience with progress indicators and guided steps for a smoother flow.

Clear Data Visualisation

Competitor apps used intuitive charts and investment breakdowns, offering inspiration for how to present complex information simply.

Account Transparency Features

Some competitors offered clear portfolio summaries and real-time balance updates that built user trust through better transparency.

Tone and Language Simplicity

Wealthify employed accessible language, setting a benchmark for reduced jargon and making investing less intimidating.

Visual Identity Gaps

Competitor platforms often relied on bland, uninspiring colour palettes that lacked distinction or emotional appeal.

Limited Personalisation

Few apps tailored content or flows based on user goals or risk appetite, resulting in a generic, one-size-fits-all experiences.

Missed Opportunities for Engagement

Very few apps made use of micro-interactions or contextual tips to keep users engaged and informed during key tasks.

Cluttered Information Hierarchy

Some apps presented information in dense blocks, increasing cognitive load and making it harder to digest key content at a glance.

These observations helped inform design decisions that aimed to position Nutmeg as a visually engaging, user-friendly, and clearly differentiated experience within the market.

4. Design System

To ensure consistency across the app and align with the updated brand direction, a comprehensive design system was established. This system defined foundational design principles and provided reusable components to support scalability and clarity throughout the product.

Grid System

A flexible 8pt grid was implemented to bring structure and rhythm to layouts, enabling better alignment and spacing across all screen sizes.

Colour Palette

A refreshed palette was introduced, drawing from the new brand identity. It offered a balance between sophistication and warmth, while also meeting accessibility standards.

Typography

Clear, legible typefaces were selected to enhance readability and establish a clean visual hierarchy across headings, subheadings, and body text.

Iconography

A custom icon set was created to improve visual communication, simplify navigation, and reduce reliance on text-heavy content.

The Grid

Colour Palette

Typography

Iconography

The design system became a shared language between design and development teams, ensuring a consistent and efficient rollout across both iOS and Android platforms.

5. Wireframing

Sketches were created to explore layout ideas and user journeys, drawing directly from the insights gained during research. These sketches helped clarify information hierarchy and interaction patterns early on.

The sketches were then developed into low-fidelity wireframes, enabling rapid testing and iteration without heavy visual detail. These wireframes served as a foundation for the high-fidelity designs, aligning closely with the newly established design system and visual language.

Wireframe Sketches

Low-Fidelity Wireframes

High-fidelity wireframes were created using the new visual style to bring clarity and detail to the concepts. Regular feedback from internal teams and test users supported an iterative process, allowing for quick and meaningful refinements.

This phase helped connect early ideas with the final product, ensuring the design was both practical and on-brand.

High-Fidelity Wireframes Were Created in Sketch

6. Final Design

Final designs for both iOS and Android platforms were completed, ensuring greater consistency with the desktop branding. Key improvements included simplified content screens with increased white space, and a more consistent visual hierarchy across devices. Financial data was presented more clearly through redesigned charts and visuals. Complex terms were either removed or reworded to improve understanding, especially for novice investors.

Scroll Here

Final App Screen Designs

7. Conclusion

The redesigned app launched to a positive reception, delivering the following user and business benefits:

Streamlined Onboarding

Reduced steps and lower cognitive friction improved first-time user flow.

Clearer Portfolio Access

Simplified layouts and improved navigation made it easier to find key data.

Stronger Brand Connection

Refined visuals created a more emotionally engaging and polished experience.

Boosted User Confidence

Clearer information and flows helped users feel more secure in exploring investments.

The project also led to a stronger cross-platform consistency and introduced a mobile design guideline to support internal teams and third-party partners.

Despite tight timelines, core sections were meaningfully improved. With more time, broader user testing and deeper interaction design could have been explored to further enhance feedback, accessibility, and engagement.

This project highlighted the value of collaborative iteration, user insight, and consistent visual language in delivering meaningful product improvements.