This button scrolls you to the top of the screen.

Case Study

Unit Financials by Zeewise

UI / UX Design
05/2021

Unit Financials by Zeewise helps franchises grow their brand by easily combining accounting sources to provide actionable, trustworthy insight.

Task

While working on redesigning Zee360 (see our Zee360 write up here), we and the Zeewise team identified a key pain point in the lengthy, hands-on onboarding and implementation cycle often associated with financial reporting tools. In other words, most accounting tools require a huge amount of effort up front. We're talking about the tools that aggregate data from other software or bank accounts and use AI to make predictions and give advice based on that data. There's a lot of data to collect from a lot of sources. Before a user can enjoy the tool's benefits, they must first spend an exorbitant amount of time connecting bank accounts, other financial software, imputing personal information, etc. And even after they've completed the onboarding process, a user might still have to wait several days for the software to sync and accumulate all necessary data. It could be weeks between the software's initial signup and first use. We recognized an immense opportunity to streamline that process, so a user can started in minutes, not weeks. As soon as we wrapped up work on Zee360, we decided to dive right into this new opportunity we had discovered. We decided to call this new solution "Unit Financials."

After examining the problems that we wanted Unit Financials to solve, we easily established the following 3 priorities:

  1. Users should be able to sign up in minutes (quick onboarding).
  2. Users should be able to view real data almost immediately (quick data syncing).
  3. Users should be able to understand the data immediately (minimal learning curve).

Our task was to design a financial reporting tool that elegantly simplifies onboarding for financial reporting software by meeting the above 3 criteria. Also, this is Zeewise, we're talking about. They're the self-proclaimed financial data experts. So there wasn't a chance in Hades this new product would lack a dashboard with some charts, graphs, and tables.

Tools

For this project, we used Figma and Photoshop to design the screens. We implemented everything in Vuetify, a Vue UI library for Material Design components. I enjoyed working within a UI library because it meant we could focus most of our attention on the UX side, where the majority of our priorities lay for this project. (Learn more about Vuetify here.)

Process

The process for this project began incredibly smoothly. We were already familiar with the problems we wanted to solve and the proper solutions for addressing those problems. That familiarity allowed us to jump a couple steps in the design process. As mentioned earlier, we worked with the Vuetify UI library. Since most of the UI components came from a library, we could focus most of my effort on building a smooth UX.

Since we already knew the problem and the proper solution, we skipped the user interview phase for this project. We normally begin with a couple weeks' worth of interviews to familiarize ourselves with the product, its user base, and the problems users frequently encounter. This time around, we could simply jump straight into tackling the three priorities listed above.

We began by designing the user onboarding journey. A quick onboarding constituted our number 1 priority, so we started there. The person creating an account with Unit Financials will most likely be someone who either

  1. Works in the corporate office for a franchise-based business, or
  2. Own several franchises.

In either case, a user will need to create an account and then immediately connect ("integrate") other data sources or accounting software. Creating an account should consist of 3 simple steps, and connecting your other accounting software should also consist of 3 simple steps. After a few iterations over the course of a week, we landed on the following onboarding screens:

Creating a Unit Financials account, step 1

Creating a Unit Financials account, step 2

Creating a Unit Financials account, step 3

Once happy with the onboarding screens, we quickly built out the following integration screens:

Connect an accounting software, step 1

Connect an accounting software, step 2

Connect an accounting software, step 1

Next, we took on the task of displaying real data almost immediately. After decades in the industry, the Zeewise team knew exactly what data users would find most useful. We focused on displaying that data prominently and clearly.

Once we were confident that we could display the right data right away, we decided to move on to priority number 3: minimal learning curve. This is where we spent the majority of our time. We tried and tested different copy for text, titles, and graph data. We tried and tested different card placements. We tried and tested different color palettes as well. Ultimately, we landed on the following dashboard (the screengrabs below show only dummy data):

Unit Financials data dashboard.

Unit Financials data dashboard.

Unit Financials collects and displays data. Allowing a user to drill into that data and take control of how they want to visualize that data--whether it's in a table, in a bar graph, in a pie chart, etc.-- helps the user take control of their data. Essentially, the three cards on this dashboard all display the same information. We've placed it all out in front of them. Now they can consume the data in whichever way most aligns with their thought processes and learning styles.

Final Note: After we wrapped up with the product, wedesigned the Unit Financials website here. We also re-designed the Zeewise company website here. We used Webflow for both websites.