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

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.

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.

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

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

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.
New editor: next I researched and trialed competing code editors- choosing Sublime for the easy win.
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.

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