The visual image of Mailbutler no longer effectively conveyed the message they've been communicating. To promote healthy boundaries between work and life for their wide range of customers and their international team.
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.
I started the process with translating UX research into wireframes. To soon thereafter have simple prototypes on InVision to test out different layouts.
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.
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.
Together with the copywriter/UX editor, we worked on minimizing contents, while still incorporating all the important keywords for SEO.
Instead, we used illustration to convey feelings that aren’t possible to express by words or otherwise would have taken a paragraph.
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.
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.