Toshi - Hadass Sternberg

Toshi — 2022
Invest for retirement with every purchase

We increased user engagement in the Toshi app by redesigning the investment portfolio overview for beginners, simplifying the stock-portfolio view to offer clearer insights and build trust.

Toshi is a German based startup that helps users invest money for their retirement. Toshi's app automation invests a percentage of every cashless purchase the user makes into a long-term portfolio.

My responsibilities: UX Research, UX Design, Prototyping, Design System, UI Design
Project duration: 2 weeks
Team: 2 product designers
Credits: Ironhack Berlin, Toshi

All copy and content on this project are fictional and used solely for display purposes

💰 The Toshi app

Toshi is an investment app for beginners with no prior experience. It automatically invests a percentage of every cashless purchase into long-term stock investments. With three portfolio options varying in risk, Toshi makes retirement investing simple and accessible.

The core target users are: Germany based 18-45 y.o. men and women, with no prior investment experience.

🏃‍♀️‍➡️ Project kick-off

We joined the project when Toshi was in the seed stage, with prototype flows in place and are at the point of market validation.

Toshi's problem statement:
How can we redesign a portfolio overview which has all necessary information and is easy to understand for people who did not invest before?

Original app screens

⛰️ The challenge

In a stakeholder interview, we learned that Toshi's startup was stuck at the market validation stage due to user mistrust and frustration. We hypothesized that their broad targeting approach made it difficult to identify consistent behavioral patterns, hindering the ability to address users' actual needs.

Our main challenge: How can we address the underlying emotional and psychological barriers that users faced regarding using the app, and retirement investments?

🧠 The process

We began with a comprehensive research phase aiming to discover:
• Understand the users' needs and motivations: Identifying pain points like confusion and frustration, while empathizing with users' financial fears.
• Learn best practices for independent stock investment: Gathering insights from industry standards to guide our design.

We conducted usability tests and user interviews to uncover pain points. Additionally, we interviewed a subject matter expert (SME) and performed a competitor analysis to benchmark successful financial tools.

Usability test vs SME interview quotes

User interviews results in KPIs

🗺️ Discovering design oportunities

We clustered insights using an affinity diagram and prioritized pain points with dot-voting. This led to creating two personas — Julia and Mateo — representing user's behavioral archetypess.

We focus on the following key pain-points:
• Finance scares me: Users felt overwhelmed by financial jargon and unclear data.
• Lack of trust: Users lacked confidence in the platform's security and reliability.
• Stressful market moments: Users were anxious about losing money, especially during market fluctuations.

User interviews transcripts highlights important insights

Affinity diagram clustering user's feedback, needs and pain-points

User persona definition

💭 Ideation to solution

In the ideation phase, we used low-fidelity sketches to explore how to present financial information in a way that aligns with user feedback and is easily digestible for beginner investors.

📝 Validate with usability tests

We performed a second usability test session with a mid-fidelity prototype, we observed a significant shift in user behavior. Initially, users felt stressed and anxious, often exiting quickly. With the redesigned flow, users appeared noticeably calmer, more confident, and engaged, spending more time exploring their portfolios and making informed decisions.

Low-fi concept iterations

User flow - Market drop scenario

Design prototype for usability test

🚀 The Solution: Simplifying overview for beginners

Our solution simplified the portfolio overview, focusing on clear insights rather than complex data, addressing pain points at both the interaction and journey levels for a smoother user experience.

Improving features

Toshi app redesign

1️⃣ Action driven home screen

The new home page boosts user confidence and fosters long-term engagement.

Key improvments:
• Tangible goal representation: Visualize retirement goals with a house illustration, aligning with user feedback.
• Goal progress banners: Motivate consistent investing with prompts tied to retirement goals.
• Educational links (stretch goal): Provide beginner-friendly articles to build confidence.

Primary portfolio card

New home screen

2️⃣ Portfolio page insights

The new portfolio page prioritizes insights over data while adding more trasnperancy on the portfolio details.

Key improvments:
• Portfolio overview: Displaying a clear summary of performance and progress toward retirement goals.
• Guiding explanations: Guiding users by adding tooltips and banners to clarify financial terms and reduce intimidation.
• Long-term forcast progress bars: Showcasing long-term investment predictions to make retirement goals tangible.
• Breakdown by industries: Including a breakdown of investments by industry to increase transperancy.

New portfolio screen

Monthly and long-term investment progress bars

3️⃣ Live portflio with financial clarity

The live portfolio screen was redesigned to provide better financial support during market fluctuations:

Key improvments:
• Objective tone of voice: Information is presented neutrally and accessibly to inform users without bias.
• Interactive graphs: Users can explore trends, historical data, and performance metrics with ease.
• Graph Summaries: Clear explanations accompany graphs, simplifying complex market situations.
• Market Alert Banners: Alerts guide users during portfolio drops, offering context and actionable options.

Guiding tooltips

New live portfolio screen

4️⃣ Clear transaction overview

The transaction screen was updated to provide better clarity and security for users:

Key improvments:
• Chronological transaction history: Transactions are now displayed by calendar months for easier navigation and tracking.
• Investment status indicators: Green vs gray dots distinguish between invested and non-invested transactions.

New transactions screen

Transactions history section

5️⃣ Look & Feel rebranding

The app's design was reimagined to foster trust and professionalism while maintaining Toshi's core identity:

Key improvments:
• Refined color palette: The original Toshi colors were adjusted for a more reliable and polished appearance.
• Material design alignment: The interface was updated to align with Material Design guidelines, ensuring consistency and usability.
• Added Illustrations: Introduced illustrations to enhance communication and user engagement.

The usability tests showed users associated the new branding with trusted bank aesthetics.

Toshi brand and design system redsign

📈 The Outcome

Toshi's team integrated core insights from our research and design features into their MVP launch, including tangible goal visualizations, objective info and expert advice banners, and greater transparency about the portfolio breakdown.

🌱 Key learning

As a product designer, I learned research user needs from multiple angles —beyond qualitative insights, but also real-life usability and expanding to industry-level analysis and expertise.

I also learned that abstract pains like trust can be addressed on different product levels, offering various ways to engage users effectively.

Toshi display

↖ Go back to

Home page

Next project →

Cum to Sleep

Top