Spenfi is a fast-growing financial startup that released the first version of its app in 2019. The company's aim is to streamline corporate expense management by combining a large number of financial features and processes in one app
Spenfi is a fast-growing financial startup that released the first version of its app in 2019. The company's aim is to streamline corporate expense management by combining a large number of financial features and processes in one app
Spenfi is a fast-growing financial startup that released the first version of its app in 2019. The company's aim is to streamline corporate expense management by combining a large number of financial features and processes in one app
Spenfi is a fast-growing financial startup that released the first version of its app in 2019. The company's aim is to streamline corporate expense management by combining a large number of financial features and processes in one app
Spenfi is a fast-growing financial startup that released the first version of its app in 2019. The company's aim is to streamline corporate expense management by combining a large number of financial features and processes in one app
Spenfi is a fast-growing financial startup that released the first version of its app in 2019. The company's aim is to streamline corporate expense management by combining a large number of financial features and processes in one app
Spenfi is a fast-growing financial startup that released the first version of its app in 2019. The company's aim is to streamline corporate expense management by combining a large number of financial features and processes in one app
Team
Team
Team
1 × product designer
1 × product manager
3 × engineers
2 × product designers
1 × product manager
3 × engineers
2 × product designers
1 × product manager
3 × engineers
My role
My role
My role
My role
My role
Product Design
Product Design
Product Design
Product Design
Product Design
Design System
Design System
Design System
Design System
Design System
Visual Design
Visual Design
Visual Design
Visual Design
Visual Design
Prototyping
Prototyping
Prototyping
Prototyping
Prototyping
Framer Development
Framer Development
Framer Development
Framer Development
Framer Development
Tools
Tools
Tools
Tools
Tools
Figma
Framer
Figma
Framer
Figma
Framer
Figma
Framer
Figma
Framer
Duration
Duration
Duration
8 Months
1 year
1 year
Team
Team
Team
1 × product designer
1 × product manager
3 × engineers
2 × product designers
1 × product manager
3 × engineers
2 × product designers
1 × product manager
3 × engineers
My role
My role
My role
Product Design
Product Design
Design System
Design System
Visual Design
Visual Design
Prototyping
Framer Development
Prototyping
Framer Development
Team
Team
Team
2 × product designers
1 × product manager
3 × engineers
2 × product designers
1 × product manager
3 × engineers
2 × product designers
1 × product manager
3 × engineers
Tools
Tools
Tools
Figma
Framer
Figma
Framer
Figma
Framer
Duration
Duration
Duration
1 year
1 year
1 year
© Eshly and Bella Design 2024
Why a redesign?
Why a redesign?
Why a redesign?
Why a redesign?
Why a redesign?
Why a redesign?
Why a redesign?
How does this page work?
How does this page work?
How does this page work?
How does this page work?
How does this page work?
How does this page work?
How does this page work?
After launching the first MVP version of the project, the company encountered significant challenges. In an attempt to improve the product, they quickly added numerous features without a clear strategy, resulting in an inconsistent user experience.
As a result, the application became difficult to navigate, overwhelming users and failing to address their actual needs. In addition, the lack of a structured approach to prioritisation made it difficult to maintain the functionality of the application, further preventing the company from effectively reaching its target audience.
After launching the first MVP version of the project, the company encountered significant challenges. In an attempt to improve the product, they quickly added numerous features without a clear strategy, resulting in an inconsistent user experience.
As a result, the application became difficult to navigate, overwhelming users and failing to address their actual needs. In addition, the lack of a structured approach to prioritisation made it difficult to maintain the functionality of the application, further preventing the company from effectively reaching its target audience.
After launching the first MVP version of the project, the company encountered significant challenges. In an attempt to improve the product, they quickly added numerous features without a clear strategy, resulting in an inconsistent user experience.
As a result, the application became difficult to navigate, overwhelming users and failing to address their actual needs. In addition, the lack of a structured approach to prioritisation made it difficult to maintain the functionality of the application, further preventing the company from effectively reaching its target audience.
After launching the first MVP version of the project, the company encountered significant challenges. In an attempt to improve the product, they quickly added numerous features without a clear strategy, resulting in an inconsistent user experience.
As a result, the application became difficult to navigate, overwhelming users and failing to address their actual needs. In addition, the lack of a structured approach to prioritisation made it difficult to maintain the functionality of the application, further preventing the company from effectively reaching its target audience.
After launching the first MVP version of the project, the company encountered significant challenges. In an attempt to improve the product, they quickly added numerous features without a clear strategy, resulting in an inconsistent user experience.
As a result, the application became difficult to navigate, overwhelming users and failing to address their actual needs. In addition, the lack of a structured approach to prioritisation made it difficult to maintain the functionality of the application, further preventing the company from effectively reaching its target audience.
After launching the first MVP version of the project, the company encountered significant challenges. In an attempt to improve the product, they quickly added numerous features without a clear strategy, resulting in an inconsistent user experience.
As a result, the application became difficult to navigate, overwhelming users and failing to address their actual needs. In addition, the lack of a structured approach to prioritisation made it difficult to maintain the functionality of the application, further preventing the company from effectively reaching its target audience.
4 reasons why
4 reasons why
4 reasons why
4 reasons why
4 reasons why
4 reasons why
4 reasons why
(Only at first glance...)
(Only at first glance...)
(Only at first glance...)
(Only at first glance...)
(Only at first glance...)
(Only at first glance...)
(Only at first glance...)
Too many features
Too many features
Too many features
Too many features
Too many features
Too many features
The app was overloaded with features that were not prioritised, making it complex and difficult to use
The app was overloaded with features that were not prioritised, making it complex and difficult to use
The app was overloaded with features that were not prioritised, making it complex and difficult to use
The app was overloaded with features that were not prioritised, making it complex and difficult to use
The app was overloaded with features that were not prioritised, making it complex and difficult to use
The app was overloaded with features that were not prioritised, making it complex and difficult to use
The app was overloaded with features that were not prioritised, making it complex and difficult to use
Inconsistent user journey
Inconsistent user journey
Inconsistent user journey
Inconsistent user journey
Inconsistent user journey
Inconsistent user journey
The user experience was inconsistent, leading to unnecessary steps and unmet goals
The user experience was inconsistent, leading to unnecessary steps and unmet goals
The user experience was inconsistent, leading to unnecessary steps and unmet goals
The user experience was inconsistent, leading to unnecessary steps and unmet goals
The user experience was inconsistent, leading to unnecessary steps and unmet goals
The user experience was inconsistent, leading to unnecessary steps and unmet goals
The user experience was inconsistent, leading to unnecessary steps and unmet goals
Poor role separation
Poor role separation
Poor role separation
Poor role separation
Poor role separation
Poor role separation
Different user roles were not clearly defined, leading to confusion and inefficiencies in how users interacted with the system
Different user roles were not clearly defined, leading to confusion and inefficiencies in how users interacted with the system
Different user roles were not clearly defined, leading to confusion and inefficiencies in how users interacted with the system
Different user roles were not clearly defined, leading to confusion and inefficiencies in how users interacted with the system
Different user roles were not clearly defined, leading to confusion and inefficiencies in how users interacted with the system
Different user roles were not clearly defined, leading to confusion and inefficiencies in how users interacted with the system
Different user roles were not clearly defined, leading to confusion and inefficiencies in how users interacted with the system
Complex verification
Complex verification
Complex verification
Complex verification
Complex verification
Complex verification
The onboarding and verification processes were complex and unclear, which had a negative impact on user retention
The onboarding and verification processes were complex and unclear, which had a negative impact on user retention
The onboarding and verification processes were complex and unclear, which had a negative impact on user retention
The onboarding and verification processes were complex and unclear, which had a negative impact on user retention
The onboarding and verification processes were complex and unclear, which had a negative impact on user retention
The onboarding and verification processes were complex and unclear, which had a negative impact on user retention
The onboarding and verification processes were complex and unclear, which had a negative impact on user retention
How to approach a redesign?
How to approach a redesign?
How to approach a redesign?
How to approach a redesign?
How to approach a redesign?
How to approach a redesign?
How to approach a redesign?
We want to see a new design
We want to see a new design
We want to see a new design
We want to see a new design
We want to see a new design
We want to see a new design
We want to see a new design
Creating a new design from scratch is not always the best solution, as it requires significant resources and takes focus away from maintaining the existing platform, potentially disrupting the experience for current users.
Instead, we took a strategic, phased approach to the redesign. By gradually improving the existing application, we ensured continued support for users while refining functionality, improving usability and addressing key pain points. This approach allowed us to create a seamless transition to an optimised experience
Creating a new design from scratch is not always the best solution, as it requires significant resources and takes focus away from maintaining the existing platform, potentially disrupting the experience for current users.
Instead, we took a strategic, phased approach to the redesign. By gradually improving the existing application, we ensured continued support for users while refining functionality, improving usability and addressing key pain points. This approach allowed us to create a seamless transition to an optimised experience
Creating a new design from scratch is not always the best solution, as it requires significant resources and takes focus away from maintaining the existing platform, potentially disrupting the experience for current users.
Instead, we took a strategic, phased approach to the redesign. By gradually improving the existing application, we ensured continued support for users while refining functionality, improving usability and addressing key pain points. This approach allowed us to create a seamless transition to an optimised experience
Creating a new design from scratch is not always the best solution, as it requires significant resources and takes focus away from maintaining the existing platform, potentially disrupting the experience for current users.
Instead, we took a strategic, phased approach to the redesign. By gradually improving the existing application, we ensured continued support for users while refining functionality, improving usability and addressing key pain points. This approach allowed us to create a seamless transition to an optimised experience
Creating a new design from scratch is not always the best solution, as it requires significant resources and takes focus away from maintaining the existing platform, potentially disrupting the experience for current users.
Instead, we took a strategic, phased approach to the redesign. By gradually improving the existing application, we ensured continued support for users while refining functionality, improving usability and addressing key pain points. This approach allowed us to create a seamless transition to an optimised experience
Creating a new design from scratch is not always the best solution, as it requires significant resources and takes focus away from maintaining the existing platform, potentially disrupting the experience for current users.
Instead, we took a strategic, phased approach to the redesign. By gradually improving the existing application, we ensured continued support for users while refining functionality, improving usability and addressing key pain points. This approach allowed us to create a seamless transition to an optimised experience
1.
1.
Understand our users
Analyse user behaviour, pain points, and feedback to gain a clear understanding of their needs
2.
2.
Research
Identify industry best practices and key areas for improvement, conduct competitive analysis
3.
3.
Prioritise
Assess which features are essential, which can be improved and which should be removed
4.
New architecture
Restructure the app’s architecture and user flows, ensuring a more intuitive and scalable design
5.
5.
Implement changes
Publish high-impact improvements updates on the website
Publish high-impact improvements updates
on the website
6.
6.
Test
Validate our design decisions through usability testing and user feedback
4.
4.
New architecture
New architecture
Restructure the app’s architecture and user flows, ensuring a more intuitive and scalable design
Understand our users
Understand our users
Understand our users
Understand our users
Understand our users
Understand our users
Understand our users
Customers. What do they want?
Customers. What do they want?
Customers. What do they want?
Customers. What do they want?
Customers. What do they want?
Customers. What do they want?
Customers. What do they want?
To effectively improve the application, we first needed to understand who our users were and the challenges they faced.
As different user roles have different functionalities, goals and pain points, we categorised users into key roles based on their needs and interactions within the application.
By collecting and analysing research data - including user feedback - we identified the key user roles and their specific goals and challenges:
To effectively improve the application, we first needed to understand who our users were and the challenges they faced.
As different user roles have different functionalities, goals and pain points, we categorised users into key roles based on their needs and interactions within the application.
By collecting and analysing research data - including user feedback - we identified the key user roles and their specific goals and challenges:
To effectively improve the application, we first needed to understand who our users were and the challenges they faced.
As different user roles have different functionalities, goals and pain points, we categorised users into key roles based on their needs and interactions within the application.
By collecting and analysing research data - including user feedback - we identified the key user roles and their specific goals and challenges:
To effectively improve the application, we first needed to understand who our users were and the challenges they faced.
As different user roles have different functionalities, goals and pain points, we categorised users into key roles based on their needs and interactions within the application.
By collecting and analysing research data - including user feedback - we identified the key user roles and their specific goals and challenges:
To effectively improve the application, we first needed to understand who our users were and the challenges they faced.
As different user roles have different functionalities, goals and pain points, we categorised users into key roles based on their needs and interactions within the application.
By collecting and analysing research data - including user feedback - we identified the key user roles and their specific goals and challenges:
To effectively improve the application, we first needed to understand who our users were and the challenges they faced.
As different user roles have different functionalities, goals and pain points, we categorised users into key roles based on their needs and interactions within the application.
By collecting and analysing research data - including user feedback - we identified the key user roles and their specific goals and challenges:
Admin
Admin
Admin
Admin
Admin
Fast document collection
Fast document collection
Fast document collection
Fast document collection
Fast document collection
Fast document collection
Fast document collection
Fast document collection
Real-time categorised financial reports
Real-time categorised financial reports
Real-time categorised financial reports
Real-time categorised financial reports
Real-time categorised financial reports
Real-time categorised financial reports
Real-time categorised financial reports
Real-time categorised financial reports
Payment approval and scheduling
Payment approval and scheduling
Payment approval and scheduling
Payment approval and scheduling
Payment approval and scheduling
Payment approval and scheduling
Payment approval and scheduling
Payment approval and scheduling
Accountant
Accountant
Accountant
Accountant
Accountant
Forecast your spend in Categories
Forecast your spend in Categories
Forecast your spend in Categories
Forecast your spend in Categories
Forecast your spend in Categories
Forecast your spend in Categories
Forecast your spend in Categories
Forecast your spend in Categories
Fast document collection
Fast document collection
Fast document collection
Fast document collection
Fast document collection
Fast document collection
Fast document collection
Fast document collection
Real-time notifications on cash
Real-time notifications on cash
Real-time notifications on cash
Real-time notifications on cash
Real-time notifications on cash
Real-time notifications on cash
Real-time notifications on cash
Real-time notifications on cash
Manager
Manager
Manager
Manager
Manager
Request for purchase function
Request for purchase function
Request for purchase function
Request for purchase function
Request for purchase function
Request for purchase function
Request for purchase function
Request for purchase function
Collaboration & productivity
Collaboration & productivity
Collaboration & productivity
Collaboration & productivity
Collaboration & productivity
Collaboration & productivity
Collaboration & productivity
Collaboration & productivity
Set & track budgets per employee
Set & track budgets per employee
Set & track budgets per employee
Set & track budgets per employee
Set & track budgets per employee
Set & track budgets per employee
Set & track budgets per employee
Set & track budgets per employee
Other roles
Other roles
Other roles
Other roles
Other roles
All process (budgeting, requests/approvals) & payment data in one place
All process (budgeting, requests/ approvals) & payment data in one place
All process (budgeting, requests/approvals) & payment data in one place
All process (budgeting, requests/approvals) & payment data in one place
All process (budgeting, requests/ approvals) & payment data in one place
All process (budgeting, requests/approvals) & payment data in one place
All process (budgeting, requests/approvals) & payment data in one place
All process (budgeting, requests/approvals) & payment data in one place
Smart cards
Smart cards
Smart cards
Smart cards
Smart cards
Smart cards
Smart cards
Smart cards
New application architecture
New application architecture
New application architecture
New application architecture
New application architecture
New application architecture
New application architecture
I can't edit a document!
I can't edit a document!
I can't edit a document!
I can't edit a document!
I can't edit a document!
I can't edit a document!
I can't edit a document!
By mapping all the pages and their flows, we were able to get a clear understanding of the functionality of each page and identify issues with the existing flows.
This step also helped us to implement numerous improvements across the application that significantly improved the user experience without being too radical for our existing customers.
By mapping all the pages and their flows, we were able to get a clear understanding of the functionality of each page and identify issues with the existing flows.
This step also helped us to implement numerous improvements across the application that significantly improved the user experience without being too radical for our existing customers.
By mapping all the pages and their flows, we were able to get a clear understanding of the functionality of each page and identify issues with the existing flows.
This step also helped us to implement numerous improvements across the application that significantly improved the user experience without being too radical for our existing customers.
By mapping all the pages and their flows, we were able to get a clear understanding of the functionality of each page and identify issues with the existing flows.
This step also helped us to implement numerous improvements across the application that significantly improved the user experience without being too radical for our existing customers.
By mapping all the pages and their flows, we were able to get a clear understanding of the functionality of each page and identify issues with the existing flows.
This step also helped us to implement numerous improvements across the application that significantly improved the user experience without being too radical for our existing customers.
By mapping all the pages and their flows, we were able to get a clear understanding of the functionality of each page and identify issues with the existing flows.
This step also helped us to implement numerous improvements across the application that significantly improved the user experience without being too radical for our existing customers.
Collecting valuable feedback
Collecting valuable feedback
Collecting valuable feedback
Collecting valuable feedback
Collecting valuable feedback
Collecting valuable feedback
Collecting valuable feedback
To gain deeper insight into how users interact with our application and the challenges they face, we introduced several feedback channels:
1) Slack User Inquiries & Complaints channel - a dedicated space for users to share their experiences, allowing us to identify pain points in real time
2) User Surveys - to measure user satisfaction with new design and identify specific areas for improvement
To gain deeper insight into how users interact with our application and the challenges they face, we introduced several feedback channels:
1) Slack User Inquiries & Complaints channel - a dedicated space for users to share their experiences, allowing us to identify pain points in real time
2) User Surveys - to measure user satisfaction with new design and identify specific areas for improvement
To gain deeper insight into how users interact with our application and the challenges they face, we introduced several feedback channels:
1) Slack User Inquiries & Complaints channel - a dedicated space for users to share their experiences, allowing us to identify pain points in real time
2) User Surveys - to measure user satisfaction with new design and identify specific areas for improvement
To gain deeper insight into how users interact with our application and the challenges they face, we introduced several feedback channels:
1) Slack User Inquiries & Complaints channel - a dedicated space for users to share their experiences, allowing us to identify pain points in real time
2) User Surveys - to measure user satisfaction with new design and identify specific areas for improvement
To gain deeper insight into how users interact with our application and the challenges they face, we introduced several feedback channels:
1) Slack User Inquiries & Complaints channel - a dedicated space for users to share their experiences, allowing us to identify pain points in real time
2) User Surveys - to measure user satisfaction with new design and identify specific areas for improvement
To gain deeper insight into how users interact with our application and the challenges they face, we introduced several feedback channels:
1) Slack User Inquiries & Complaints channel - a dedicated space for users to share their experiences, allowing us to identify pain points in real time
2) User Surveys - to measure user satisfaction with new design and identify specific areas for improvement
Accounts
Accounts
Accounts
Accounts
before/after
before/after
before/after
before/after
Verification
Verification
Verification
Verification
before/after
before/after
before/after
before/after
New design
New design
New design
New design
New design
New design
New design
Goodbye Haslle, hello Spenfi
Goodbye Haslle, hello Spenfi
Goodbye Haslle, hello Spenfi
Goodbye Haslle, hello Spenfi
Goodbye Haslle, hello Spenfi
Goodbye Haslle, hello Spenfi
Goodbye Haslle, hello Spenfi
Once all the major issues with the app had been resolved and the visual style had been agreed, we started working on a new design system to ensure design consistency across all pages
Once all the major issues with the app had been resolved and the visual style had been agreed, we started working on a new design system to ensure design consistency across all pages
Once all the major issues with the app had been resolved and the visual style had been agreed, we started working on a new design system to ensure design consistency across all pages
Once all the major issues with the app had been resolved and the visual style had been agreed, we started working on a new design system to ensure design consistency across all pages
Once all the major issues with the app had been resolved and the visual style had been agreed, we started working on a new design system to ensure design consistency across all pages
Once all the major issues with the app had been resolved and the visual style had been agreed, we started working on a new design system to ensure design consistency across all pages
Final outcomes
Final outcomes
Final outcomes
Final outcomes
Final outcomes
Final outcomes
Final outcomes
