Communication made simple

June 2016 August 2016
Habitat
Newsletters and Marketing
Redesigning our newsletter templates, at Habitat was another rewarding piece of work.

This was long overdue and in need of much attention, as during the many months spent replatforming and redesigning our entire website, we had to put this on hold.

Above: Content version of the new newsletter template.

One of the reasons to redesign them was that the previous templates were not responsive, this meant managiging both desktop and mobile versions were very time consuming. We needed to optimise our execution time, as well as being able to target more smartphones rather than just the iPhone 4.

The other reason, as important as the previous, was to maintain consistency throughout all our digital channels. Our old templates, whilst being inline with our old website, were clearly obsolete and poorly represented the new website and our brand's new look and feel.

Above: Some examples of the new responsive templates. Both mobile and desktop options use the same images, which cut by half their excution.

Structure & layout

The images below illustrate the make up of these emails, their basic structure, layout and the Design System.

The main rationale in their making was:

  1. A modular structure with interchangeable rows - 12 rows for Habitat Voyeur newsletters and 5 for Habitat Features newsletters.
  2. The articles were image lead, hence each photoshoot was planned to the smallest detail and directed by professional photographers.
  3. Each profile would serve as a source of inspiration, promoting a specific look to entice our customers to shop that look.
  4. The underlying Design System and components were then expanded and refined to cater for any new pages we might plan to design in the future.
Above: New newsletter layout (right) compared to the old template (left).
Above: New mobile newsletter layout (centre) compared to the old mobile template (left). Secondary mobile image details of the old template (top far left) against the new mobile layout using the same image as the desktop version (bottom far left).