Product Designer

samuelhgflax@gmail.com

Accounting Software Dashboard

A design sprint for building the dashboard for accounting software.

Project Brief

01

Timeline

One month, Summer 2022

Role

UX resereacher, UI Designer

Project Type

Two- person design sprint for an application

Challenge

A Chicago accountant is building the software to revolutionize his business - streamlining and automating the tedium of data entry. I was tasked to build the dashboard of the application

Project Outline

1. Problem and approach
2. Sketch
2. Mid fidelity assets
4. UI kit
4. Hi fidelity assets
5. Final thoughts

original website appearance

Mood board for the dashboard

Problem

02

The software is starting from scratch and previous design documents. The client wants a dashboard built for his application which will streamline accounting practices.

We conducted an interview with the client in two steps - the first to listen to to the clients needs and wants for the applications dashboard.

The second step was to show the client competitive designs of dashboards in existing programs to discern preferences of layout, space, and utility.

Competitive research of dashboards presented to the client

Prioritization

03

We compiled the information we had gotten from the client and created a chart to prioritize our findings.

The client's most important need was to see at a glance all recent and ongoing projects in one space. This is followed in priority by a clear and readable space for ASU updates - accounting memos put out by international organizations.

Next in the heirachy of information are software alerts, and a group messaging service.

Of lowest buildable priority are a time management widget, user permissions and tracking, and customizable settings.

Prioritizing needs with a MoSCoW Chart

Lo-Fi Sketch

04

With hierarchy of information in mind, I drafted a sketch of the application dashboard.

Using the methodology of the 'F'-shaped reading pattern, the collection of Current Projects sits at the highest level of visual hierarchy.

Next in priority sits the ASU's, followed by messages. Team Tasks and working timeline are visible, but at lowest priority.

Sketch of application dashboard

Components

05

The client wanted a modular-type dashboard - with the ability to reorder components, and add componentrs as the program grows.

We built each component as a card, using research from Google's Material Design documentation as well as competitive research.

For the 'Current Projects' cards, I settled on five pieces of information: title, folder, creation date, editor identification, and completion status.

I learned that font, color, and text size will make a huge difference in perception of information here. As the client pointed out, creation date is not as important as the title, and that should be reflected in the visual heirachy.

Modular components of the dashboard features the client requested

Mid-FI Dashboard

06

We created a mockup of the dashboard using our components.

After presentation with the client and developer, we gained some key feedback.

1. Current projects should be given even more priority than allowed - they are the central and core feature of the application.

2. Less rigidity with the components - allow each to take up space

3. Indications of completion status for projects and message boards - needs to be obvious

Building a dashboard using the components

UI Kit

07

Our UI kit was based on two principles the client outlined for the project - professional and reserved.

We wanted to avoid the bright, garish green assosicatedd with money and financial systems. We instead blended a green with a professional blue to create a soothing, refined teal that would be our primary color.

Looking across the color chart, a refined ochre for our accent reflects the monetary gold while staying subltle.

The fonts are open source and readable - softer than the traditional serifs while staying away from adornment.

UI Kit showing fonts, text hierarchy, and color use states

Hi-Fi Components

08

Using the feedback we had gathered, we built the components for the hi-fi mockup.

The most important addition to the components were call to action buttons - interactivity is a must in this program.

Use of primary and alert colors highlight the most important information - project status - and interactivity.

Building the components with design best practices

Hi-Fi Dashboard

09

Having addressed all the feedback from the last dashboard, we built our final screen.

1. The current projects are highly visually prioritized, sortable, and interactable.

2. The ASU and FASB alerts are interactable, sortable, and take advantage modular sizing.

3. Color and font size are used according to the UI Kit to give visual weight and clarity to the information.

Building a dashboard using the components

Final Thoughts

10

At the end of the design sprint, I learned a few things:

1. Sketches should be done live with the client - listen to their feedback and draw many iterations till they feel comfortable.

2. Clients often know what they want, but do not know how to visualize it. That is why we are designers.

3. Don't be afraid to deprioritize work - we dropped the team tracking and messaging components from the final deliverable. Using the MoSCoW priority chart we had constructed, we realized only a couple components were essential to hand to the developer.

A moldboard constructed to guide the dashboard design