For a better experience on Michael Wills Update Your Browser

Receipt Bank Web

CASE STUDY

CLIENT

Receipt bank

TARGET

SME corporations

Receipt Bank are a fast growing fintech start-up company. The product is made up of a web and mobile application, which serves two types of users; accountants and their clients which they represent; their ultimate goal is to automate bookkeeping.

This case study demonstrates that through correct user research, good design principles and user testing I was able to improve the navigation stack of the web application.

ResearchUI DesignUXWireframingWeb

500,000+

REGISTERED USERS

10,000,000+

RECEIPT IMAGES CAPTURED

10,000+

BUSINESS PARTNERS

My Role

I was hired at Receipt Bank as the lead digital product designer which would self manage the entire design system for the business. My daily task consisted of:

Scoping new features with product managers.
Building out wireframes, designs and prototypes.
Controlling all UI & UX related design tasks.
Carrying out user research and having a user centered design approach.
Combining business goals and user needs to achieve the ultimate product.
Running user studies and testing workshops.

Problem statement

Part of my on-going study at Receipt Bank was to find and evaluate particlar areas inside the web application with poor user experience and overall negative impact on the user journey within the product. Through general use I found the web application difficult to navigate around and understand. This was overwhelming as a first time user.

Improve how users were able to navigate around the web app

Increase receipt uploads via the web app

Redesign and improve the UI for aesthetic purposes

Have competitor benchmarks and data to support my theories

User and customer research

Research was undertaken to prove that the current navigation around the web app was not being used to its full functionality

HEATMAPS

Using Sessioncam I analysed heatmaps of our current user base and identified areas which users were frequently prone to not utilising fully.

SESSION REPLY

Evaluating users recorded sessions to see the customer struggle around the navigation also helped me to develop a better understanding.

QUESTIONAIRE

A questionnaire was also used to capture a small collection of our user base to see if and how they used the current navigation

Competitor benchmarking

I did some research into other market competitors and general benchmarking against other types of navigation around websites. I did this by creating a mood board using Invisions 'boards' feature.

I found that being able to split the navigation into primary and secondary by using a side nav was very popular.

Using icons would also create more space for the main body of information which was a key reason for looking to change the navigation.

Deliverables

My design process always starts with just doing some basic sketches and wireframes which I would present these back to stakeholders. After I then move onto more creative UI designs.

LOW-FI WIREFRAMES

For low-fi wireframes I like to use Balsamiq as its drag and drop feature allows me to produce quick throw away wireframes. Below is a sample of some ideas I produced

HI-FI WIREFRAMES

I created mutliple different iterations of high fidelity wireframes to visually compare them against one another. This was done in Sketch.

BEFORE - THE PROBLEM

I found that being able to split the navigation into primary and secondary by using a side nav was very popular.

AFTER - THE SOLUTION

Using icons would also create more space for the main body of information which was a key reason for looking to change the navigation.

Design System

I created a design system would could be reused going forward for any other features such as icons, text styles and a grid structure which was lacking before.

ICONS

For this I also created an icon pack which would represent the call to actions. Using icons gives a quick visual representation of what this buttons content takes you to, this also enables for the text to be much smaller and created more space overall.

Prototypes and testing

The final step in the process was to build a prototype to get a true understanding of how the navigation works and feels. The prototype was also used to do some minor user testing during some work place observations. The prototype was built in invision and testing can be seen below.

Try Me

Previous project Hotels.com Next project Moneycorp

Find out more

Got an interesting project and would like to work on it with me?

Get in touch Download CV