Expense Funnel
rebuilt in Tellow
Rebuilt the Expense Funnel in web app and native app to make it more user-friendly.
.png)
Role
UX/UI designer intern
Project overview
Duration
1.5 months
.png)
Tools
Figma
Tellow is a software company with a focus on bookkeeping. It provides the feature known as Purchase in web app and Expense in native app, allowing freelancers and entrepreneurs to effortlessly upload receipts and record them.
-
In web app, there are two separate expenditures: The unprocessed expenses are referred to as files and kept in the Queue section, while the processed expenses are known as purchase invoices and kept in the Invoice section.
-
In native app, there is only one processed expense stored in the Expense area, therefore there is no unprocessed expenses in current design.
The scope of this rebuilt includes:
-
Design for both web app and native app.
-
Both processed and unprocessed invoices need to be displayed as purchase invoices, and be differentiated by their statuses.
-
Create a new UI for the list of invoices.
-
Focus on the hierarchy of menubar.
-
The UI needs to be updated along with adding the new expense filter options.
-
Better motivate the users to finish up any outstanding invoices.
Design Process
I followed the design process which includes the following stages:
01
Problem Statement
02
Research
03
POV
04
Ideate
05
Final design
Problem statement
The current flows are not intuitive for the users, so we would like to restructure the current expenditure flow and replace it with more straightforward user flows.
Below are the screenshots of the current main dashboard for the expense features from the web app and native app:
Web app - Purchase invoices (Invoice)
Web app - Unprocessed expenses (Queue)
Native app - Processed expense
Research
Due of time constraints, I started by getting inspirations from companies' samples to see how they implement this kind of thinking. And also I conducted the stakeholder interviews with our internal team members.
Reference research
I used Trello and Linear as my references because they both use a similar layout to display the various ticket statuses.
Main takeway
-
They utilize the hierarchy to indicate different statuses, including To Do, Doing, and Done.
-
They motivate people to act by displaying progress through text and icons.
Stakeholder interviews
Before making a design decision, it's crucial to involve the stakeholders in this stage as well to gather their point of views. In this project, I've done two rounds of stakeholder interviews, and the 2nd stakeholder interview was conducted after the Ideate stage.
In the 1st Stakeholder Interview section, the stakeholders are including:
-
Mobile Developer: to better comprehend the user flow.
-
Product Manager: to define the Minimum-Viable-Products and prioritization.
-
Customer Support Team: to gather the paint points and frictions directly from the users.
Main takeway
-
To keep design consistent, concentrate first on the webapp and then on the native app.
-
Several users feel that the handling of expenses takes a lengthy time.
User Flows
I mapped out the user flow first to get a better understanding of the steps users will take on our web app and native app to accomplish a certain goal.
Ideate
After mapping out the user flow, I started by sketching to gain a better understanding of the layout and I used Figma to create the wireframes. Here was my original concept for the web app:
Sketch
Wireframes
.png)
2nd Stakeholder interviews
After the initial design, I conducted a 2nd round of stakeholder interviews with the Product Manager and Customer Support Team to collect their feedback on the design I made.
Main takeway
-
A way to show data more effectively for users who have more than five processed or unprocessed files.
-
It would be preferable to offer a method for users to quickly and efficiently process the files.
-
It is preferable to utilize fewer colors in the present design to improve readability and prevent visual overload.
-
Next to the "Status" column, the "Filter" placement is not noticeable.
6th design
After obtaining the feedback from internal stakeholders, I continued with the online search to see how we could motivate users to process files and considered ways to put the feedback into practice.
And after refining it five more times and having the discussion back and forth with the Product Manager, I reached this 6th design:
-
I created the expandable bar. When the user click on “Show the other 15 files”, the other files will be presented.
-
I removed the "Filter" from unprocessed files because there will only be an unprocessed state.
-
In order to quickly process the files, I included the CTAs "Make final" for the unprocessed files and "Book" for the processed invoices.
-
To motivate the users to finish the incomplete files, I proposed to use either the status bar or the graph.
Web app v6
.png)
Final Decision
After having the discussion with Product Manager, we came up with these final decisions:
-
Since our intention is to keep the users staying and working on the unfinished files, we opted to remove the CTA "Book" for processed invoices.
-
Providing the "Delete" button in case users change their mind.
-
We chose to utilize a status bar with various colors since it provides users additional drive to finish incomplete files.
-
Instead of removing the "Filter" in Unfinished section, we decided to greyscale it to hint the users this is unavailable. If not, users will experience difficulty looking for the filter options.
-
Provide support for common file types to allow users to upload files in a flexible manner and to minimize the effort of converting to a particular format.
-
We chose to include "Book all" so that customers could simply book all of the unfinished files at once rather than selecting one by one.
Visual Design
Style guide
In order to maintain consistency with other design on web app and native app, I adhered to Tellow's existing design system as shown below.
Final Design
Web app
Native app
Retrospective
What I've learned
-
Before starting the design process, it is important to collaborate with the Customer Support Team to gather some points in order to identify the users' pain points.
-
I would be more innovative if I started designing on the Web app rather than the native app because the native app's relatively small screen size will restrict creativity.
Challenge
Context
It was quite challenging to motivate users to complete their unfinished files, because there were no comparable examples in current design.
Resolution
At the beginning, I was restricted by the existing design. After a closer look at various suggestions, I came up with either the status bar or the graph, and eventually, we decided to go with the status bar after consulting with the Product Manager. Also, I used different colors to convey the various emotional tensions to motivate the users.
Web app
.png)
Native app
.png)