Email UX and Customer Contact

As BioMedware's new site lauch gets closer, I've had to shift gears from website UX to email design. This week, I've been working on designing the outgoing order and purchase emails for our ecommerce site. Since these emails may be our first contact with the customer, it's important that they are designed to be simple and efficient. Now with email design, I've learned that there are a few key differences from web design: let me walk you through the basics.

Focus - Mobile or Desktop?

This is a big one: since BioMedware sells desktop software, our main focus was optimizing the desktop version of our website. However, statistics show that most users open email correspondence on mobile devices, making the mobile design and accessibility larger priority.

Email Sizing

The first thing to note is email size: unlike a full desktop width, the average email width is 550px-600px. Anything wider than that may not be displayed to customers as intended. Make sure to check that your email design won't be cut off when the emails are sent out!

Email Client Rendering

When we sent out our test emails for BioMedware, they rendered perfectly on Gmail, but looked a complete mess on outlook. Just like websites render differently in different browsers, email clients render CSS differently, and apparently Outlook is a big culprit when it comes to this. So juuuust to be safe, double-check how your email looks on different clients.

Contrast

Similar to the website, making sure the text sizing and colors makes your email accessible on every device is important. For our ecommerce emails, I stuck mainly to a few colors from our website style guide - this kept it simple while allowing users to associate the email with our logo and brand. This had the added benefit of following the WCAG A accessibility level we implemented on our site.

Content Hierarchy

Let's face it: people don't like skimming large chunks of text to find what they need. You can use a few things to differentiate sections of your email:

  • font-size
  • color
  • bolding
  • spacing
The user's eye should be drawn to the most important elements, which may be headings, links, or buttons, so be sure to emphasize that.  In contrast, the least important text (copyright info, addresses, etc.) should be the smallest and least visible. Keep it short and to the point - users are known to leave a page if they can't find what they need through a cursory glance.

Developer-Friendly

The last step is keeping things developer friendly: I had a few meetings with our web developer where we ensured that my design could be created functionally and looked good in action. Remember - a design might look great on paper (or design software) but not quite work in action. Many companies skip this step and use sites like mailchimp or e-junkie to send out emails, but if creating them from scratch is the best option for you, make this step is important.

Thanks for joining me through my design process, and I hope this was as informative to you as it was to me!

Comments

Post a Comment

Popular posts from this blog

Let's Get Technical - Wireframing

Image
Let's get into wireframing! The past few weeks at BioMedware, I've spent much of my time creating wireframes for our new ecommerce website. With a background in software and web development, my experience definitely resides on the technical side, so I was excited to explore the other side of website creation: design. Apparently, a whiteboard wouldn't cut it - my team member introduced me to a design software called Figma: it has a bunch of pre-sized frames, from phone screens to desktop and tablet layouts that you can start off with, plus templates, examples, images, and more. As you can imagine, the wireframing process has a few steps. These steps can vary between companies and designers, but I'll break down our general process at BioMedware:  1. Create a low-fidelity draft The first step is to create a low-fidelity draft which basically just positions the web content - where the header, nav bar, footer, and paragraphs are located relative to each other. For our barebo
Read more

Trust the Process – Client Meetings and Initial Research

Is website design the most important element in tailoring user experience? Not quite, as I’ve learned. The UX design process starts off with getting familiar with your clients and their needs. Our first week at BioMedware, my internship partner and I met with the company president and employees to discuss requirements and the feel of their brand. With a small but high-powered staff of five, it didn’t take long to learn their highest priority: simplicity. They wanted a design similar to their original website, meaning that we had a precedent to base our fonts and colors off of. So what comes next? Initial market research. Knowing what other companies are doing and their reasons for this is a great way to be aware of design opportunities and pitfalls. My team was lucky in this regard – BioMedware had sample pages of competitor ecommerce sites, so we had our research ready, as well as our company’s take on what they liked and disliked. Having simplicity as the highest priority meant never
Read more

Logo Animation: Pick your Software

Image
So you want to create a custom logo animation: you've looked through your different options in my previous post , and decided to use an animation software instead of outsourcing to other services or sites. How do you get started? What software should you use? Things to Consider: Paid or Open-Source? When I started my animation project for BioMedware, I was a beginner and had little experience with animation software. Since I couldn't guarantee satisfaction with my end product, I didn't feel comfortable charging the company for a subscription such as Adobe After Effects. I decided to go with an open-source software to get a feel for animation. On the other hand, if you've had some experience with animation in the past, you may appreciate the security and quality guarantee of a subscription-based software such as Adobe After Effects, with monthly or yearly plans. Typically, monthly prices can range from $10 - $400 for good quality animation, depending on the software used
Read more