Jonno Witts

Menu

Financial Dashboard

  • Design
  • UX/UI
  • Rapid prototyping
  • Adobe XD
The homepage for the documentary website displayed on a browser window
Visit the website Mobile prototype Desktop prototype

Background

For a recent interview, I was asked to come up with a redesign for an existing platform to demonstrate my “design thinking” for an existing platform that manages financial compliance for businesses.

In the end, I produced two new design systems, an interactive wireframe built with Adobe XD and a front-end, responsive prototype developed using HTML/CSS and JavaScript. Along with a presentation to explain the reasoning behind my decisions.

All work is protected under copyright, all rights are reserved. Nothing may be used or reproduced unless explicit permission is granted the owner (me!).

Research

The existing product is a huge business application with many different tools and available for users. I was given an introduction and initial overview of the product from the product team and by interviewing a member of the business team, I discovered the main pain points of the product. Interviewing this user aided in the development of user personas for different scenarios. For instance, registering a corporate lunch:

  • Done by a travelling salesperson.
  • Perhaps in car or on the train.
  • Infrequent user.
  • Current process, only available on a laptop sized screen, in reality this would be done on a mobile or tablet device.

I carried out guerilla user testing to see if the user could work out how to accomplish a task without instruction. This observation showed that attempting to complete key tasks was not entirely obvious with the current iteration.

All the pages of notes and research carried out.

Other discoveries from my research showed several areas that could be addressed:

  • Colours and icons - each task that the user could carry out was displayed with a large button with an icon. Each button was a different colour, and there were over twenty different tasks on the page.
  • Repetition - There was more than one way to complete a given task due to repeating element. This is more confusing for a user as it means remembering different steps to complete a single goal.
  • Inconsistent popups - Popups would display with completely different sizes, dead space, and inconsistently for items. For example, one task would use a popup, a similar task would be in the same location and would not.
  • Dated design.
  • Feedback leaves the screen almost immediately.

I decided to focus on three main areas from the application:

  • Create a new tasks.
  • Completing a “To Do” item.
  • Reviewing an item.

The extra areas I would include to give myself an edge would be to come up with two light and dark themes and a responsive design and build that they could be loaded and passed around a tablet during the presentation.

Design

With a definition of objectives and analysis of the current product in hand, I began by mapping out how the processes could work, followed by wireframing on paper. I quickly moved to Adobe XD to flesh out these ideas. XD allows easy sharing and feedback comments and fast development interactable ideas.

I decided to implement a stepped process for completing tasks. This would have the benefit of not overwhelming the user and showing clearly what would be involved. The stepped process would be able to be used for all tasks - funneling a user through the processes involved and showing the user what they have to do. At the end of the process there would be clear feedback for the user that stays on the screen until acknowledged (something that wasn’t present in the product).

Sucessful completion of a stepped process

Building the themes

Using Adobe Illustrator, I created the colour schemes based around the blue in the company’s logo. Blue conveys a corporate feel, trust, finance and professionalism. Which was ideal for the design of the financial compliance application I was creating.

Colour schemes

I looked at a lot of typefaces before settling on Proxima Nova. Proxima Nova is modern and designed specifically for screens. It has Swiss Origins, conveys stability and is non-invasive. Again, the themes of finance and professionalism running through all parts of my design.

A sample of Acumin Pro and Proxima Nova Typefaces

I came up with some initial ideas for a custom icon set. Rather than using an off the shelf system, a custom set can be tailored to the specific brand style. The icons in the existing product were on all task buttons (there were over twenty different tasks available). This did not add anything for a user as the icons become so abstract and there are so many a user would not make the connection. My proposal uses icons more like wayfinding.

A sample of custom icons

Theme one features softer edges and slightly muted colours, and so the icons and inputs follow this in their presentation. Likewise, theme two gas cleaner lines, the typeface, Acumin Pro, informs this decision being modern and sharp and that idea follows through the rest of the theme.

The data table is an important design element throughout the product. I came up with an idea of how to incorporate this. Including filters and sorting. I thought that typical users would be familiar with Microsoft Excel, and so used icons and a layout that would be familiar this way. For example using the same filter icons. Each table contained a lot of information and so to ensure the table would fit on the page I removed and reduced the copy as much as possible. Some tables featured whether the market was currently trading. I added a pulsing green or static red icon to show this at a glance.

The data table

Each theme includes a dark mode. These modes are becoming increasingly popular and users are expecting it more. Dark modes have a useful function - focussing users, improving usability and creating a seamless interaction with users that may have their OS set to dark mode.

The dashboard home screen in dark mode

Development

To showcase my development skills I decided to build a prototype in a weekend based on the XD wireframe and the theme I had come up with. The prototype is responsive down to a table level as per previous conversations with the product team. It features the main dashboard, the stepped process, the data table and dark and light modes. The design is from theme one.

Outcomes and achievements

Speaking with the team revealed that the product can be a “means to an end” for some users - they have a job to do and don’t often log in to the system. My thinking was that the interface should get out of the way and so I used this idea from the outset of the design.

This would be the starting point for the project. It gives an idea of the flow and provides a good starting point to begin reviewing with users. The next step would be to get this in front of a few users and gather feedback.

My approach to implement a UX strategy when a company has nothing, is to start small - UX labs during one morning every month with 3-4 users. Plan and prepare to go in testing specific tasks and areas with the users. Plan, recruit, run, and review. I produced a design style guide, an Adobe XD wireframe prototype and working, responsive prototype that used implemented the style guide plus a presentation and all in a fortnight.

The team were impressed with what I had produced, and we had a good discussion about where things could go from here and how this would work as a starting point for a future approach to designing a new interface.

This was a lot of work for an interview, that in some ways did not pay off - I did not end up getting a job offer due to “internal business reasons.” As I said at the beginning, I did more than was asked for this interview, however I would not advocate speculative/interview homework and would be hesitant to do this again in the future. It was a lot of work and while I can only trust that the company will not take my work and use it there is the possibility that they will.

The dashboard home screen in dark mode