Date: 2019-now
Role: Lead Experience Designer
Responsibilities: Research, naming structure, content strategy, UX

Modularized Email — Building an effective email system

Our fans come to us when they're experiencing complicated emotions. Either they didn't get tickets to the sold out show or they got the tickets but can't make it anymore. Through emails we hope to assure the status and set the right expectation to quell their concerns.

Challenge

What Email Is It?

The answer varies, depends on who you ask. The customer support might tell you the "subject name", the designer would say the "template name" and the engineer might refer to the "template path", as we get more features with similar email set, it gets harder for everyone to be on the same page.

User goal_

Buy

system action_

0-Auth
1-Created
2-Canceled
3-Closed
4-Fulfilled
5-Fulfillment error
6-Delivered

Feature name

Quasar
Request
Request-multitier
Instant
Encore
Swap

Lottery

User goal_

Sell

system action_

0-Auth
1-Created
2-Offered
3-Expired
4-Canceled
5-Closed
6-Pending
7-Remind
8-Fulfilled
9-Delivered
10-Delivery error

Feature name

Return
Return-stacked
Transfer
Transfer-Physical
Send
Swap

Template name

Design Goal 1

Scalability—Define the Shared Context and Variables

Lyte has many features and each feature has its own email set, we use this naming structure based on the number of variables in each email to reduce development effort and maintain consistency across all the emails.

Template name
[user goal] _ [system action] _ [feature name]

Context

Negative situation

Lyte system is attempting to charge the payment Jane provided to purchase tickets she requested but is experiencing an error. Jane is feeling confused and stress cause she doesn't want to lose her tickets.

name

Template: buy_payment_error_request

Subject name: Oops, there was a problem processing your payment

Do

Not to worry! Your tickets are safe and waiting for you! Follow the instruction below to update your payment information within 24 hours. Once we received the update, we’ll send you a confirmation with your tickets.

Don't

We had an error processing your payment. Please update your payment method within 24 hours or you'll lose your tickets.

Support links

How to update my payment?

I’ve updated my payment, when will I be charged again?

Content audit example

Design Goal 2

Comprehensiveness—Content Audit Sheet with Best Practice

By working with the support team, we were able to identify common questions throughout the customer journey. We set up the content audit sheet to help reducing redundant information in every email. And put "Jane" instead of "the customer" in the context to increase empathy.

The desktop version is only available with the browser over 900px wide.

Marketing email

The desktop version is only available with the browser over 900px wide.

Transactional email

Design Goal 3

Consistency—Visual Language for promotional and Transactional context

Gain engagement through the marketing emails

Most of the fans have never heard of Lyte. The goal of the marketing emails is to gain engagement by promoting our client's branding more than our own.

Foster trust through the transactional emails

Once fans start using Lyte, we aim to raise our brand awareness and to nourish brand advocates by emphasizing core brand elements and languages in the emails.

The desktop version is only available with the browser over 900px wide.

Container

Column

CSS
SASS (rem function)
SASS (Spacing function)
8px
rem (8px)
spacing (small)
16px
rem (16px)
spacing (regular)
24px
rem (24px)
spacing (medium)
32px
rem (32px)
spacing (large)
40px
rem (40px)
spacing (xlarge)

Spacing

Display Large

font-size:28px;
line-height:1.2;
font-weight:600;

Display Medium

font-size:20px;
line-height:1.6;
font-weight:600;

Display Small

font-size:20px;
line-height:1.6;
font-weight:400;

Body

font-size:16px;
line-height:1.5;
font-weight:400;
letter-spacing:0.2px;
font-size:16px;
line-height:1.5;
font-weight:400;
letter-spacing:0.2px;

Typography

Brand
PY70
#009f8a
PY50
#3ccc98
CA50
#FFD400
CA30
#FFED96
Service
S100
#1d1d1f
S60
#7f7f7f
S40
#e5e5e5
Auxiliary
G50
#388E51
G30
#E2F4E4
O50
#FEAF39
O30
#FFEED6
R50
#EF5350
R30
#FFEBEB

Color

Design Goal 4

Responsiveness—Simplify Design for Different Screen Sizes

To scale the system and make it flexible, the fewer options the better. We worked with the engineers to test out elements in the emails across devices to reduce as many stylings as possible.

The foundation

The foundation contains the layout of the email and the unified brand look and feel like color and type scale.

80x80px
60x60px

Images

60px
16px

Icons

Ticket delivered
Requested
Payment error
Canceled

Badge

Elements

Elements showcases the smallest individual pieces of the interface which act as building blocks for components.

The desktop version is only available with the browser over 900px wide.

Header

The desktop version is only available with the browser over 900px wide.

Footer

The desktop version is only available with the browser over 900px wide.

Content card

The desktop version is only available with the browser over 900px wide.

Event card

The desktop version is only available with the browser over 900px wide.

Ticket

The desktop version is only available with the browser over 900px wide.

Receipt

Components

Independent and repeatedly used pieces of the interface built out of elements. Each component has its own purpose and correlating content type.

Credits and thanks to

Amadeo, Design oversight
Innie, Alex Z, Alexey, Sasha, Engineering team
Alexandra, Danielle, Customer support team

Hi! I'm Zoe,

a product designer based in San Francisco with 5 years of experience working on product strategies, interaction and visual design. I've designed in both mobile and desktop across technology, education and entertainment industries.

I thrive working between compact cross-functional teams with ambiguous problems. Currently leading a product design team at Lyte.

Get in touch
Resumezoekao.p@gmail.comLinkedinInstagramDribbble
Experience

Lyte, Lead Experience Designer

Developed and shipped new features to keep tickets among fans and away from scalpers

2018-Present

Lyte, Senior Designer

Delivered features and built brand to increase fans' confidence when returning or requesting tickets from the official ticket exchange

CHOXUE, Design Lead

Drove product research and redesigned brand to redefine company focus and raised a successful fundraising round

2016-17

BASSIC, Co-founder & designer

Led brand development and formalized early user engagement

2015-16

Ministry of Education, Visual designer

Designed international conferences' visual identity

2012-15

Education

UC Berkeley

Graduate Certificate Program,Strategic Brand Management, Global Business

2017-18

National Taiwan University of Science and Technology

Bachelor of Arts (B.A.), Design and Visual Communications, General

2012-16