UX CASE STUDY: EBAGS

HTML EMAIL

EBAGS DESIGN CHALLENGE

CREATE AN EMAIL CAMPAIGN THAT WILL SHOWCASE CLIENTS TRAVEL ACCESSORIES

PERSONAS

Based on client's personas, I was able to focus on three types of customers journey that I wanted to target within the email campaign.

BRAND/STYLE

Creating a brand/mood board, I was able to gather some ideas as far as color, fonts and images that supports client's current branding and style.

WIREFRAMES

Creating a high fidelity mockup using Photoshop, I was able to put together a design layout that supports a responsive email design template for desktop and mobile.

Design constraints

working within the clients Using the personas created by the client help me identify products that I thought would be attractive to their current customers. I knew that I want to use products that would support the customer's journey, whether they were a young couple, a family, or a retiree.

Mobile first

Considering the campaign need to support different email clients. I wanted to make sure the newsletter that I was creating was responsive and would render well regardless of the device in which the customers would interact with the email.

I started with the mobile-first approach since most users read their emails on their smartphones.  I knew that if I created the design with the smallest screen size in mind, then I could make the newsletter render for any other layouts.

Design board

Using the design board as inspiration, I found images that fit with the client's travel theme. I created a new campaign based on the color choices and typography within the client's existing style guide.

testing responsive layout

To ensure the layout work with different email clients, after building the email in html I used Mailchimp to send email to various popular email clients like Gmail, Hotmail, Yahoo, and Outlook.

Delivering High Fidelity Mockups

A high fidelity wireframe may give the client a pretty good idea of how the platform will look and feel, without getting to the visual design stage, and before going through the entire software development lifecycle.

Product Detail Page

Product detail pages are multi-taskers. They provide product information that customers crave and allow customers to experience the product through their device, when optimized well. The product detail page is often the most detailed “single page” on an e-commerce site. It is the point in the customer journey that has the most impact on whether the visitor decides to add an item to the cart. It's essential to spend a great deal of time and effort getting this page right.

Mobile Optimization

The number of global mobile users is increasing rapidly. Its no surprise then to learn that the number of global mobile users has surpassed the number of global desktop users. SurveyMonkey found that 70% of mobile searches lead to action on websites within one hour. Mobile users are engaging with retail sites and taking steps towards conversion.