work

A workflow tool to quickly generate code for Uniqlo's email designers

Developed an internal tool for Uniqlo that cut the time it took designers to build email code from 40 minutes to 5 minutes. This reduced development friction, and freed up bandwidth allowing the team to create personalized content and deliver a better customer experience.

Email code generator tool for non-coding designers
Role
  • Internal UX Consultant
  • Service Design
  • Research
  • User Interviews
  • Journey Mapping
  • Front-end Development
Result
In 2 weeks, I cut email coding from 40 minutes to 5 minutes. Achieved on $0 budget spend.
Year
2018

Platforms
Internal Tool
Overview

Uniqlo’s email team faced a frustrating production bottleneck where buggy code interfered daily with their launch calendar and efforts to improve their reader experience through personalized content. In a two-week service redesign, I worked on-site at the Uniqlo NYC headquarters to build an internal tool that gave designers production-ready email code in under 5 minutes. By removing the designer’s need to manually code, I gave them clarity and confidence over their formerly unpredictable email launch cadence as well as the bandwidth to develop personalized content.

Process Timeline
DISCOVERY

The discovery phase was quick and allowed me to dial this project in on serving the company’s 2 email designers. Stakeholder interviews with management and team members confirmed that the designers were at max capacity with their existing workload: designing and coding 7 emails a week (1 sent daily).

I simultaneously ran a technical discovery around email development tools to understand feasibility and constraints.

I focused on supporting the goals of Designer Emmy, my primary persona. Specifically, the development segment of Emmy’s journey. She was losing the most bandwidth here– and this prevented her from taking on new projects.

Summary

As an internal UX consultant, I worked on a 2-week service redesign for Uniqlo’s email production. The company wanted to personalize their email experience, but their existing system lacked the capability to do so efficiently. I determined the key users to serve were the company’s 2 email designers who were at max capacity with their workload. I conducted a task analysis and found mentally demanding, repetitive steps that could be streamlined through a new system.

To decrease build time, the new system had to eliminate existing bugs, prevent future bugs, and streamline the build workflow. I rewrote the master set of code in stages to give designers a clean foundation, researched and trialed competing code editors, set up a permanent home for the code blocks, and created a smart template that prompts designers with which values to fill in.

The new system significantly improved speed and accuracy, reducing email build time from 40 minutes to 5 minutes. This allowed the designers to develop personalized user content, resulting in a 200% increase in emails shipped weekly without a lapse in regular workload. The solution was implemented in production in 2 weeks with $0 additional business spend. The improved content included geo-based product recommendations, live polls, creative alignment with social team, and more resources put toward product education.

 

Problem

Uniqlo wanted to personalize their email experience so subscribers would not get the same undifferentiated content.

The same email is sent despite regional weather differences.
Uniqlo personalization

Uniqlo’s current state did not have the capability to personalize content for their customer messaging. For the entire US, they sent 1 daily email to the entire US - men and women, which made it hard to speak to diff group needs no tailoring purchase history, regional tastes, temperature/season. Personalization requires bandwidth to ideate and produce that content, and the means to ship it - both of which were absent.

was a quick, high‐intensity effort that allowed us to define project milestones, audit the existing work, review the competitor landscape, understand our client’s vision, and begin research into user needs, behaviours and pain‐points.

Key User

I determined the key users to serve in this project were the company’s 2 email designers. through initial stakeholder interviews with management and team members. They were at

User persona

Designer Emmy’s journey for shipping an email

How were 2 designers with no coding background working around email code and QA tasks?

I conducted 1 day of contextual inquiry followed by a task analysis of their current process to find out.

Topline insights

For the designers, uncertainty and lack of reliability were the main challenges behind the coding time varying wildly from 40 mins to a costly 4 hrs per email.

pain points

From the task analysis, I found clusters of mentally demanding, repetitive steps– steps a system could take over and streamline

task analysis

Problem Statement The designers needed an organized and reliable system to build emails frictionlessly.

Project constraints

  • $0 budget
  • Limited to free solutions

Success metrics

  • Build time per email
  • Number of bugs encountered
  • Employee satisfaction

Ideation

To gather ideas and approaches, I moved into brainstorming

pp ideation

I prioritized the possible solutions based on their portential to lower build time per email.

prioritization matrix

Requirements: To decrease build time, the new system must:

  • Eliminate existing bugs
  • Prevent future bugs entering into code
  • Streamline build workflow
  1. Clean code to start: First I rewrite the master set of code over 2 days in 3 stages to give the designers a clean foundation to work from. Sanitized by section.
  2. New editor: next I researched and trialed competing code editors- choosing Sublime for the easy win.
  3. Code library: (library of clean sections) I now set up a permanent home for the code blocks. Any content block Emmy needs is now easy to access by typing in the section shortcode name.
  • To use a snippet, Designer Emmy types the shortcut name then hits [tab] to expand the code stored inside.
  1. Smart template: Each code block will then prompt Designer Emmy with which values to fill in.
  • She no longer has to decipher what code to edit: process simplified, limits ability to introduce future error.
  • Separate code from content (only edit values)

Testing & Feedback 5 days into piloting the new system, Emmy remarked: “I don’t know what I’d do without these blocks!”

Preliminary testing (2 days)

  • Before onboarding Emmy, I tested the new system over 2 days with the team’s build queue and was able to build emails consistently in ~2-3 minutes
  • This new method significantly improved speed and accuracy

Documentation

  • Next I created a video walkthrough and shortcut cheat sheet so Emmy would have documentation to reference as she piloted the new system independently

Piloting period & feedback (3 days + rolling feedback)

  • Emmy’s new email build time: ~5 mins
  • Team manager’s main feedback was to add a variant for men’s only emails, and more shipping promo banner variants
Before vs after task analysis

Emmy now builds fast - focusing only on inputting key values while the system handles the rest

  • repetitive work eliminated
  • technical tasks transferred to the system

Results With emails now built in 5 minutes instead of 40, Emmy gained bandwidth to develop personalized user content.

Outcomes
  • New achievement of 21 emails shipped weekly (a 200% increase)
  • No lapse in regular workload while developing new solution in parallel
  • Implemented solution into production in 2 weeks
  • Cost $O additional business spend
  • Improved content through geo-based product recommendations, live polls, creative alignment with social team, and more resources put toward product education
Lessons
  • Frictions faced by internal teams can greatly impact front stage experience without end users ever knowing why

Below are slides of the content from above.

Uniqlo Slide
Uniqlo Slide
Uniqlo Slide
Uniqlo Slide
Uniqlo Slide
Uniqlo Slide
Uniqlo Slide
Uniqlo Slide
Uniqlo Slide
Uniqlo Slide
Uniqlo Slide
Uniqlo Slide
Uniqlo Slide
Uniqlo Slide
Uniqlo Slide
Uniqlo Slide
Uniqlo Slide
Uniqlo Slide
Uniqlo Slide
Uniqlo Slide
MonthSavings
January$250
February$80
March$420