DNB Finland ry
2024 | UX/UI DESIGN, TYPOGRAPHY

Overview

DNB Finland ry had a need for a new article page on their website showing new posts from different categories. I designed two different versions based on their current CMS layout.

Additionally, they had a need for updated typography as their brand required more consistency. All of this was part of a bigger project aiming to design a brand book for DNB Finland ry.

Client

DNB Finland ry

Client

DNB Finland ry

My role

UX/UI Designer

My role

UX/UI Designer

My role

Service Designer,

UX/UI Designer

Tools

Figma

Workshops

Tools

Figma

Workshops

Final designs

Here is a look at the final designs for the articles subpage. The design aims to solve the challenges listed in the next section below. Jakob Nielsen's usability heuristics have been implemented on the designs as well as the Gestalt Principles.

The components solve several needs while the navigation indicates the active page and a footer was designed for the whole website. The hero element has been kept in its original design and only the typography has been updated. These designs help the client in developing a consistent and clear user experience for the subpage.

Pain points

After evaluating the client's current website and meeting with them, several areas of improvement were identified and applied to the new subpage.

These were:

navigation not showing active page
website needed a clear footer
typography had inconsistencies
new article page should follow the current layout and style of similar events page
new article page should have options to filter and sort content

After evaluating the client's current website and meeting with them, several areas of improvement were identified and applied to the new subpage.

These were:

navigation not showing active page
website needed a clear footer
typography had inconsistencies
new article page should follow the current layout and style of similar events page
new article page should have options to filter and sort content

Components

Here is a closer look at some of the components that form the final design. Blue brand color color was used to guide user's attention to the call-to-action buttons.

Website card component with white text on a grey bacjground. Showing category name, image of an DJ, headline, publication date, author name, short text and a call-to-action-button.

Card component for an article

in a grid view

Card component for an article

in a grid view

Depiction of a website card component showing category name, image of an DJ, headline, publication date, author name, short text and a call-to-action-button.

Card component for an article in a list view

Buttons for filtering the articles based on categories and

sorting articles based on publication date

Buttons for filtering the articles based on categories and

sorting articles based on publication date

Typography

As a part of the brand book design process I was also tasked to update the typography used in marketing materials. Same typography can then be implemented on the upcoming website.

The typography aims to be massive and bold which are characteristics that the members of the association

attributed to it. At the same time it aligns with the current and a re-designed logo while remaining accessible,

modern and easy to read.

As a part of the brand book design process

I was also tasked to update the typography used in marketing materials. Same typography can then be implemented on the upcoming website.

The typography aims to be massive and bold which are characteristics that the members of the association attributed to it. At the same time it aligns with the current and a re-designed logo while remaining accessible,

modern and easy to read.

As a part of the brand book design process I was also tasked to update the typography used in marketing materials. Same typography can then be implemented on the upcoming website.

modern and easy to read.

Archivo (30 px) in uppercase is used in the H1 level headings.

White text on black background. Examples of different letters and numbers of the Archivo typeface.

Mulish (20 px) in bold is used in the H2 level headings. In the copy Mulish (14 px) is used in regular.

White text on black background. Examples of different letters and numbers of the Mulish typeface.

Here is an example of the typography used in context and alongside with the current logo.

Takeaways

The feedback on the designs was good and I am happy with the overall results. The Finnish drum and bass scene was not familiar to me in advance but the great thing about UX work is that you get to dive deep into different fields and communities.

During the design process also a list view was designed for the association to implement if needed. In the future a list view option could be added to the sorting options with a dedicated button.

Previous project

Next project