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
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.
Users needed a platform that provides access to banking, investment services, and advice from experienced professionals.
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
Develop
Test
Deploy
Review
Repeat
Goals
-
Integrate BlueMont Global’s existing value-added services, risk analysis, market intelligence, and more into a new B2B financial product targeted toward SMEs.
-
Begin building a design system to ensure efficient web scaling in the future.
-
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.
-
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.
Source: Click Here
Digital Touchpoints for Business Accounts
Desktop/Mobile Website
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
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
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.
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.
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.
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.
Digital Touchpoints for Business Accounts
Desktop/Mobile Website
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.
Rating: GOOD
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
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
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.
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.
Digital Touchpoints for Business Accounts
Desktop/Mobile Website
Native “Business” App
Usability Heuristics
Registration & Account Creation Flow
Visibility of System Status
Rating: GOOD
User Control And Freedom
Rating: OK
Help Users Recognize, Diagnose, And Recover From Errors
Rating: POOR
UX SWOT Analysis - DBS Bank
Features offered, content included, audiences served, interaction design, visual design, user flow, and usability of specific tasks.
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 |
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.
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.
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.
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.
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.
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.
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.
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.
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.