MASSENVERSAND | UI DESIGN

Brand repositioning for newly acquired messaging company.

MASSENVERSAND | UI DESIGN

Brand repositioning for newly acquired messaging company.

MASSENVERSAND | UI DESIGN

Brand repositioning for newly acquired messaging company.

Overview

Massenversand are an application-to-business messaging company based in Dresden, Germany. They provide their customers with direct access to local mobile networks, enabling businesses to send SMS marketing campaigns to their customers.

Role

User research • UX design • UI design

Tools

Miro • Figma

Challenge

Following the acquisition of Massenversand, the decision was taken to carry out a re-design of the current website in order to update and align the look and feel so that it could be repositioned within the family of brands that make up the parent company. This was important to ensure post acquisition that we were attracting the right demographic of users, which were primarily based in the finance sector.

Solution

It was decided that the majority of content would be retained from the old site, along with the logo and most of the original colour palette in order to not deviate too far from the brand as it stood due to it already having an established position in the market and a loyal customer base, however, all UI elements within the pages of the site were within the scope of the redesign.

Outcome

The result of the re-design alongside related Marketing activities lead to an uplift in traffic to the website, a reduction in bounce rate and an increase in pages per session, overall showing a marked improvement in visitor engagement.

Process

Styles & Components

To create the high fidelity prototype and ensure the branding was applied consistently I created a style guide which included a colour palette and typographic scale, both of which were applied using an 8pt grid system. Defining styles and components at the start of the project helped me to easily and quickly design the screens for multiple pages of the website.

Colours

Action colours

Primary

Secondary

Text colour

Typography

Nunito Sans
Grumpy wizards make a toxic brew for the jovial queen.
AaBbCcDdEeFfGgHhIiGgLlKkMmNnOoPpQqRrSsTtUuVvWwXxYyZz
123456789
!@£$%^&*(){}[]?

Typescale

Heading one
48px/56px
Heading two
40px/48px
Heading three
32px/40px
Heading four
28px/40px
Heading five
24px/32px
Heading six
20px/32px
Body copy
16px/24px
Body copy small
14px/20px
Caption
12px/20px

High fidelity mockups

A high fidelity mockup of the website for desktop users was created to cater for what would be the greatest proportion of traffic visiting the website.

Making things responsive

Whilst desktop users accounted for the majority of website traffic, it was important that the website was responsive and therefore considered users on different devices, from tablet and smaller screen laptops, down to mobile devices.

MASSENVERSAND | UI DESIGN

Brand repositioning for newly acquired messaging company.