rebranding & new website

UX & illustration

ecommerce

The problem

The visual image of Mailbutler no longer effectively conveyed the message they've been communicating -to promote healthy boundaries between work and life.

My job was to simplify and beautify the experience on the website and to humanize the brand. For this project, I worked with a copywriter and a front-end developer.

grey image

User research

I started the process with translating UX research and sketching wireframes. To soon thereafter have a simple prototype on InVision where a group of people could click through the design while I asked them specific user-focused questions.

wireframes

Animations

When you first enter the website, 3 cards with Mailbutler's top features are sliding down to make the viewer focus on what is most important.

Small whimsical animations are hidden throughout the website when you hover over different objects to give the user a more fun experience. It also makes people spend a little more time on the website which improves SEO.

Variations in layouts

When you scroll to each section a smooth animation of the visuals will appear.

To not bore the viewer I designed variations in layout while still retaining the uniformity by maintaining — sustained colour usage, fonts, buttons, menubar and other visual elements.

Minimizing contents

Together with the copywriter/UX editor, we worked on minimizing contents, while still incorporating all the important keywords for SEO, as people get bored quickly and skip sections without even reading what’s written.
Instead, we used illustration to convey feelings that aren’t possible to express by words or otherwise would have taken a paragraph.

Illustrations

The illustrations feature a diverse group of people, reflecting both Mailbutler's wide range of customers and their international team.
The team visuals were also made to further accentuate the interlink between human and technology, enhancing the humanistic side of Mailbutler’s features.

I also incorporated organic and botanical elements in the illustrations, to align with their message of accomplishing productive work with peace of mind .

With this project, I also started maintaining a team-wide repository of my illustrations and kept adding to it. All illustrations are made in vector format (SVG's) so you can take them apart and put them back together, change colours, positions, rescale them for any purpose, and easily animate them both for video and with CSS.

ux design

Pricing page

The most common interaction from the home page is to the pricing page, which makes it a very important page.
I am using colourful, relaxed visuals to draw a visitor in. Presenting complicated information in a simple manner with clearly descriptive product names that reduce visitor confusion. Including FAQs on the pricing page also makes it easier for users to get answers to questions without having to bounce from the pricing page.

ux design