top of page

BlueMont Banking: Website

BlueMont is a startup based out of London, England that was looking to build a banking/investment platform meant for small and medium enterprises that are looking to grow their business and reach their full potential. 

My Role

UI Design Lead

Client

BlueMont

Year

2022

Tools

Figma, Invision

Google Forms

BlueMont-Global.jpg

Challenge

 

Their most significant need was to develop an onboarding procedure that would be simple, easy, and efficient for users to apply for loans of more significant than average amounts and receive approval in 15 minutes or less

Solution

Due to the scope of the project being a shorter amount of time with an ambitious client, my team and I decided to go about this project with an agile design method.

Abstract Linear Background

Users needed a platform that provides access to banking, investment services, and advice from experienced professionals.

BlueMont-Notebook-Mockup.jpg

My Role

Early on, I took the lead on this project and chose my team's best positions to succeed. After breaking down and explaining everyone's roles, I took on the role of the UI design lead, while also collaborating in all phases of the UX process - from planning the project and conducting user research to creating high-fidelity, interactive prototypes, and finally, testing them with users. 

Objective

BlueMont Global is in the process of building out a B2B banking service for small and medium-sized enterprises in the UK. To further the discovery process, the UX design team, Keegan, Ben & Fred, was contracted to continue developing the online brand visuals. Building on low-fidelity designs and research conducted by a previous design team, over the period of 4 weeks, our group helped to create the leading edge of BlueMont Globals' hi-fidelity, or, realistic-looking web design onboarding and user logged-in view for prototyping.

Research

Design.png

Design

Develop.png

Develop

Test.png

Test

Deploy.png

Deploy

Review.png

Review

Repeat.png

Repeat

Goals

  1. Integrate BlueMont Global’s existing value-added services, risk analysis, market intelligence, and more into a new B2B financial product targeted toward SMEs.
     

  2. Begin building a design system to ensure efficient web scaling in the future.
     

  3. Build a hi-fidelity ‘not logged in landing page and ‘logged-in’ page that incorporates current market insights and allows users to check and pay balances.
     

  4. Test hi-fidelity designs using comparison tests, 5-second trust tests, and SUPR-Q testing to provide hand-off analytics that supports future investor decisions and design choices.

Timeline

Description
Delivery Date
Discussion Date
Design system: mood board, color & typography samples, buttons etc.
10/21/2022
10/24/2022
Hi-fidelity ‘not logged-in’ landing page w. info on BlueMont Global
10/28/2022
10/31/2022
Hi-fidelity ‘logged-in’ market insights, payments & check balance page
11/04/2022
11/07/2022
Testing of onboarding pages, test results & final hand-off for developers
11/11/2022
11/14/2022

Discover: Secondary Research

Industry Leaders - Our client wants us to create a user interface and overall design similar to that of their top competitors, as it can help establish trust and credibility with users. By having a similar look and feel, users may be more likely to feel comfortable using the platform and understand how to navigate it. 

 

We aimed to emulate the successful elements of their competitors' platforms, such as user interface design, features, and branding. This ensured that the platform was familiar and user-friendly to our target audience and can help to establish the company as a reputable player in the industry. 

Competitor Analysis - Lloyds Bank

Overview
 

Lloyds Bank is one of UK’s leading retail and commercial banks, one among the Big Four.

 

Lloyds is UK’s biggest provider of start-up finance for small businesses. Through a network of over a hundred commercial banking offices & their online platform, they provide support to UK businesses, from SMEs to large corporates and financial institutions.

Lloyd-graphic-04.jpg

Source: Click Here

Digital Touchpoints for Business Accounts

Lloyd-desktop-05.jpg

Desktop/Mobile Website

Screenshot 2023-01-11 at 2.01_edited.png

Native “Business” App

Website versus Mobile App Functionality

Of 54, only 22 simple functionalities are available via Lloyd’s Mobile App.

 

The majority of complex business banking is via the Desktop website. The Mobile App is only capable of basic viewing/managing of accounts.

Source: Click Here

Usability Heuristics

User control and freedom

 

While the overall steps involved & the user’s position in the process are clearly shown:

  • the information required under each step is not visible upfront

  • there is no ability to ask for help or more information

  • there is no ability to skip questions to get back to them later

  • there is no Save button to save progress

Lloyd-desktop-06.jpg

Rating: GOOD

Match between the system and the real world

 

The Business Account options available for customers are explained in a language easily understandable by the target audience to take action

Lloyd-graphic-03.jpg

Rating: GOOD

Recognition rather than recall

 

The Home navigation menu provided by Lloyds is overwhelming On the account dashboard, essential tasks such as Standing Orders, Direct Debits, and International Payments are hidden under tabs, reducing clarity upfront.

Lloyd-desktop-02.jpg
Lloyd-desktop-03.jpg

Successful usage of this heuristic is, however, found when a user leaves the application midway. The interface saves progress & the user can Resume their application at a later time.

Lloyd-graphic-01.jpg

Rating: POOR

Help and documentation

 

Lloyds sets expectations for the customer by providing step-by-step instructions and FAQs on their landing pages and detailed guides to help users carry out their online banking tasks.

Rating: GOOD

UX SWOT Analysis - Lloyds

 

Features offered, content included, audiences served, interaction design, visual design, user flow, and usability of specific tasks.

Lloyd-UX-SWOT-Analysis-graphic.png

Competitor Analysis - Starling Bank

Overview
 

Starling Bank is one of the first mobile-first personal, business, and joint account banks in the United Kingdom.

 

It gives customers the ability to manage their money from an app, while also providing access to a marketplace of complementary financial products and services. Starling also has a B2B banking services offering.

Starling-desktop-02.jpg

Digital Touchpoints for Business Accounts

Starling-desktop-01.jpg

Desktop/Mobile Website

Starling-mobile-08.png

Native “Business” App (Primary Platform)

Usability Heuristics

Registration & Account Creation Flow

Aesthetic & Minimal Design

 

Minimal homepage design focuses on account balance and money spent today Swipe to see other accounts Clean bottom navigation provides access to other account areas Design decisions extend beyond digital presence to their well-designed, vertical chip card.

Starling-graphic-03.jpg

Rating: GOOD

Starling-mobile-08.png

Match between the system and the real world

 

Starling uses everyday conversational language, making the signup process less intimidating This is more evident in the app experience than the web.

Rating: OK

Starling-graphic-01.jpg
Starling-mobile-01.jpg

Help and documentation

Starling clearly and succinctly describes the sign-up process and provides a quick overview of the bank

Starling prevents errors/roadblocks by explaining each step along the way

Rating: GOOD

Consistency And Standards

Starling-mobile-01.jpg

Inconsistency between desktop & app process: sole trader account not an option on app​

Rating: POOR

UX SWOT Analysis - Starling

 

Features offered, content included, audiences served, interaction design, visual design, user flow, and usability of specific tasks.

Starling0-UX-SWOT-Analysis-graphic.png

Competitor Analysis - DBS Bank Ltd.

Overview
 

DBS Bank Limited is multinational banking and financial services corporation. With services such as new account creation, online business loans, trade collections, and a wide range of banking products.
 

DBS empowers SMEs, enabling them to extend their capital and cash flow through hyper-personalized lending options.

DBS-Bank-desktop-04.jpg

Digital Touchpoints for Business Accounts

DBS-Bank-desktop-03.jpg

Desktop/Mobile Website

DBS-Bank-image-02.png

Native “Business” App

Usability Heuristics

Registration & Account Creation Flow

DBS-Bank-Building.webp

Visibility of System Status

DBS-Visibility.jpg

Rating: GOOD

DBS-Bank-mobile.png

User Control And Freedom

Rating: OK

DBS-Bank-image-01.png

Help Users Recognize, Diagnose, And Recover From Errors

Rating: POOR

DBS-Bank-mobile-errors.png

UX SWOT Analysis - DBS Bank

 

Features offered, content included, audiences served, interaction design, visual design, user flow, and usability of specific tasks.

DBS-UX-SWOT-Analysis-graphic.png

Competitor Comparison

Description
Lloyds
Starling
DBS
Branding/ Aesthetics
Strong, recognizable branding implies legacy & trust
Clean, appealing aesthetic implies innovation & efficiency
Clean & consistent branding throughout each platform creating a cohesive & recognizable brand
Element of Trust
Could improve ease of navigation and transparency regarding fee information, security and/or timeframe
Sign up takes about 10 minutes, not too fast/easy, but also not arduous. Lack of physical presence could reduce trust
Multiple forms of verification required to set up account over multiple steps, feels secure while not overdone
Information & Customer Resources
Clear documentation on online banking task completion
Info provided during sign up makes for an easy to understand & seamless process
Chatbot available throughout the website as main customer support while missing in mobile app
Setting Expectations for Onboarding Process
Provides a good overview of process, required documentation, and results
Could provide a better overview of steps required
Some registration processes have clear system status while missing from others = inconsistent
Page 1 of 2

User Screener Survey

My team wanted to create a survey to screen participants for user research. Gathering information about potential participants and ensuring that they are a good fit so that we could use them in user interviews, usability testing, and guerrilla testing. 

Personas

We developed user personas that would best fit more closely with the research that we analyzed. We used them to help guide design and development decisions by providing a clear understanding of the needs and goals of our target users.

BlueMont-Buyer-Personae_James-Lui.png
BlueMont-Buyer-Personae_Sara-Oliver.png

Design System

During our second meeting with the client, there was some confusion about design terms and the process of UX after I explained the process, we confirmed that the last design team had not set up a style guide for the design system.  I explained the purpose and benefits of a style guide and design system to clarify confusion and ensure that my team and the client were on the same page.

We recommend that we create a style guide and design system as soon as possible so it can be used as a reference throughout the design and development process, helping to ensure consistency and cohesiveness in the final product.

Early Design: Sketches

The sketches we used in the design process helped us explore and communicate our ideas quickly. They allowed us to visualize and test different design concepts rapidly, gather feedback, and iterate on the design before committing to a final solution. They also helped to facilitate collaboration and communication among team members and our stakeholders.

 

We ran some A/B testing with our design sketches on different users, and we were able to decide which layouts would work best for the user.

BlueMont-sketches-01.png
BlueMont-sketches-02.png

High Fidelity Designs

By creating high-fidelity designs based on the wireframe, the team could more accurately test and gather feedback on the design elements, such as color scheme, typography, and overall styling. By presenting these designs to the screened users, the team collected valuable feedback to make design decisions and prove our decisions to the client.

BlueMont-high-fidelity-01.png
BlueMont-high-fidelity-02.png
BlueMont-high-fidelity-03.png

Wireframes

We used wireframes to communicate the layout, structure, and functionality of a website and the application before moving into high-fidelity screens. Some examples of low-fidelity, simple visual representations of a user interface that allowed us to share and discuss the design with our stakeholders helped us to facilitate collaboration and ensure everyone was on the same page. 

BlueMont-Wireframe-01.png
BlueMont-Wireframe-02.png
BlueMont-Wireframe-03.png

MEETING NOTE: After concluding the overall color scheme, typography, and wireframe, the client pushed to move forward despite our suggestions to go back and iron out the styling with users' feedback and multiple rounds of testing.

User Testing

We conducted user testing with participants from an earlier screener survey to gather feedback on different design variations. By asking for their opinions on which designs they found to be the most trustworthy and welcoming, we collected valuable information to help guide our design decisions and ensure that the final design was user-friendly and met their needs. Additionally, by seeking additional feedback, we were able to gain a complete understanding of the user experience and identify areas for improvement.

BlueMont-high-fidelity-01.png
BlueMont-high-fidelity-02.png
BlueMont-high-fidelity-03.png

Testing & Results

Doing A/B/C testing with five participants to gather feedback on different design variations and determine which design was preferred by users. This method compares multiple designs (in this case, A, B, and C) by randomly exposing different users to each design and measuring their interactions and feedback. By running these tests with a small group of participants, we were able to gather valuable information about the usability and user preferences for each design, which can guide your decision-making and help ensure that the final design is user-friendly and meets the needs of your target audience.

BlueMont-high-fidelity-SC-01.png
BlueMont-high-fidelity-SC-02.png
BlueMont-high-fidelity-SC-03.png
Logged In Screen A
Logged In Screen B
Logged In Screen C
Trust : 8/10
Trust : 7/10
Trust : 6/10
Likelihood to Return : 6/10
Likelihood to Return : 6/10
Likelihood to Return : 7/10
Comfort: 8/10
Comfort: 6/10
Comfort: 9/10
What did you like?: I really liked the ides of the sidebars with the help-bot (Chat option) The way the information is sorted is very helpful
What did you like?: I liked the idea of the sidebars with the help bot (Chat option) The way the information is sorted is beneficial
What did you like?: I liked the navigation being on the side and the top. The font sizes are easy to read and there is a good sense of balance with hierarchy of importance being very clear.
Disliked most: Some of the sections were not lining up with my needs.
Disliked most: I felt like a sidebar for navigation would be helpful rather than just a top navigation
Disliked most: The unlock insights portion takes up a large portion of the screen for people not upgrading.
Any Changes? - I would remove the payment sections or cards because it seemed unnecessary.
Any Changes? - I would remove the payment sections or cards because it seemed unnecessary.
Any Changes? - Might be better if I could see a part of the unlock section which might help me decide if I want to upgrade.

My team gathered user feedback through A/B/C testing and iterated on our design to improve usability and user preferences. After refining the designs, we presented them to the client for approval to ensure that the final product meets their goals and expectations. Iterating based on user feedback is a critical step in the UX design process, resulting in a user-friendly and approved final design.

Validate

After going through some layout changes and getting approvals on the design of the high-fidelity screens from the client, the team put together some fundamental screen transitions of the onboarding red route to hand off the prototype to developers.

In this case, by evaluating the product's usability, the onboarding process with real users to see how they completed the task while being observed. We could ask the user questions, provide instructions, and make observations about the user's experience. The goal of the moderated usability test was to identify areas where the product could be improved from a usability perspective and to gather user feedback to inform design decisions.

ISSUE RANKING
1. Critical - The website cannot function without fixing this problem.
2. Major - The website will not function correctly unless fixed.
3. Minor - The website can still function without this problem solved but I will get to it when we have time.
4. Normal - Cosmetic problem that can be solved anytime.

Usability Test Round One Results

01

Onboarding Questions - A user pointed out that all of the questions during account registration were too passive and redundant in the way it was worded. With "please do this" for obvious requests.

02

Sign up screen confusion - A user pointed out that on the sign up screen they did not know what button to select to move on,"Next" and Sign-up"

03

Landing page CTA - Someone said that they felt there was not enough call to action on the landing page, once you start reading about the bank the "sign-up " button is far doe the page.

04

Login page top screen - A user stated that having the insights up at the top of the screen is wasted potential screen pace, especially if the user does not want to upgrade to the insights account.

05

Stock Market Tracker - A user felt it would be a great feature to implement so that users can see all and any market changes from the main screen upon login. 

06

Login Screen Confusion - A user pointed out that on the login screen, there are two separate ways to switch and create and account, causing confusion.

07

Home Screen Elements - A user stated that on the main homepage, some of the screens said not look to be lined up with threw them off a bit.

Issue Ranking

Onboarding Questions - 3
Signup Screen Confusion - 2
Landing Page CTA - 2
Login Page Top Screen - 3
Stock Market Tracker - 4
Login Screen Confusion - 3
Home Page Elements - 3

Reiteration - After reviewing the feedback from usability testing, it gave us crucial information for making changes to improve the site page's usability. We decided to apply the changes required for another round of testing with users.

Sign Up Screen

We decided it would be best to remove the "next" button and just have the "Sign Up" button to avoid confusion.

BlueMont-high-fidelity-LOGIN-NEXT.png
BlueMont-high-fidelity-LOGIN-noNEXT.png

Landing Page CTA and Stock Ticker

We decided to change the location of the insights to the bottom of the page; this way, the users who do not upgrade will not have the top of their screen locked off. As well as replacing it with another top nav bar and stock ticker with better information on the market items the user was investing in via BlueMont analysis offerings.

BlueMont-high-fidelity-LOGIN-noTICKERpng.png
BlueMont-high-fidelity-LOGIN-TICKERpng.png

Conclusion

Final Hi-Fidelity Designs for Continued Beta testing.

 

Next Steps: 
1. In the future, I would be open to running more usability tests to ensure that the flow is friendly and easy for all users. 

 

2. Begin with wireframing for the MVP features for the website and user flow.

 

Learnings:
1. The client does not quite always know precisely what they want out of the project so we need to listen carefully and ask more questions to get to the root of the client's needs while stressing to them that the product is for the user and not for them.

 

2. Small and Medium business owners do not have time to read long paragraphs. The need to keep things short and straightforward is sometimes the best route.
 

3. When working with new clients, make sure they understand the complete design process the reason why they need the user's insights is that the product is not for them it is for their users.


Reflections:
My 
UX team and the client may have had different expectations or misunderstandings about the project, resulting in confusion and dissatisfaction.

We also may have focused too much on user experience and not enough on how the design solutions will help the client to achieve its business goals.

 

I would also want to ensure that our client fully understood UX and what he was paying for in the design process, which our management team needed to confirm before assigning our team to this project. 

Overall, a key learning from such a project is the importance of clear communication, collaboration, and flexibility throughout the project, as well as understanding and addressing the client's needs and goals.

bottom of page