My role at Doughrise was to creatively redesign the mobile and web UX and UI to launch the app in App Store. I worked with a team of designers and developers to make this project happen.
We work in a scrum environment, where we had tasks to be delivered at the end of every 2 weeks sprint. I had 2-4 tickets each sprint I must complete to successfully deliver prototypes to our developers for coding.
Product Designer
April 2021-Present
6 People (Product Manager, Product Designers, Front-End and Back End Developers)
Our first issue we faced was to gather previous research from the previous team, and we found that we needed to set up additional user testing to get user's perspective on our product. After rounds of 30+ user testing, we got a clearer sense of pain points users face when it comes to using personal budgeting apps and want to solve that issues through DoughRise.
I started my role in this project with the idea of continuing the progress that previous designers have done for the app. However, a lot of restructuring has to be done in terms of getting my foot on the right ground. Our roles included redefining the user flows, drafting new UI styleguide, and the overall UI wireframes for 8 main functions of the app.
Dough Rise came about as an ambitious idea to serve the need for an comprehensive personal budgeting app that is easy to use for new budgeters, yet complex enough to fulfill the needs of experienced budgeters. As a UX designer for this ambitious project, I came onboard with user research already established by previous product managers & designers.
1. Integration of Google Sheets. Users with exisiting budgets on Google Sheets can import their information into our budget
2. Intuitive use of budgeting: Personal budgeting that allows users to custom create their categories.
What we learned from our competitor analysis is that there are not enough budgeting apps out there that contain the following features:
Through our research, it seems like many budgeters, despite starting out or are experienced, have varied experience using budgeting apps. The common ground is the majority have used a spreadsheet function as a budget. And Dough Rise has that ambitious determination to integrate a Google Sheet Function into our app.
To start off our process, it was important to consider our user personas to fully start empathizing with the needs of our users.
Our other user persona is our "Seasoned Budgeter". The users who has been using financial budgeting apps for a while, with a lot of interest to try out different apps. With all of the financial budgetting apps out there, these seasoned users like to experiment to see which apps can fit their needs best.
From our user research for the market, these are the following pain points we found for our Seasoned Budgeters:
Our first user persona is our "Beginner Budgeter". Since our product is geared toward a younger audience with intentions in mind to save money by starting to budget.
From doing a series of user research testing with our team, we gathered that the main pain points of our Beginner Budgeters are:
Lack of motivation to use app: A lot of beginner budgeters are learning to form a habit to save money, and that can take a considerable amount of time to manually add spending details. So it is important that our app has a lot of automations.
Lack of instructions within app. A lot of beginner budgeters face the issue of jumping headfirst into using a budgeting app. The features are pretty easy to understand, but they face issues of fully understanding how to use each features fully, and how each features are depending on each other.
After Identifying all of the features we want to include in this MVP, it was crucial to identify our next steps in the design process:
With budgeting apps, it is important to identify how all of the budgeting features relate to each other, since the features are linear and it is important to guide our users to understand how the information is set up.
Outside of the Budgeting hierarchy, the other features are non-linear, meaning that they can be accessed independently as long as users have created a budget initially. Therefore, it was important to continue our process to identify the order in which we want users to access our features from the tutorial screens.
Users will have the tutorial screens taking them through the steps to Create a Budget, Create a Category, Link their Bank (optional) and Add a Transaction. They are required to make a budget and category. Then afterwards, they will have the options to link a bank, create a manual transaction, and add a savings goal.
After determining the pain points that our users have from their past experiences using personal budgeting apps, our next task was to set out to identify prioritized solutions to solve user's needs.
Both of our user personas have distinctly different needs, so it was crucial to find a happy medium where our app can cater to beginner budgeters and encourage them to budget sustainably, while enable our seasoned budgeters to finally use an app that can allow them the highest level of flexibility.
It was crucial that we identified the most critical elements of our app for the launch of our MVP.
The features include:
Our next steps are to create low-fidelity wireframes, perform user tests, and create high-fidelity wireframes after a series of iterations. Throughout the design process, we faced several design challenges were we had to rework some design in order to improve user's experience.
How to figure out how to design the homepage to showcase overall budget details, as well as individual details of all the categories under the budget, with the obligation of adding colorful measure bars, but without overwhelming users with monotonous measure bars and overload of information.
Original design from designers before me designed the homepage with functionality, but lacked hierarchy on the homepage.
New tile design also brings a lot more usage to users, including:
Figuring out how to streamline the process of having a set of parent categories for our backend to collect data from users, but also allow the users flexibility of creating categories based on what they want within their budget.
Updated Category Flow Redesign after Iterations:
Original Design of the Category Flow consists of:
What the original Category flow lacked:
When users create specific categories under their budget, they can create any categories they want, and will get to select an icon to identify what kind of categories they have created. Thus, this ensures we have data recorded on backend to know exactly what kind of categories users have created.
Creating a Transaction Flow & the Iteration that follows
Creating a transaction seemed simple enough, we just needed to create a standard user flow for clients to enter:
However, after 2 rounds of user testings, we realized we needed to shorten our transaction flow.
In original design, the entire transaction process took 2 screens to be completed, but after a round of user testing, we found that having 2 screens to complete an input process proved to be too long and required users to use too many clicks to arrive at the completion of the task.
Another issue we faced: what if users created a transaction flow for a transaction for a category they have not created yet?
The goal is to make this app more intuitive for users, compared to other budgeting apps, and we wanted to find a way to create an easy transaction flow that can account for user's needs, including the option if they have forgotten to create a category that they want their transaction to go under.
Final Design of Transaction Flow, following iterations:
Original Design of Transaction Flow:
The current UI gives a modern look that helps reduce information overload since it is broken into 2 sections.
Section 1: Overall budget progression bar
Section 2: Breakdown of your budget with categories*
Section 3: Budget Dropdown function to easily visit other budgets, sourced through Year and Month.
*Categories are unique separators that provide information of different types of classifications (Food, Entertainment, Shopping, etc).
Users can manually or automatically update their transaction page by connecting their bank through Plaid
If users choose to connect their bank account, any purchases that they make will reflect on the budget that was created.
Users also have a choice to quickly create a category while they are creating a transaction, incase they want to input in a transaction for a category they otherwise have not created prior.
Users will be able to connect their Google account to do the following:
As the product designer, I was in a position to constantly brainstorm design solutions around obstacles. It was great to work with such a diverse team, to get everyone's feedbacks and also share ideas. This project really taught me how a seemingly easy feature to design out, can actually prove to be a design challenge.
Continue updating the product as we conduct monthly rounds of user testing, as well as pushing out new tech updates with our Google Sheets feature.
