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.

behance.gif

The problem

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:

affInity map

affInity map

  • 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.

Screen Shot 2018-05-15 at 2.10.27 PM.png

Then we brainstormed on ways to visualize various types of data and created low-fidelity wireframes to test out different page layouts.

1 landing page.png
2 selection.png
Dashboard.png
3 graphs generated.png
 
 

PHASE 3: PROTOTYPing

Mid-fidelity mock-ups

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

Home page dashboard

Home page dashboard

Home page with notification drop-down

Home page with notification drop-down

Expenses across categories

Edit Budget

Spending trend over time for all expenses

Spending trend over time for Home and Utilities

 
 

USER TESTING

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.

HIGH-FIDELITY PROTOTYPE

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!

Home

Service plan

Custom service plan form

About

Contact

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.

Dashboard

Dashboard

Notification drop-down

Notification drop-down

Set budget

Set budget

Expense overview

Expense overview

Edit budget

Edit budget

Spending trend

Spending trend

Spending trend by categories

Spending trend by categories

Spending trend for one category (Home and Utilities)

Spending trend for one category (Home and Utilities)

Here is the link to the InVision prototype if you want to play around with it!

REFLECTIONS

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.