Jonno Witts


Financial Dashboard Prototype

Interview test

For an 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. 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.

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 Owner. I orgnaised interviews with various team members to stand in for users), this 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.

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.

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

Filed under:
  • Design
  • UX/UI
  • Rapid prototyping
  • Adobe XD
  • User research
  • User testing
Back to top
Research notes
Pages of notes and research carried out
Home screen
The home screen as it would appear on an iPad
Dark & light modes
The home screen as it appears in light and dark modes on an iPad
Stepped process
Screen shown to user upon successful completion of a stepped process
Colour schemes
Colour schemes
A sample of Acumin Pro and Proxima Nova Typefaces
Custom icons
A sample of custom icons
Data table
Example data displayed on a data table. The table can be filtered by date and the financial year and the view can be saved via a button on the screen.
Colour mode transition
Visit the website Mobile prototype Desktop prototype