Through Berkeley Innovation in Spring 2018, I worked as a product design consultant for Rye Financial on the design of an online client budgeting portal and their marketing website. I participated in the full design cycle from user research, ideation, prototyping, to user testing, and led the ideation phase.
The project was completed together with Yani Mai, Noe Abe, and Shuyin Xu, and we were mentored by Isabel Llacer.
Our client, Rye Financial, is an Oakland-based firm that provides accounting services to small businesses and non-profit organizations. The initial problem space centered around the way the accountant communicated with his clients.
How might we make data more accessible and understandable from both the accountant and the client’s ends?
Our initial goal was to create an online system nested in Rye Financial’s website, through which the accountant could share data with his clients on a more centralized platform. After user research, we narrowed down the project to creating a portal specifically for budget documentation. More details on how we came to this decision will be explained in the next section.
Phase 1: User Research & Synthesis
To better understand the current bookkeeping experiences for small businesses and non-profits, we conducted phone interviews with 7 existing or potential clients of Rye Financial. We created an interview guide with the objective of understanding the accounting process and finding the pain points clients experienced. The questions in the guide specifically address the following aspect:
1. what type of critical statistics clients expect to see in financial reports from an accounting firm
2. how clients interact with their current bookkeeping tools
3. how clients categorize their transactions
4. how clients maintain and oversee their budgets
To draw synthesis from our interviews, we first created an affinity map to group our insights into different categories and find patterns. Based on the affinity map, we were able to draw the following insights:
The main tools used by users to document and communicate with Rye Financial were spreadsheets and Quickbooks, an online bookkeeping platform
Most users were happy with their current bookkeeping system, so there was no need for a new bookkeeping portal that would repeat the same functions
But many users expressed interest in having a tool that can help them keep track of budgets and visualizing the data
They also expressed interest in viewing data across various time periods
Phase 2: Ideation
We identified a potential work flow and began ideating for a user portal that includes a budget maintenance system with data visualization features in addition to the spreadsheets that Rye Financial was using to communicate with clients.
Then we brainstormed on ways to visualize various types of data and created low-fidelity wireframes to test out different page layouts.
Phase 3: Prototyping
After evaluating the various ideas and ways of visualizing data, we picked out a few key functionalities from each mockup and proceeded to make a mid-fidelity mock-up of the user portal by combining ideas and features. Some key features are:
Notification system to help clients stay on top of important information
Budget alert bar to give immediate feedback on budget progress
Expenses and revenue overview
Through UserTesting.com and in-person user testing, we tested our mid-fidelity prototype with users in the 20s and 30s age range from the United States. The task we assigned to them was for them to monitor and set a budget goal for an expense category. From these results, we were able to pinpoint main troubles such as navigating through the portal, performing tasks such as viewing expenses for a certain category, and editing budgets. We modified our “Edit Budget” button and changed the layout of the revenue and expenses overviews so that users could find them more easily.
Alongside the data portal, we also did a redesign for the company website to increase its credibility and professionalism. In our redesign, we added more visual elements and illustrations that are in line with the image of the company, and we rearranged the layout of the screens to avoid dense passages and awkward spacing. We also added a custom service plans page that allows users that do not necessarily belong to the preset business types written on the “Service Plan” page to fill out a survey form.
If you are interested in the final product, go check out their renovated website!
Here is our final prototype for the client portal, for which we polished visual design elements and improved the user flow based on feedback from usability tests.
Here is the link to the InVision prototype if you want to play around with it!
From this project, I learned a lot of design methods and practiced various principles in different stages of the design process. I learned various visual design principles on how to establish clear visual hierarchy and design interfaces with consistency and standards; I also practiced several different methods to synthesize research findings, such as creating affinity map and journey map. Overall, it was a great opportunity for me to be able to work on a full design project that took me through the entire design cycle.