Design Engineering @Twitter

Role

Manager UX Engineering

Technology

React
Swift
Kotlin
UIKit

Platforms

iOS
Android
Web
Figma

The Challenge:

Decentralization Design

Design Engineering was a discipline spread across four internal UX and Engineering teams inside the Twitter Design organization.

Although some teams needed design engineering support year round, many only need support a couple of times a year. This lead to scaling and velocity issues when trying to grow out Design Engineering offers in the organization.

Design Engineering @Twitter

With the help of executive design leadership, we created a new dedicated Design Engineering team at Twitter centralizing the existing individual contributors. We then split that team into three dedicated workstreams with workstream leads.

UX Prototyping
High fidelity prototyping done with code for research, stakeholder buy in, and creative exploration.
Design Systems
Supporting component development, architecture, and styling enhancements to new and existing design systems.
Design Tooling
Custom applications, Figma plugins, and services to help accelerate and scale design workflows.

Workstream

UX Prototyping

Prototyping was used extensively at Twitter to archive three primary goals:

Insights

Where paired with research, prototypes can help us gain insights into questions we have about a new product or feature. We can find answers to our questions while potentially discovering questions we didn’t know we had.

Buy-in

Used to express a concept or strategy in a highly functional way in order to get buy-in and feedback from key stakeholders.

Inspiration

Prototypes can be a tentpole for a large project becoming a rallying point for the team.

Fidelity Levels in Prototyping

Our prototyping workstream offered two different levels of prototyping as a service to the design organization.

Coded Prototypes

Fully coded using native SDKs and languages for our supported applications.

Takes longer to build
Increase confidence in feasibility to build
Capable of leveraging real/dynamic data
Best used for both qualitative and quantitative research studies
Best used for both qualitative and quantitative research studies

“WYSIWYG” Prototypes

Interactive prototypes built using tooling like Figma, Principle, or Origami, or ProtoPie.

Faster to create than most coded solutions
Lacks native feel and functionality leading testers to feel unfamilar with the UX
Good for abstract research study but lack in detail

Project

Onboarding Redesign

The Challenge

Product design created two new onboarding flows based on the customers’ intent - a focused experience vs. getting to the Home Timeline faster.

The Plan

Working with the Prototype Workstream, I helped create two live prototypes that allowed research participants to choose at least 5 topics/interests and show Tweets based on their selections during the onboarding process.

prototype for onboarding redesign at Twitter.

Concept A

Onboarding from Home Timeline

Positives Learnings from UXR Testing Include:

Interest selection was colorful and appealing.
Selecting interests makes users feel they will have a better curated Twitter experience.
The perceived control of continuing the onboarding process or jumping straight to the timeline.

Concept B

Frontloaded NUX Questions

Positives Learnings from UXR Testing Include:

Makes users more optimistic about finding people with link minded interests.
Ample personalization throughout help them feel valued and like they will have a relevant experience.
Easy to navigate.

The Results