MoonMail

 

Caring deeply about the value they provide for their customers – MoonMail is an email marketing tool based in Spain. From creating and designing templates to campaign analysis and performance, MoonMail provides high quality Amazon SES email marketing to their customers.

MoonMail approached me with a challenge to redesign their landing page and blog. The opportunity was to create a modern, aesthetically pleasing design while helping highlight and communicate MoonMail’s value proposition and core benefits. This redesign would coincide with a version 2 of their product which they were planning to release.

To create a new solution I identified areas that needed improvement:

  • Unclear calls to action
  • Language used was sometimes confusing
  • Value proposition wasn’t strongly communicated
  • Hierarchy of features were difficult to glance over
  • Lacking visual elements to show the tool

Snapshot of the pricing section of the new home page

Uncovering the value of MoonMail
Together with MoonMail, I worked through a value uncovering questionnaire to help uncover what their value proposition is. This helped to understand MoonMails strengths, how they differ from competitors and who their customers are. The answers to these questions then became a foundation for what was important and what the goals were of the project.

Questions included:

  1. What does MoonMail do?
  2. Who does MoonMail do it for?
  3. Why did you start Moon Mail?
  4. How do you differ from your competitors?
  5. What are your goals?
  6. What is your value proposition?

Content creation
One of the goals of the project was to ensure that the benefits of MoonMail were strongly communicated and easily understood. Together we worked on improving the copy and choosing messages that helped communicate the benefits of MoonMail.

Interactive price slider

Interactive price slider

Creative Process

Wireframing
Wireframes help to organise the information, structure and hierarchy of the site without being distracting by visual elements. After sketching some on paper, I picked the one that worked best and digitised it. I then identified obvious areas of improvements, making small tweaks and moving elements around to explore how it felt.

Custom illustrations

Visual Design
Visual design is where we give the utmost attention to detail. Hierarchy was of high importance during this phase and was carried out by a combination of balanced typography, scale and colour. I also suggested subtle transitions to help maintain attention of the user and highlight areas where they could interact.

The colour pattern consists of a clean, neutral colour scheme. A combination of green and blue are used as accent colours, where darker and lighter shades are used for balance.

The hero section of the landing page had to communicate the value proposition of MoonMail in a concise way, while also telling the story of MoonMail. The aesthetic design developed for the landing page was also carried through to a blog – a new venture for MoonMail. The blog allows MoonMail to categorise their posts, set feature images and encourages social sharing.

One goal was to include closer aligned visuals. We used illustrations to show the visual interface of MoonMail. These illustrations accompanied the features on the landing page and helped communicate the benefits of using MoonMail.

Button and form styles

Style Guide
As I didn’t work on the technical side of this project, I made sure to create a thorough Style Guide for the developer at MoonMail. This included things such as typography rules, alignment, spacing, colour, states and styles.


We liked working with Femke, who as a designer also understands business and marketing. When marketing and design correlate together, the overall message is twice as strong. She gave her best to understand our product and our users, so she was able to deliver exactly what we needed.
— Ivana Veljovic, Marketing Manager at MoonMail