Financial Services Consulting Project

Background

BlueMont is a new initiative dedicated to UK companies involved in digital banking with a specific focus on servicing SMEs (small and medium-sized enterprises). They are in the midst of applying for their financial conduct authority authorization and want to get started on their customer-facing platform. They partnered with our team for a 6-week internship to begin designing their SME registration experience.

Company Problem Statement

Project Problem Statement

Project Goal

My Role

Home Page (scroll)

SMEs are underserved with high trade finance rejection rates, limited long-term finance options, and risky performance guarantees for payment deliveries.

How can SMEs be offered a streamlined and efficient registration experience while collecting all necessary information and documentation to successfully register them for a business account?

Analysis of competitor products & user needs to create a product mockup for the SME Business account application flow for BlueMont's banking platform.

UX/UI Designer on a five-person team, consisting of 3 designers, 1 engineer and our Stakeholder (BlueMont CEO).

The BlueMont Customer

BlueMont conducted user research prior to the start of our internship. Based on their user research they provided us with 2 primary personas, the professional services finance manager, and the manufacturing organization owner. Although from different industries each user displayed pains, goals and gains pertaining to the SME banking experience.

Competitive Anlysis

After understanding the type of customer BlueMont serves, our team began to look into who their primary competitors are and what experience they provide to customers, specifically SMEs. We focused on three primary competitors, all serving the same market but with different company structures.

Lloyds Bank is one of the "Big Four" financial institutions in the UK and we focused on them to see what the top providers are offering SMEs.

Starling Bank is an emerging competitor that provides a 100% digital and primarily app-based experience to customers.
DBS Bank is an extension of HSBC and it has created a streamlined digital experience catered to SME customers while maintaining its legacy presence through HSBC, a top-tier bank in the UK.

Offerings from each bank in terms of user experience were broken down in the chart below -

BlueMont Competitive Comparison

For a more detailed look into our research, please check out our Competitive Analysis Report

User Flow

The competitive analysis gave us insight into the user experience that was being offered by competing brands. After presenting the competitive analysis, our team went through various SME account registrations to gain further insight into what the industry standards were for account registration, and what pain points were present that could be improved in the BlueMont design.

The first flow presented to our client is shown below -

We then presented the user flow to our client. We received feedback about how BlueMont envisioned their registration flow and had a discussion to meet their needs while maintaining clear UX practices. We then revised the user flow and presented the image below to our client. This flow was approved and used as the blueprint for our low-fidelity design.

Low-Fidelity Mock-Ups

Once we got approval for our user flow, our team began working on the low-fidelity screens for our client. As our team was completely remote, we found it easiest to collaborate through Figma and use low-fi wireframes for our mock-up.

As collaboration on the same wireframe screens was tricky, we broke the flow into three sections, the home page, the SME banking page and the registration form, independently creating the digital outline for each and then coming together to ensure we had a cohesive design to present to our client.

Our final low-fidelity screens are shown below -

SME Banking Page (scroll)

Registration Flow (slides)

The low-fidelity screens were presented to the stakeholders and the prototype was used in thier investor application presentation. Past the project reflection I have gone beyond the scope of the project to build out the brand identity and UI of the customer-facing site.

Project Reflection

Setting a realistic scope

Working on this project on a team taught me how to set limits when it comes to the scope of the project. We had a set timeline of 4 weeks and the client had lofty goals about what they wanted us to accomplish. I learnt how to set a realistic scope where the client was happy with what we would be able to deliver while our team was confident in the quality of work we would be able to produce in the time we were given.

Always ask for what you need

At the beginning of the internship, our client provided us with all the information they had that would help us complete the project. The initial information was extremely helpful, however, there were other materials that we wished we had in order to complete the project. Although it was conveyed to us that all information had been provided we still asked questions and for additional materials just in case they were available. Our client did have the additional information and materials which made our lives easier as designers who were new to the project and enabled us to successfully complete all items in the scope on time.

Cross-functional Team Experience

While working on this project we had individuals from 3 different timezones. This was a great experience as I left this internship with not only new design experiences but with better team and time management skills. I was also introduced to new tools that facilitate work within a cross-functional team.

Beyond the Scope - Exploring the UI

Initially tasked with mapping the user flow for applying for an SME banking account, the project evolved into a deeper exploration of the brand, its ideal customer base, and its overarching vision. Going beyond the specified scope, I proactively addressed the UI aspect, aiming to revitalize the brand. Our approach focused on preserving the brand's roots, authenticity, and original meaning while infusing a modern touch. The goal was to add finesse, making the brand more contemporary and appealing to today's customers. This holistic approach aims to enhance the user experience and the overall brand identity.

Logo and Branding Refinement

In the initial stages of the high-level UI redesign for BlueMont, the focus was evaluating the brand's logo and font.

BlueMont's color palette was comprised of Tory Blue #004aad and Lawn Green #6a9803, and the font is Arial Bold.

To begin the redesign process, I took a quick stab at refining BlueMont's current logo. Adhering closely to BlueMont's established colour palette and font was crucial to maintain brand identity while enhancing aesthetics. Consistency in visual elements is key to building user trust and recognition, which ultimately contributes to a more effective digital presence for BlueMont.

Given that the initial font, Arial, is quite common, I opted for a similar modern typeface, Montseratte, to add a fresh touch. Additionally, I simplified the silhouette of the tree used in the logo, retaining its essence while removing intricate details for a cleaner look that aligns with contemporary design trends.

As the brand already has a well-established identity, I approached the redesign process with the intention of refining rather than recreating BlueMont's branding. Utilizing the existing blue and green color scheme as a foundation, I developed several refined options to enhance the brand's visual appeal and effectiveness. These options aim to maintain consistency with BlueMont's established identity while incorporating modern design elements and improvements for a more polished look and feel.

The decision to choose this final logo stems from several considerations rooted in BlueMont's brand identity and practicality. While I appreciate the uniqueness of an all-lowercase logo, it's important to align the logo with the company's legal name, which is registered with capital letters for "M" and "B". Consistency between the logo and legal documentation is crucial for brand recognition and credibility.

In selecting the brand's font, my focus was on clarity, structure, and conveying trust and professionalism, all while maintaining alignment with the established brand identity. Rather than exploring numerous fonts, I gravitated towards Montserrat as a modern alternative to the familiar Arial. This decision allowed me to work within the confines of a single font while infusing a fresh, contemporary feel into BlueMont's visual language