Home Page
View All Projects
1
Define
2
Ideate
3
Build
4
Iterate
5
Lookback

Email Redesign

Overview

When: September 2019

Length: 4 weeks

Role: Primary researcher and designer

Team: 1 Product Designer (myself), 1 Marketing Manager, and 1 Software Developer

Task: Research and redesign the entire Vacasa guest transactional email journey

1

Define

If you have ever booked a vacation rental then you know just how many emails you receive throughout the process. There are confirmation emails, receipts, reservation reminders, review requests, and more.

‍

Vacasa's emails had been designed when the data was pulled from a monolithic data lake. The data was hard to get to and therefor the emails were very static.

‍

As well, their visual design was outdated and lacking in information architecture (old confirmation email below). My goal was create new designs that utilized our new dynamic email sending tool and refreshed the visual design.

I am interactive, try scrolling the email!
Old Confirmation Email
Iframe not loading? Make sure you're not viewing this in incognito.
2

Ideate

The first step was to gather all the existing emails and audit them for their intended function, visual design, and information architecture.

‍

Once I had established the current state I was able to meet with Customer Experience, Branding, and Marketing to determine the intended outcomes. Customer Experience had a wish list of features that would make their workflow much easier and reduce unnecessary phone calls. Branding and Marketing wanted emails that were more brand forward and consistent.

‍

Finally I was able to start sketching and creating wireframes in Whimsical. The intent was to create a reusable system of components that could be pieced together to make many different types of emails.

Screenshot of Sketch artboard filled with old and new email designs
Screenshot of Sketch artboard filled with old and new email designs
Various email component wireframes in Whimsical
Whimsical wireframes with various email components
3

Build

Designing the emails was a fairly simple process of designing, testing, and refining. I would gather the requirements for each email and then create a design in Sketch using the component library I had developed for emails.
‍
Once I had the designs built I added them to Framer prototypes and sent them to UserTesting.com for tests. I tested the emails with real people and prompted them to find various information including reservation number, parking info, check-in time, etc. After a few rounds of testing and revision, the emails had become visually distinct, highly usable, and consistent.

‍

One component that became core to the experience was this flexible data grid that I called the 'Reservation Details Card'. This card always contained the unit image, as I had found in testing that users responded well to having their email flow 'anchored' by a reference to the unit listing. As well, the card could adapt its contents depending on what stage of the customer journey they were in; sometimes it showed all the details, others times just the dates, etc. Lastly, this card always contained a link to their reservation details page on Vacasa.com.

a reservation early check in email
Reservation Details Card on display in a 'reservation updated' email
I am a lightbox, click me!
a reservation confirmation emaila reservation blockers emaila reservation check in emaila reservation updated emaila reservation check in emaila reservation early check in emaila reservation late check out emaila check out instructions emaila review request email
Update Confirmation Email
Iframe not loading? Make sure you're not viewing this in incognito.
4

Iterate

During my interviews with Customer Experience teams, I noticed that a common complaint was guests calling in for help with simple tasks like opening the lockbox. I figured that we could standup pages on the website where a guest could self-help before calling Customer Experience.
‍
I worked with the CMS team to create a self-help page for troubleshooting lockbox problems. I also created a pattern within the emails where more self-help pages could be added as Customer Experience identified the need.

Lockbox help page on Vacasa.com
Screenshot of the 'Lock help' page
5

Lookback

What I liked:

  • Information architecture that made the various reservation details easy to scan and understand.
  • Consistently of the design and information across the customer journey.
  • Reservation Details Card and its ability to provide contextual information depending on what stage of the customer journey the guest was in.
  • Improved presentation of our brand.
  • Reduced calls to Customer Experience team for simple problems with things like the lockbox.‍

‍

What I learned:

  • Iterative design processes involving repeatedly user testing small changes in a design.
  • Taking requirements from more teams than the product team. This project required collaboration between Design, Product, Marketing, Brand, and Customer Experience.

What I would do differently:

  • I would do more work to reduce the total amount of emails and further explore the ways in which we could communicate this information to the guest without an email.‍