Hlousek & Brokers - Financial Advisor Functional Website and Design

My Role

UX Research

UI Design

Project type

School Project

Personal Project

Deliverables

Figma Prototype

Wordpress Site

Report

Duration

4 weeks

Overview

Project introduction

As part of an exam project, my team and I were tasked with creating a digital presence for Hloušek & Brokers, a financial intermediary company in Slovakia.

The company lacked an online presence, which made it difficult to build trust with potential clients.

Additionally, financial advisors in Slovakia have a reputation problem due to past cases of misinformation and lack of transparency.

Our goal was to design a professional, user-friendly website that would establish credibility, trust, and accessibility for the company.

Discovery & Research

Target Audience

The main users were Slovak-speaking professionals in their 30s. They had stable incomes, families, and were looking for financial security. Their main concerns were transparency, clear communication, and trust.

Interviews

We interviewed the CEO to understand company values and goals. We reached out to existing clients but did not get responses. We interviewed potential clients to identify their pain points. They found financial topics confusing and had trouble trusting advisors.

Defining the Space

Business Model Canvas

We analyzed the company’s structure, key partners, and revenue streams. Their main weakness was the lack of digital visibility. The solution needed to highlight their expertise and make it easy for users to contact them.

A few selected sections from the BMC - with some of our key findings

User Persona

We created Jakub, a 36-year-old professional with a family. He wanted clear financial guidance and an easy way to reach an advisor. His main concern was finding a trustworthy financial expert.

By creating a user persona we were able to put a face to our target audience. When creating ideas later on we could ask ourselves "What would Jakub think?" or "Is this what Jakub needs?"

User Persona

Ideation

List of Requirments

To have a summary of all that we need to be included in the website, we wrote a list of requirements based on conversations with our client and examples from other similar websites.

This helped us when we began to draw sketches and create our pages individually during wireframing. Ensuring that we all had a unified list of elements that we should address in our sketches.

List of Requirmennts

Moodboard

The visual style needed to be professional and reliable. We used blue tones for trust and modern typography.

To address the company's issue of trust we wanted to include photos of employees working as much as possible as well.

Our Moodboard

Prototyping & Testing

Design system

Given our client's complete lack of online presence, we recognized the need to establish a brand identity from scratch before proceeding with the creation of a high-fidelity design.

To ensure both design consistency and a cohesive brand experience across various digital products, we created font and colour styles.

Font styles and colours shown on canvas

In line with color theory principles, we decided to opt for a dark blue hue for the text and violet which is the primary color of HLOUŠEK & BROKERS.

Final colour iteration used in Hi-Fi design

Lo-Fi & Hi-Fi Prototyping

We built our Lo-Fi wireframe in Figma, with the help of a plugin called Figit. This way we could insert elements on our pages in a way that would keep it clear and consistent, while we all worked on our own pages simultaneously.

Creating our Lo-Fi wireframe with the help of the plugin Figit

Our Hi-Fi prototype was created next. Here we implemented the colors from our design system and later began testing.

Initial Hi-FI Prototype

Testing

Below is a YouTube video going over our various tests, the feedback we got, and some of the changes we made because of testing.

Key Learnings

Proffesional

UX Research • Competitive Analysis • User Journey Mapping • Business Model Analysis • Prototyping • Usability Testing • Stakeholder Communication • WordPress Development • Design Systems

Personal

Problem-Solving • Adaptability • Iterative Thinking • User-Centered Design • Teamwork • Clear Communication • Attention to Detail

The Outcome

The final website successfully positioned Hlousek & Brokers as a professional and reliable financial advisory service.

Please feel free to view my Figma Prototype or the Live Website. If you have any questions don't hesitate to reach out as well.

Jarl Bentzen