UX Case Study 2: Landing Page and Sign Up Form

13 min readJul 5, 2020

Introduction:

I am currently undertaking a UX course with Circular and have been given the task to improve the current form engine of a bank of my choice, by enhancing the user journey (ie: usability, accessibility and information architecture tweaks). For the task, I will be designing an online landing page and a sign-up form for business accounts — showing a positive user journey. The case study was set by the Circular team (including the target demographic).

Target demographic:

· Aged: 26–50.

· UK Business owners who turn over £2m — £10m yearly.

· Company size: Small, Medium enterprise business owners.

All aspects of this case study have been done and managed by me.

For my case study, I’ve chosen to focus on the UK retail and commercial bank, TSB Business online bank application for both mobile and desktop. From my research on their web page and mobile version, I identified the TSB issue I wanted to solve. For new customers, there isn’t an easy process to sign up if you wanted to create a TSB business account. On the landing page, there isn’t a clear option to “sign up”, the closest you get to it is the “Log in” option. To get information on how to sign up for new users you have to go to the “Accounts” subheading, then another subheading “Business Plus”. When you get to the Business Plus page you then have to scroll down to the “Apply Now” button to sign up as a new user.

Through my research, I discovered this path goes against UX best practices for registration/sign up forms. On “UX Collective”[1] Amelia Warren states registration forms should be “fast and then faster” and “do all the work for them [the user]”. TSB sends new users on a journey to start the process, the extra pages create a bigger barrier to entry for users. This journey goes against Hick’s Law [2] which states “the time it takes to make a decision increase with the number and complexity of choices.” Lengthening the process can be bad for business as it may overwhelm the user, potentially forcing them to leave and go to a competitor with an easier process.

As stated in UX collective, “Your goal is for registration to be so easy users don’t even remember they did it.” If users were to recommend or wanted to come back to the registration, they would definitely need to remember how to get there from the landing page.

My Focus:

As well as reducing the process to sign-up, I will be focusing on the structure of pages to limit scrolling and information per page, improving the user experience. The mobile version isn’t fully optimised for users to see buttons to continue to the next stage. On the TSB mobile version, horizontal scrolling was enabled to fit the web page into the mobile version. TSB have a timeline in place to help users track their journey which forces users to scroll horizontally. On one of the first pages on the application, you have to type in your business. The form is automated but to confirm you have to scroll horizontally to click on the small font button to confirm this is your business. Nick Babich states in UX Planet [3], “Use only vertical scrolling. There shouldn’t be pages where horizontal scrolling is necessary to see primary content.”

With this, the TSB mobile web form is bad UX, not being able to acquire the target function goes against Fitts’ Law [4]. The law focuses on making the user's journey easier and keeping the user’s journey as short as possible when getting to the touchpoints.

Horizontal scrolling on the TSB mobile site

Design Problems:

The main issue I came across on the landing page was the menu wasn’t clear or easy enough for new users. As mentioned above, to sign in you have to go through a few pages before you can start the application process. This can be easily solved with the “Sign Up” button within the main menu.

The typography hierarchy indicates the bigger headings are the primary attraction for users.[5] The lack of having a sign-up button within this does indicate that signing up is not important and/or available, leading to users potentially leaving the page.

Mobile optimisation is also a design issue. The user’s tracked progress is stated at the top of the page and users have to scroll to the bottom of the page to fill out their form. Because of the size of the tracked progress and the bars not being optimised for the page, horizontal scrolling is enabled. These need to be optimised for a better mobile experience for the users (reference above).

Research:

Competitor research:

With the UX issues established, I then turned my attention to what the competition is doing successfully and comparing it to reviews about TSB’s online services. The competition research would guide me to see where TSB may fall short in comparison.

My first point of call was viewing the Simply Business website. Simply Business took out a survey of 16,800 small business banking customers to rank 14 banks[6]. In “The best business bank based on online and mobile banking services” category TSB finished 13/14 with 43 % of users recommending their online banking services. The survey also listed Metro Bank as “the best business account for online and mobile banking” of the 14 banks. Monzo, Starling, Tide and Coconut were all listed as “challenger banks” as they are online-only and mobile-first banks.

With the mention of these four challenger banks, I looked at the Which.co.uk “Best and worst banks”[7] based on user ratings taken by “thousands of users”. Monzo and Starling appeared as second and third in the list with a Which Rating of 83% and 82% (out 100%). Both were rated 5/5 for online banking. In contrast, TSB scored 65% on the Which Rating and ranked 3/5 for mobile and online banking (Monzo and Starling don’t have online/web banking).

User comments:

I looked at user comments who had used TSB’s online services. Although there wasn’t much about the sign-up process, there was a number of poor reviews on the online experience. Customers complained about the registration flow and even recommended Monzo for TSB users.

Competition:

Continuing with my research I did find out that challenger banks have a faster sign up speed. Built For Mars ran a test on 12 different banks [8] to see which banks had the quickest sign-up process. Revoult, Starling and Monzo had an average of 35 steps (the lowest — Revoult having 24 steps, the highest — Monzo 45). In contrast, traditional banks had an average step of 88 (the lowest- Lloyds 69 steps, the highest — First Direct 120).

It is predicted that 44% of Brits will have a digital-only bank within the next 5 years [9]. With this increase, it is good for business for traditional banks to have at least a similar sign up to those banks. The research shows users enjoy a quick and easy sign-up, the TSB form currently is smooth, however, getting to the form is difficult. With more consumers opening challenger banks, it would be in the best interest for TSB to model some of their features around these banks.

Survey:

Before diving into these banks which had scored highly amongst users, I wanted to conduct a survey to users who fit my target audience. Although the data from Which and Simply Business does guide to what banks consumers are using, there wasn’t any data on age or business size. I was able to reach out to seven small business owners to get their feedback on their experience with business banking services. As the survey was remote, I sent it to them and they were able to fill out the survey in their own time.

All users who took the survey were aged between 25–34 and ran small businesses. With this information, I was able to create user personas to help me visualise who the target audience is, why they would use TSB for their business and what is important to them when looking for a new bank.

Questions asked

How old are you?
How big would you consider the size of your business?
For your business, whom do you bank with? (If multiple choose the one you use the most)
Do you use a new online bank for either personal or business? (E.g. Monzo, Revolut, N26 etc)
If you do, how did you rate the signup process? (Skip if you answered no)
How do you access your bank information? (Choose all that applies)
How easy was the signing up process for your business account(s)?
In your own words, what did you like about the process?
In your own words, what didn’t you like about the process?
If you were to sign up for a new business account at a new bank, how important are the below factor? (Very important to not important at all)

Below is a summary from the results, here are the full results: https://t.co/urlrQcq9nb?amp=1

With this data, I looked at Metro Bank, Starling, Monzo and Tide’s websites to see:

· The landing page navigations

· How easy it was for new users

· The speed of setting up a business account

· Mobile optimisation

User Persona

Card Sorting:

To finish off my research, I conducted a remote open sort amongst 17 participants with 7 completing the sort. I chose this research method to figure out how users think the application should be formed, this data will help when mapping out the final layout of the product.

Prediction:

With these changes, I predict that more users who go onto the TSB website would find the journey easier and more pleasurable than the current experience. An obvious and clear sign-up button reduces the barrier of entry to turns to start the application from multiple clicks to just one. Making sure the user’s journey is easy and as optimised as possible has been proven to increase user satisfaction (Fitt’s Law). The challenger banks have focused on optimising the user journey from their first interaction with the bank, unlike TSB which complicates the process by adding barriers of entry. These complications will lead to consumers leaving the TSB process for a highly recommended challenger banks.

User flow: https://overflow.io/s/BL7FXQ?node=89ff818b

Low-fidelity wireframes:

Mid-fid wireframes:

Results of prototyping:

Once I developed the mid-fidelity prototype, I conducted tests amongst different users to see what could be improved with my design.

User comments who had taken the prototype

After speaking to a group of different users, I was able to focus on changes to enhance the user’s experience and keep elements which were successful.

Solving the issue:

I focused my changes on making the users journey easier from the start, optimising the mobile experience and adding subtle changes throughout the process to enhance the flow of the form for users.

As covered earlier, the TSB sign up process creates a bad user experience, by sending users on a journey. Adding a sign-up button at the start of the journey helps start their process a lot quicker. Placing the sign-up button next to the login option feeds into the Law of Proximity. Commonly, the “login” and “sign up” buttons are near to each other as they both represent to users this is how you access your information for the service, establish a relationship with nearby objects [10]. Making it the same colour as the login button also allows users visual to pair the options as similar and offer a different option to the other options on the landing page (Law of Similarity)[11]. Doing this, I’ve removed as many elements as possible, without compromising the overall function (Occam’s Razor)[12].

I also focused on the “aesthetic usability effect”, as the rule states “users perceive aesthetically pleasing design as design that’s more usable.[13]” My research showed that the newer challenger bank formats resonated well with small business owners, in addition, TSB users have not been happy with current experience and even leaning towards banks such as Monzo. Making sure buttons are clear can help the process of users signing up to the TSB bank without the issue of a progress bar getting in the way of them going forward in the app.

My survey research also showed all users either used a challenger bank for personal or business use. With this, for my design I leaned into Jacob’s Law. The law focuses on “Users spend most of their time on other sites. This means that users prefer your site to work the same way as all the other sites they already know.[14]” The challenger banks use mobile apps instead of the web, so modelling the mobile page after this offers something similar to what they are used to, a number of my target audience already use these challenger banks so would be likely to use a banking app which reflects something they’re used to.

Problems Faced

This case study was challenging as it was targeted at a specific demographic. Finding small/medium business owners between that age range for research did provide an issue. I was able to find UK based small business owners between the age of 26 and 30, however, none were making the revenue stated within the brief. Was also difficult to find users over the age of 30 or with medium-size businesses. My results were based off a portion of the targeted demographic instead of the full picture.

As it’s also a pandemic, prototyping and card sorting all had to be remote. Due to the testing being on their time rather than an interactive set session, it made follow up questions follow up questions difficult. Without seeing their journeys, it also didn’t allow me to question some of their choices to further build out my design.

A lot of my research findings showed more about TSB’s actual online service rather than their sign up process. Overall, the service is heavily criticised and only a smaller percentage of complaints revolved around the sign-up process.

Final Prototype

Web and Mobile version:

The outline for the case study was to make two versions of the landing and form redesign. One version for web and one version for the mobile browser.

Web

Test the final web prototype here: https://xd.adobe.com/view/a3a436b1-899d-4d31-8711-7d1e2e4e7326-f6f7/?fullscreen&hints=on

Mobile:

Test the final web prototype here: https://xd.adobe.com/view/076f1deb-9288-4d16-81d1-d2836ec138c1-523c/?fullscreen&hints=on

Conclusion

Based on my primary and secondary research with participants, wider bank research and UX laws I feel I have devised a journey which would improve the user journey on the TSB business landing page and application. The changes enhance the TSB process to be more modern and easier to use. This is key as more challenger banks are on the rise, TSB’s online presence has been criticised publicly and TSB ranks lower compared to the competitors.

The project gives me an understanding of some of the barriers you may face when designing for a niche audience and how improvised thinking can help the results of the project. I was able to connect with different people through different channels as it was a pandemic, which did help me with my data. Video sessions could have been used to better find define my results as I couldn’t conduct any research groups in person. Other wider research could have taken place to better my results. For example, knowing Facebook has a strong 30+ audience I could have looked for groups or pages around small businesses. It may not have provided any different details but could have improved the overall data.

As this was my second case study, I enjoyed the improvement I made from my first and was able to try out new methods of research. I was able to connect to different business owners to widen my search to learn the banking behaviours of these users. This was challenging as it was a set case study, I had to work within the constraints of the brief. Although it was rigid, it’s good learning for future case studies.

Resources:

[1] UX collective: https://uxdesign.cc/ux-best-practices-registration-500e55284f82

[2] Hick’s Law: https://lawsofux.com/hicks-law.html

[3] UX planet: UX Planet

[4] Fitts’ Law: https://lawsofux.com/fittss-law

[5] Career foundry: https://careerfoundry.com/en/blog/ui-design/beginners-guide-to-typography/#2-why-is-typography-important

[6] Simply business: https://www.simplybusiness.co.uk/knowledge/articles/2020/06/best-business-bank-account-and-business-bank/

[7] Which.co.uk: https://www.which.co.uk/money/banking/bank-accounts/best-and-worst-banks-a3q5d8c6dj7y

[8] Built For Mars: https://builtformars.co.uk/banks/opening/

[9] Finder: https://www.finder.com/uk/digital-banking-adoption

[10] Laws of proximity: https://lawsofux.com/law-of-proximity.html

[11] Law of similarity: https://lawsofux.com/law-of-similarity.html