Redesigning the funds page for Aspire

Enabling customers to access multiple sources of funds at a single place within the dashboard

Redesigning the funds page for Aspire

Enabling customers to access multiple sources of funds at a single place within the dashboard

Responsibilities

Requirement gathering

Stakeholder interviews

Ideation

Competitive analysis

Wireframing

Visual design

High-fidelity prototyping

Documentation

Team

1 Product Designer

1 Product Manager

1 Design Manager

Duration

(Apr '22 - Jun '22)

3 Months

Prototype links

Responsibilities

Requirement gathering

Stakeholder interviews

Ideation

Competitive analysis

Wireframing

Visual design

High-fidelity prototyping

Documentation

Team

1 Product Designer

1 Product Manager

1 Design Manager

Duration

(Apr '22 - Jun '22)

3 Months

Prototype links

Project overview

Responsibilities

Requirement gathering

Stakeholder interviews

Ideation

Competitive analysis

Wireframing

Visual design

High-fidelity prototyping

Documentation

Team

1 Product Designer

1 Product Manager

1 Design Manager

Duration

(Apr '22 - Jun '22)

3 Months

Prototype links

Responsibilities

Requirement gathering

Stakeholder interviews

Ideation

Competitive analysis

Wireframing

Visual design

High-fidelity prototyping

Documentation

Team

1 Product Designer

1 Product Manager

1 Design Manager

Duration

(Apr '22 - Jun '22)

3 Months

Prototype links

About Aspire
  • Singapore based B2B fin-tech startup.

  • Helps companies to manage all of their financial needs.

  • Backed by investors like YCombinator and Sequoia Capital.

  • Got featured into Singapore's top 10 fastest growing startups - '23 and Linkedin top startups - '22.

To send/receive money, any customer at Aspire has 3 sources of fund:

  • Account

  • Advance limit

  • Wallet

Requirement

Comparing old and new accounts page design

Drag the slider to the right to see the new design

Process

Step 1 : Understanding the requirements

Talking to the product manager, design manager was the first step I did to understand the requirements, prioritize, set timelines and understand about the existing accounts page.

Talking to the product manager, design manager was the first step I did to understand the requirements, prioritize, set timelines and understand about the existing accounts page.

Why was a redesign required?

With three different sources of funds, it would be easier for the customers if they could access all of them at one single place within the dashboard.

What are the different sources of funds

The launch of a new Source of Funds (wallet) led the customers have 3 different sources of funds in total:

  1. Accounts

  2. Advance limit

  3. Wallet (New addition).

Now you would ask, what are these different sources of funds and how do they function, right? Have a look at the image below:

The launch of a new Source of Funds (wallet) led the customers have 3 different sources of funds in total:

  1. Accounts

  2. Advance limit

  3. Wallet (New addition).

Now you would ask, what are these different sources of funds and how do they function, right? Have a look at the image below:

Analyzing existing accounts page

Step 2: Brainstorming and Quick Dirty Prototypes (QDPs)

What I did : Once the requirements were clear, I started creating pen paper based UIs showing different versions of the funds page, so that I can share it with my design manager and get an early feedback.

Step 3: High-fidelity Iterations

Key design decisions

Final designs

Mobile

Final prototypes

Desktop prototype

Desktop prototype

Mobile prototype

Learnings

Project management - Setting the right expectations and managing multiple projects at the same time

At first, I struggled to estimate design delivery time. With time and proper feedback from my manager, I improved by:

  • Prioritizing tasks and saying NO when needed.

  • Sharing early to reduce waste and ensure alignment.

  • Communicating delays upfront.

  • Under-committing and over-delivering.

Prototyping skills and attention to details

I was forced outside of my comfort zone when requested to build completely detailed prototypes with interactions for each aspect. I had never built prototypes with that degree of detail. As a result, I improved at prototyping, paying attention to the details, and used Figma for prototyping.

Using figma for faster and consistent designs

Amidst changing requirements and stakeholder input, tight deadlines caused design revisions. I embraced it as a challenge, seeking efficient UI design methods. Figma's component and auto-layout features proved essential, enabling swift feedback incorporation and design consistency.

Amidst changing requirements and stakeholder input, tight deadlines caused design revisions. I embraced it as a challenge, seeking efficient UI design methods. Figma's component and auto-layout features proved essential, enabling swift feedback incorporation and design consistency.

Other projects

Thanks for stopping by 😊

©2023 by Kartik Kataria