Responsive fintech website

Designed for coursework in the Google UX Design Professional Certificate

Challenge

Design a responsive website for a bank. It should help to increase the conversion rate.

Solution

A responsive website with an easy to use account creation process

Duration

Sept 2021

Role

Lead UX Designer

Responsibilities

Conduct competitive audits, interviews, uncover pain points, create affinity maps, personas, problem statements and user journey maps, paper and digital wireframing, low and hifi prototyping, usability studies and accessibility considerations.

Research

Research Summary

I conducted interviews to uncover pain points which I then grouped in an affinity map. I also conducted a competitive audit to identify gaps and opportinuties from similar websites. Two (2) p0 insights were discovered during the research phase. (1) users want at to be able to navigate back and forth between all registration steps before commited the information since creating a bank account is such a personal and important activity. (2) Users also want to know that help is always available to them while creating the account so they don’t make unnecessary mistakes that are hard to change.

Pain Points

The pain points were discovered by conducting Interviews and developing affinity map groupings 

Commitment 

In most cases in account creation process the first step is permanent once users proceeds

Customer Support

Getting assistance, whether live chat or other types is not easy to find as it should be

Design

The website and registration design could be more friendly like other websites

Personas

I created a set of personas that helped me to empathize with ‘real’ users and the kind of problems they would face using the product.

User Story: Derrick is a busy business man and runs his furniture business daily, he needs a way to create a bank account online so that he does not have to join lines at the bank. 

User Journey Map

User journey maps helped me to empathize further and bring out other possible pain points that users might encounter when creating an account online

It was decided that the table selection would not be included in the app based on user suggestion in interviews

Ideate

The pain points and insights I identified were addressed in a direct way without need for much exploration like crazy eights or how might we. Surprizingly the user journey did not reveal any additional pain points either,  so I moved into the wireframing process.

Digital Wireframes

These wireframes represent a modern and unconventional layout for a bank’s website. Spacing is exaggerated and buttons are big. Keenly positioned are the items that should make the user feel supported throughout this account creation process.
Screenshot 2021-09-30 at 2.26.15 AM

Wireframes Screen Size Variation (mobile)

The lo-fi prototype presents the first iteration of design to users. Ideas here are based on initial interviews and a competitive audit.
Screenshot 2021-09-30 at 2.33.22 AM

Low Fidelity Wireframes

The lo-fi prototype presents the first iteration of design to users. Ideas here are based on initial interviews and a competitive audit.

Usability Study

Study Type

Moderated Usability Study

Location

Jamaica

Participant

5 Participants

Length

Sep 2021

Findings: Usability Study

Support

Positive experience: Having seen the help button was a pleasant experience for the user.

Separation

A minority reported that it was not clear when the application started

Design

Positive experience: Users noted that how items are positioned gives them room to see everything, it doesn’t feel cluttered like other bank sites

Registration

Positive experience: Users appreciated the ability to go back and forth between steps freely

Usability Study Notes

In my usability test,  I prompted users to complete the tasks our design aims to fix. I recorded the findings in a spreadsheet

Refining the design

Mockups

No indication of when the actual application form started, a simple title lets the user know that the process has officially started. This is the singular change made to the mockups.

Mobile variation

Hi Fidelity Prototype

User journey maps helped me to empathize further and bring out other possible pain points that users might encounter when creating an account online

Accessibility

Initial focus and subsequent focus tabs will be labelled and shared with developers for screen readers to properly read the information
Landmarks and proper headings will be labelled and shared with developers so that screen readers can properly read the info

Takeaways

I’ve learned that with experience you develop and inkling for what works best for users in a particular design. Regardless of this, usability studies are necessary to validate decisions and undoubtedly pain points that were not thought of will be discovered.