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
Visit site
Team
Team
Team
1 × product designer
1 × product manager
3 × engineers
1 × product designer
1 × product manager
3 × engineers
1 × product designer
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
8 Months
8 Months
Team
Team
Team
1 × product designer
1 × product manager
3 × engineers
1 × product designer
1 × product manager
3 × engineers
1 × product designer
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
1 × product designer
1 × product manager
3 × engineers
1 × product designer
1 × product manager
3 × engineers
1 × product designer
1 × product manager
3 × engineers
Tools
Tools
Tools
Figma
Framer
Figma
Framer
Figma
Framer
Duration
Duration
Duration
8 Months
8 Months
8 Months
© 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?
The redesign was essential for the company for two main reasons: it was a condition to secure a new investment, and by redesigning the application, the company wanted to enhance user experience by providing a more intuitive and reliable application design
The redesign was essential for the company for two main reasons: it was a condition to secure a new investment, and by redesigning the application, the company wanted to enhance user experience by providing a more intuitive and reliable application design
The redesign was essential for the company for two main reasons: it was a condition to secure a new investment, and by redesigning the application, the company wanted to enhance user experience by providing a more intuitive and reliable application design
The redesign was essential for the company for two main reasons: it was a condition to secure a new investment, and by redesigning the application, the company wanted to enhance user experience by providing a more intuitive and reliable application design
The redesign was essential for the company for two main reasons: it was a condition to secure a new investment, and by redesigning the application, the company wanted to enhance user experience by providing a more intuitive and reliable application design
The redesign was essential for the company for two main reasons: it was a condition to secure a new investment, and by redesigning the application, the company wanted to enhance user experience by providing a more intuitive and reliable application design
The redesign was essential for the company for two main reasons: it was a condition to secure a new investment, and by redesigning the application, the company wanted to enhance user experience by providing a more intuitive and reliable application design
The redesign was essential for the company for two main reasons: it was a condition to secure a new investment, and by redesigning the application, the company wanted to enhance user experience by providing a more intuitive and reliable application design
Users or investors
Users or investors
Users or investors
Users or investors
Users or investors
Users or investors
Users or investors
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 the best solution, especially when it comes to complex financial applications, as it requires more resources and there would be no time to support the existing application, which would negatively affect existing customers. Therefore, we decided to approach the redesign gradually in stages, starting with the existing application improvements.
Creating a new design from scratch is not the best solution, especially when it comes to complex financial applications, as it requires more resources and there would be no time to support the existing application, which would negatively affect existing customers. Therefore, we decided to approach the redesign gradually in stages, starting with the existing application improvements.
Creating a new design from scratch is not the best solution, especially when it comes to complex financial applications, as it requires more resources and there would be no time to support the existing application, which would negatively affect existing customers. Therefore, we decided to approach the redesign gradually in stages, starting with the existing application improvements.
Creating a new design from scratch is not the best solution, especially when it comes to complex financial applications, as it requires more resources and there would be no time to support the existing application, which would negatively affect existing customers. Therefore, we decided to approach the redesign gradually in stages, starting with the existing application improvements.
Creating a new design from scratch is not the best solution, especially when it comes to complex financial applications, as it requires more resources and there would be no time to support the existing application, which would negatively affect existing customers. Therefore, we decided to approach the redesign gradually in stages, starting with the existing application improvements.
Creating a new design from scratch is not the best solution, especially when it comes to complex financial applications, as it requires more resources and there would be no time to support the existing application, which would negatively affect existing customers. Therefore, we decided to approach the redesign gradually in stages, starting with the existing application improvements.
Creating a new design from scratch is not the best solution, especially when it comes to complex financial applications, as it requires more resources and there would be no time to support the existing application, which would negatively affect existing customers. Therefore, we decided to approach the redesign gradually in stages, starting with the existing application improvements.
Creating a new design from scratch is not the best solution, especially when it comes to complex financial applications, as it requires more resources and there would be no time to support the existing application, which would negatively affect existing customers. Therefore, we decided to approach the redesign gradually in stages, starting with the existing application improvements.
Application architecture
Application architecture
Application architecture
Application architecture
Application architecture
Application architecture
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!
Our first step was to understand how the application was built. 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.
Our first step was to understand how the application was built. 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.
Our first step was to understand how the application was built. 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.
Our first step was to understand how the application was built. 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.
Our first step was to understand how the application was built. 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.
Our first step was to understand how the application was built. 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.
Our first step was to understand how the application was built. 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.
Our first step was to understand how the application was built. 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.
New features implementation
New features implementation
New features implementation
New features implementation
New features implementation
New features implementation
New features implementation
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?
In order to define and prioritise the development of new features, we conducted a competitive audit and identified the pain points and challenges faced by our current and potential users
In order to define and prioritise the development of new features, we conducted a competitive audit and identified the pain points and challenges faced by our current and potential users
In order to define and prioritise the development of new features, we conducted a competitive audit and identified the pain points and challenges faced by our current and potential users
In order to define and prioritise the development of new features, we conducted a competitive audit and identified the pain points and challenges faced by our current and potential users
In order to define and prioritise the development of new features, we conducted a competitive audit and identified the pain points and challenges faced by our current and potential users
In order to define and prioritise the development of new features, we conducted a competitive audit and identified the pain points and challenges faced by our current and potential users
In order to define and prioritise the development of new features, we conducted a competitive audit and identified the pain points and challenges faced by our current and potential users
In order to define and prioritise the development of new features, we conducted a competitive audit and identified the pain points and challenges faced by our current and potential users
Fast document collection
Fast document collection
Fast document collection
Fast document collection
Fast document collection
Fast document collection
Real-time categorized financial reports
Real-time categorized financial reports
Real-time categorized financial reports
Real-time categorized financial reports
Real-time categorized financial reports
Real-time categorized 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
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
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
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
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
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
Outcome examples
Outcome examples
Outcome examples
Outcome examples
Outcome examples
Outcome examples
Outcome examples
Accounts
Accounts
Accounts
Accounts
before/after
before/after
before/after
before/after
KYB
KYB
KYB
KYB
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
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
After deciding on the style of the product, I started working on the new design system.
As we had a lot of complex elements, we decided to make a custom system of components, so each component had its own documentation.
Final outcomes
Final outcomes
Final outcomes
Final outcomes
Final outcomes
Final outcomes
Final outcomes
