Sulaymaan

Apps, landing pages, UX practices and research.

UX/UI

Grey Eye

Application Form

The aim of this project was to integrate an online application form into a new app. Inspired by other FinTech companies, my task was to move away from the web based online application process and create a streamlined, quick application journey which allowed users to upload identification immediately and set up their new bank account in minutes.

The application form would then lead the user straight to the mobile app where they could begin using their new bank account.

Online Apply Form, your name - iPhone screen
Online Apply Form, contact details - iPhone screen
Online Apply Form, current address - iPhone screen
Online Apply Form, your income - iPhone screen
Online Apply Form, id check - iPhone screen
Online Apply Form, id capture - iPhone screen
Online Apply Form, success - iPhone screen
Online Apply Form, app store - iPhone screen
Mobile App, card locked  - iPhone screen

Mobile App

After years of neglect, the thinkmoney banking app looked dated and no longer met users’ needs. The solution was a complete redesign of the app.

thinkmoney offers a budgeting service unique to them, which is something I wanted to focus on in the new design. The account uses a jam jar approach - one pot is used for spending the other pot is money set aside for bills.

I looked at how we could simplify this process so the customer could take a more independent approach to their budgeting. User research sessions were conducted to find out what customers would want to see in their new app, and I showed my initial concepts to users to get feedback.

Customers wanted to see a clearer breakdown of their budget and more prominence on bills which are due soon. From this I created a split system, in which customers could toggle back and forth between what they have to spend and what they have put away for their bills.

Mobile App, transaction summary - iPhone screen
Mobile App, bills summary - iPhone screen
Mobile App, payment details - iPhone screen
Mobile App, budgeting income - iPhone screen
Mobile App, budgeting payments - iPhone screen
Mobile App, manage direct debit - iPhone screen

Landing pages & A/B testing

My goal was to increase conversions by designing landing pages for PPC campaigns. I ran A/B tests using Google Optimize and Visual Website Optimizer (VWO) to find out what users respond best to, and to understand which design would be most effective.

A/B Testing - Laptop screen
Test A 1 Test A 2 Test A 3

Test A

Test A featured a stripped back approach using icons and sharp, punchy text. This style of landing page did gain a higher rate in conversion (8%) but judging by the amount of users going to the landing page and leaving I came to the conclusion that there was insufficient content to meet the user’s needs.

Test B 1 Test B 2 Test B 3

Test B

In test B, I included more information and focused on the unique selling points of the account. Not only did this increase the number of conversions, it also increased the amount of time spent on the landing pages. Overall, conversion rose by 24% and the dropout rate decreased.

Homepage - Laptop screen

Home Page

In preparation for the App’s release I redesigned thinkmoney’s home page to create a cohesive style across the entire user journey. The design process started with a test of the previous homepage to gather think out loud feedback from a group of users, to find out what challenges they encountered when using the site. The results of this test revealed that users had trouble distinguishing between thinkmoney’s four products and selecting the product they were looking for.

To overcome this problem, I created a multihero system and tabs which the user could control. Working with a copywriter, I reduced the amount of text on the page, included the product names in the H2s, and structured the content using the F-pattern. Following the redesign the website was used in the MTraining seminar as an example of good UX practice.

UI Kits - Laptop screen

UI Kits

I make UI kits to keep the organisation, balance and visual hierarchy of the products I am trying to create consistent. The UI kits are useful for auditing each and every element of my design. For example, they help me keep icons uniform, with the same style and size.

I tend to create UI kits in Sketch, as the program is lightweight and allows me to create symbols which create guaranteed structure. When I create symbols in sketch, I make all its possible states. These are easy to change and accessible to other. When working on UI Kits I look at the research of Brad Frost who heavily encourages the use of Atomic Design.

Apollo

Apollo was a project which allowed internal staff to keep a record and analysis who gambling machines were being used across the country. The overall design heavily focused on the visual representation of data and creating easy and accessible ways to interpret figures.

Apollo 1 Screen
Apollo 2 Screen
Apollo 3 Screen

Research

UX research serves many purposes throughout the design process. It helps me identify and prove or disprove my assumptions, find similarities across target audience members, and recognise the user’s needs and goals. Overall, research informs my work, improves my understanding, and validates my decisions.

I use various techniques to research. I start by wireframing, which allows me to lock down ideas that I think would work. My next step is to use A/B testing and user testing to prove my ideas right or wrong.

I take two approaches to user testing. The first is via programs such as ‘What Users Do’ and ‘UserZoom.’ I set up questions and hypotheses I would like answered and wait for the results which inform any changes. The second is via video testing.

After building prototypes, an external company will show members of public the prototype which I watch from another screen. This allows me see real time reactions that have not been swayed.

Research Screen
Email Icon LinkedIn Icon