DNB Finland ry
2024 | UX/UI DESIGN, TYPOGRAPHY
DNB Finland ry
2024 | UX/UI DESIGN, TYPOGRAPHY
Overview
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
Final designs
Here is a look at the final designs for the articles subpage. The design aims to solve the challenges listed above based on design heuristics. 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.
Here is a look at the final designs for the articles subpage. The design aims to solve the challenges listed above based on design heuristics. 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.
Here is a look at the final designs for the articles subpage. The design aims to solve the challenges listed above based on design heuristics. 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.
The process
The process
After evaluating the client's current website and meeting with them several areas of improvement were identified.
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.
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
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.
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.
Card component for an article
in a grid view
Card component for an article
in a grid view
Card component for an article in a list view
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
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.
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.
Archivo (30 px) in uppercase is used in the H1 level headings.
Archivo (30 px) in uppercase is used in the H1 level headings.
Mulish (20 px) in bold is used in the H2 level headings. In the copy Mulish (14 px) is used in regular.
Mulish (20 px) in bold is used in the H2 level headings. In the copy Mulish (14 px) is used in regular.
Here is an example of the typography used in context and alongside with the current logo.
Here is an example of the typography used in context and alongside with the current logo.
Takeaways
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.
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.