Emme Clark Design Portfolio
twitter-on-blue.png

Twitter

Twitter

Twitter

The world's town square

 
 

 

The Basics

Company
Twitter

Team
Revenue Team

Time
1 year

My Role
Product Designer

 
 

 

The Challenges

 

As part of the Revenue Team, I helped bring home the bacon for Twitter. I designed interfaces that thousands of companies use to set up and manage campaigns on ads.twitter.com.  

When I joined Twitter, Twitter Ads was still under 1 year old. It was built rapidly in order to meet the needs of our users. Our challenges were to

  1. define missing UX fundamentals,
  2. correct existing UX issues, 
  3. create a scalable system, and  
  4. continue to build out new features.

Here's how I addressed those challenges.

 
 
 

 

Challenge #1:

 

Define UX Fundamentals

When I came on, the user research team had done admirable work in vetting features, but no core persona work had been done. Twitter Ads is a service for mom-and-pop shops as well as multi-million dollar industries. How do you design for this array without understanding the needs of each? Seeing this lack, I made it my mission to fill in these details.

Solution

  1. I advocated up the chain for a persona development. 
    This included working with my manager, the VP of Design, and a new user research lead to make sure a persona project got roadmapped. 
     
  2. I created temporary personas using existing research.
    These little personas were used by the design team until the user research team finished their work.
     
  3. I traveled with the user research team on some of their interviews and participated in research synthesis. 
     
  4. I created shareable pocket profiles with the results of the research.
    The user research team and I wanted a way for product teams to easily refer to their research. I created these card-sized pocket profiles that members of the product team could keep at their desk.
 

Twitter Ads Pocket Profiles (details obscured to protect proprietary information)

 
 

 

Challenge #2

 

Smooth Out the Experience: The Promote Your App story

The first version of Twitter Ads was built quickly before I came to Twitter. In the haste, the user experience stumbled in places. I became a go-to designer for smoothing out these experiences. 

The Promote Your App feature is an example of where earlier versions were lacking. Here's how I approached a solution.

Promote Your App Overview

Twitter has a special design lockup for promoting apps. To use the lockup, a user must add an app to promote. The original flow to add an app was problematic. Users were confused by the questions and were often roadblocked by indecipherable errors.

 

Promote Your App lockup

Twitter Ads campaign form
(Note: this is the campaign form, not the original Add App design)

 
 

Mapping the Larger Experience

The Add App flow was part of a bigger experience, so I started by mapping all those pieces. This was important since what the user sees is highly dependent upon different statuses—including whether or not the user has conversion tracking (MACT) and deep links set up.

 
 
 

#Simplify

While I designed states for every piece of the flow above, the designs below are just for the Add App piece. These seemingly simple designs solved the problems of the original flow, but like most "simple" design, it took a lot of complexity to get there

1. I worked with engineers to get the tech to match user needs. 
Originally we were asking complex things like "Pick a country whose predominant language is the language you want your app card to appear in." Yes, this sounds ridiculous... and it was. The reason we asked it was because it mimicked the data source we were using to validate apps. However, by working with engineers, we were able to switch the data source and ask a simpler question: "What is the ID for your app?" 

2. I decoupled user tasks.
The original Add App flow required selecting things that were more relevant to individual campaigns. I moved those questions to the campaign form, where they made more sense. This also gave users greater flexibility in their campaigns.

3. I collaborated like crazy with users and user representatives.
We had an internal panel of account managers who hand-held clients through campaign management. This panel thoroughly understood the customer experience. Using their expertise, I could iterate quickly, in addition to the usual user tests. 

Here is the simple Add App flow that we came up with.

 
 
 

Getting it Right

When reviewing a design that is wrong, you get a lot of lengthy responses trying to pinpoint what's not right with it. When you get it right, the response is clear.

After a number of reviews for the PYA Add App flow, I remember when the design was finally right. The whole panel simply said, "Aaaaaah. Yes." User testing confirmed. We shipped it.

 
 
 

 

Challenge #3

 

Developing a Cohesive Design System

No style guide existed when I came on board, and no resources were allotted for component creation on the department's roadmap. Revenue designers and engineers participated in a guerrilla effort to design and develop reusable components in a project called Feather. 

Solution: Contributing to Feather

I joined the Feather effort: exploring many styles, reviewing them with designers and engineers, gathering consensus, and documenting the outcome into reusable components.

Among the styles I worked on were modal styles. Here are some modal style explorations I did, which was part of my contribution to developing a cohesive design system.

 
 
 

 

Other Notable Work

 
 

Objective-Based Campaigns

My first project was helping transform a generic campaign creation process into one that is targeted to reach the specific goals of the advertiser. This project was the first-ever product update to increase Twitter revenue and for it, I was given the ✶ Twitter Core Value Award. ✶ 

A key goal of this design was to explain the types of campaigns and explaining what their campaign Tweets would look like without overwhelming the user. The campaign picker flow below accomplished that mission. 

 

Mobile Ads Companion

 

We learned from our persona work that many campaign managers monitor their campaigns nonstop throughout the day. It became a priority to create a mobile campaign manager that was accessible from within the Twitter client. 

Another designer did the initial design work at which point the project was handed off to me. I built out additional pages in the defined style, worked with developers to refine details, worked with the consumer team to create an Ads button for advertiser profiles, and brought the project over the finish line.

 
 

Data Visualization

Our original dashboard was not designed to operate at the massive scale needed by large companies. Below are some dashboard explorations to address some of their needs.

 
 

Animations

Adding animation was new to Twitter Ads. It was fun to see where we could take this. Here is an example of an animation I designed that was shipped to encourage participation in the new Twitter Publisher network. The animation and style of the invite request helped get users excited about participating.

 
twitter-invite-animation.gif