Modular Fintech Dashboard for small and medium-growing businesses

MY ROLE

Product Design | UX & UI | Research

COMPANY

Tide

SUMMARY

Growing medium-sized businesses need to have a good grasp on their finances — what is due, what is outstanding, what goes in, and what goes out. Also, when and how much is due. To cater to the needs of different business types, the information has to be laid out in an intuitive and easy-to-digest manner that gives users control of what is relevant to them. This case study examines how this can be achieved by using rich data visualization techniques and modular layouts in a user-customizable financial dashboard.

DISCLAIMER

Project details and data pertaining to metrics have been omitted due to NDA provisions.

Context

During interviews, owners of growth businesses told us that they needed a way to "track the pulse" of their ventures, including multiple accounts and — in some cases — teams of 10 to 20 people. They wanted to know what is due, what is outstanding, what goes in and what goes out. Also, when and how much? ​ Growth businesses, which expand at significantly higher rates than most SMEs (being in the top 5%), also have to deal with the increasing complexity of day-to-day operations. Things like raising and keeping track of hundreds of invoices each month, managing the expense cards of your team members, and tracking revenue and expenses are of vital importance to this type of business.

Framing

Following the interviews and identifying the fundamental user need for a versatile and customizable dashboard, I wanted to understand the business side of things and how the broader team thinks. I also needed to understand how a dashboard would integrate with the existing Tide experience and design system. Since dashboards are complex — both functionally and structurally — I decided to deconstruct the notion and start with the fundamental building blocks of every dashboard - widgets. ​ I facilitated a workshop with the wider team to understand how stakeholders in different business areas think of widgets in terms of connectivity chains and how the broader design team sees them in the context of Tide's member experience and design system.

Workshop

During the workshop, we came up with a set of ground rules for widgets that we wanted to adhere to with regard to the overall concept and functionality of widgets. After all, widgets — and by extent dashboards — would become a branch of the existing design system.

Widget manifesto

1. Mobile-first Widgets are designed from the ground up for mobile

2. Insightful Widgets provide users with dynamic information

3. Actionable Widgets offer users one or more actions

4. Relevant The information in the widgets is relevant to the user or flow

5. Simple Widgets are to-the-point and focused

6. Connected Widgets are an entry point to a part of the app/feature

Widgets as part of a design system

The current Tide design system does not include widgets. Obviously, being the building blocks of dashboards, widgets would have to fit in and largely conform to the existing design system, although some changes to the system itself are also not out of the question if it is to provide for the rich data visualization techniques that would be employed on dashboards. ​ With this in mind, I set out to explore various widget sizes and anatomies in order to come up with a hypothesis for user testing.

Basic widget anatomy

1. Container Widget containers hold all widget elements. Their dimensions are determined by the size of the widget (S, M, L)

2. Header text The header text describes the function of the widget or the product area that it leads to in up to 2 words

3. Body The body can contain many different things related to data (e.g., charts, graphics, numbers)

4. Primary action (optional) The primary action is displayed prominently under the body. It allows users to take important actions related to the information displayed in the widget.

5. Secondary action (optional) The secondary action is displayed in the upper right-hand corner of the widget. It relates to the widget itself (e.g. filtering or otherwise controlling the content displayed in the widget).

Widget sizes

Widgets are available in three different sizes: Small, Medium and Large. Small and Medium widgets have the same dimensions on mobile and desktop. They are stacked next to each other on desktop. Large widgets scale to the width of the content on desktop and are always stacked on top of each other.

The different sizes are essential for displaying content and data visualisations on various screen sizes. You don't want to use the smallest widget size for something very information-dense, and vice-versa.

Preliminary testing of the proposed anatomy with real use cases

Before the proper user testing, I needed to do some internal stress-testing of the proposed anatomy. For this purpose, I decided to rely on some actual use cases that I'd identified and see if the anatomy could accommodate the cases at least on a rudimentary level.

This was a good exercise to do before going into user testing, as it helped us better understand how the seemingly uncomplicated anatomy could scale to accommodate for fairly complex data visualisation.

Many tests were done, two of which you can see here. They are for a Cashflow Insights widget and an Invoice Planner. Many more were done, each one undergoing a pros and cons analysis (that cannot be included in this case study).

User testing

Widgets are multifaceted components that provide dynamic information, interactivity, multiple touch targets, and can also lead as funnels to different parts of the app. That’s a lot of variables, which, combined with the various types of data and user scenarios that widgets can accommodate, leads to a lot of unknowns that need to be tested. I wanted to test a number of widgets, covering a wide gamut of actions, data, and needs in order to establish how users interact with widgets, what their expectations are with regards to functions and clickable areas, and how they go about performing specific tasks with the help of widgets.

Widget types for testing

Sample of widget types selected for testing

After identifying various different types of widgets, I picked the ones that best suited some of the most common use cases. These included charts (bar chart and stacked), a calendar, two variations of a list widget, and a customizable widget that lets users pick their own shortcuts.

Questions to answer:

1. What do users interpret as tapable/clickable on a widget?

2. What are users’ expectations of different click/touch targets?

3. How much functionality is too much functionality for a single widget?

4. What types of tasks are appropriate for widgets?

5. How might widgets act as gateways to support the natural exploration of our product?

Some of the scenarios for user testing widgets

DISCLAIMER

Testing has not been concluded yet, and other areas of discovery and research, including the modular layout and user-facing customization functions, have been omitted from this case study

Scalability, responsiveness, interaction

Given the complexity of dashboards, the widgets, and the overall layout needed to be built with scalability and responsiveness in mind. ​ Furthermore, the screen real estate of all supported platforms needed to be utilized in an efficient way - mobile, tablet, and desktop. That's why widgets have different views and interactions across the various platforms. ​ All of the previews below have been animated and prototyped on Figma (responsibly and responsively designed).

Invoice Planner (calendar) widget on Mobile and Desktop/Web

Example of a responsive chart widget built using auto layouts

Example of a long-press or swipe interaction