Trick, treat, and tremble

A collection of some of our darkest dreads

Some of us take Halloween very seriously. Others, not so much. But we all have one scary thing in common: phobias. So, in the spirit (no pun intended) of the season, we asked our colleagues about the things witch (pun definitely intended) frighten them — we created some aliases for answers so that no one gets spooked.

Guile– Senior Director of Product Design, San Francisco
What scares you most?
Baked beans

Why?
They looks like swollen ticks swimming in a pool of bloody mucus.

How do you deal with this fear?
I avoid them at all costs.

Slashly– Senior Product Designer, San Francisco
What scares you most?
The Husker’s becoming an irrelevant football team

Why?
Have you seen them play since the 90s? It isn’t pretty.

How do you deal with this fear?
Nacho cheese. Lots of it.

Slashly Too, The Sequel– Senior Product Designer, New York
What scares you most?
Lizards

Why?
Their scurry freaks me out.

How do you deal with this fear?
Run from them or roll into the fetal position and drool.

TracEEEEEEK!– Product Designer, San Francisco
What scares you most?
Automatic transmissions in sports cars

Why?
Because I like to stay loyal to the once revered status symbol for performance vehicles: the clutch.

How do you deal with this fear?
Proclaiming to be a “purist” by constantly ignoring the auto evolution.

Grievin’ Shocks– Content Strategy Manager, San Francisco
What scares you most?
Snakes. Oh, and the dull hum of people finding out I’m making this up as I go.

Why?
Snakes are terrible. And I never want to come in below expectations.

How do you deal with this fear?
Avoid at all costs, even including conversations about them, so this is making me sweat a little (this answer holds for both fears).

Xena– Product Design Manager, San Francisco
What scares you most?
Fun: slugs!!
Real: my own death.

Why?
I had a dream when I was about 4 where I fell, woke up, and everything around me was full of slugs and they were crawling on top of me. That was the worst nightmare I’ve ever had (my parents can vouch), and ever since, I hate them more than anything.

Own death is serious, I actually do get panic attacks, and since you can’t escape death, there really isn’t much I can do about it. I think everyone is afraid of dying, but somehow my brain just imagines it so realistically and it questions pretty much all of my existence.

How do you deal with this fear?
Slugs: Try not to look when they are around.
Death: Shiatsu is the only thing that helped a bit, but honestly, who isn’t afraid of dying? Really can’t do too much about it, but I hope there will be something that helps more at some point of my life so I don’t go insane when I get older.

Miss Demeana– User Researcher, San Francisco
What scares you most?
Communal tables where you’re encouraged to talk with the diners around you

Why?
I’m an introvert, so conversation with strangers is terrifying. I don’t like small talk and I have very strong opinions about it. I’d rather get to know the people I see every day, than chatty strangers. I don’t like to talk and eat, either.

How do you deal with this fear?
Go out to dinner with extroverts, make up a character for myself, avoid eye contact, pretend to be very involved in something else, drink.

Charred Warlock– Director of Product Design, San Francisco
What scares you most?
Political leaders or anyone acting out of fear

Why?
Fear corrodes effective decision making.

How do you deal with this fear?
I try hard not to act while I’m upset.

Special thanks to Javier Saldena for the jack-o’-lantern art.

Trick, treat, tremble was originally published in Twitter Design & Research on Medium, where people are continuing the conversation by highlighting and responding to this story.

Creating a culture that supports personal development has always been important for our Design & Research studio. We love designing new products for Twitter’s customers, but learning new skills and overcoming challenges together is easily the most fulfilling part of our work.

Over the past few years, we’ve invested a lot of time and energy into developing programs to support and encourage growth for everyone on our team. Here are a few examples:

• Introduced a mentorship program that pairs people across our team so they can learn from the experience of others, and how to coach others
• Designed and developed many of Twitter’s internal tools for giving feedback
• Created courses for building prototyping skills
• Launched a leadership training program that’s available to everyone, regardless of whether they are seasoned managers or just getting started in their career

All of these helped us steadily improve the core skills that are important to our success. This year, we wanted to create a way to learn about topics beyond the core skills we’re normally focused on. To do that, we decided to create an internal speaker series, regularly bringing outside perspectives into our studio.

This takes work

Inviting one or two speakers to stop by your office can seem pretty straightforward and easy. You might start by asking people you know in the industry to visit — that’s exactly what we used to do! Occasionally in the past, we’ve had friends of our team stop by for a visit, sometimes for a presentation and, sometimes, just for a casual chat — visits from John Maeda, Jan Chipchase, Jessica Hische, Kat Holmes, Dann Petty, and Mills and the UsTwo Games crew. All of these visits were very loosely planned and infrequent. They were fun and sparked new ways to think about our work, but we didn’t have a strategy for what we hoped speakers would talk about or who we should invite to come visit us. We felt that we weren’t reaching outside of our immediate network. Getting people scheduled regularly was difficult, and it was hard to keep the momentum going.

Getting started

Our 2018 goal was to have one speaker every month. Before inviting speakers, we wanted to have a clear sense of which topics to focus on, and we wanted that to come from our team. We worked with managers across the team to map out career and craft related topics that our team would benefit from, and ran surveys across our team to understand what kinds topics would be interesting and inspiring for them. After a few rounds of informal research, we saw a handful of themes emerge that our team wanted to learn more about:

Leadership and communication

• Management and leadership
• Negotiation
• Effective communication with executives

Creative methods

• Customer journeys and telling stories
• Inspiring creative processes
• Animation and motion

With these themes in hand, we got to work on identifying people we felt could bring unique perspectives to these topics. We went back to our team to learn about people they admired, learned from, or had seen speaking about these topics on Twitter or at conferences. Our goal was to discover people that weren’t necessarily already well known or established in the local design and research community.

When we reached out to speakers, we told them about the themes we were focused on, and why we wanted to hear from them. Maria Guidice, former VP of Design at Autodesk, shared what she has learned as a manager, leader, and design executive during her incredible career in the valley. Steven Sinofsky shared different approaches to leading international product development while at Microsoft. Irene Au told us about how she and her team built the design organization at Google during a time when Google was known to be a difficult place for designers to work.

Sharing with the community

After the first few speakers visited us, we thought that these presentations and conversations might interest others, and may be even more valuable as an influence outside our team. So, shortly after starting our speaker program, we started to invite our colleagues in Product Management and Engineering to join, and then we opened the invitation to anyone at the company that was interested. On two occasions, speakers that we brought in were later invited back to give their talks to some of our partner teams. Our designers and researchers work hard everyday to promote a customer focus at Twitter, but sometimes it’s helpful for colleagues to hear an outside perspective, too.

Twitter Design on Twitter

Live from @TwitterSF, it's Chat with @jakek on the fundamentals of the design sprint. https://t.co/y6LfCWJW04

After opening these up to all of Twitter, Inc., we decided to open them up to everyone on Twitter as well. For speakers that were interested, we gave them a way to share their presentations by live-streaming on Periscope from our @Design account. The response to the broadcasts has been really positive, and we’re looking at ways we can improve them. Because speakers’ schedules are sometimes difficult to accommodate, we don’t have a regularly recurring schedule for the talks. Another issue is that we don’t yet have an easy way for people watching the stream to participate with questions. We see so much interest in continuous learning in our industry, and as a company that has the ability to organize learning opportunities like these, we want to be able to share that with the broader design, research, and tech community. So, we’re still working on that.

What we’ve learned

We’re nine months into the year and have had some extraordinary people visit our studio to share their stories, work, and insights. We’ve met people with long and impressive careers, and speakers that are still establishing themselves. We’ve met people that are already well known in their industry, and some who lead a more private life. As we hoped, every speaker brings a unique perspective to the themes that we wanted to learn more about this year.

If you’re considering building a speaker series for your studio, here’s a handful of things we’ve learned so far:

• Many people in the design, research, tech, and creative communities are very generous and open with their time. When we started to reach out to people, we often weren’t sure if we would hear back. We usually did. We’re very lucky to work in an industry where people are eager to connect with others and share their work. Ask them!
• We realized that for many people, speaking is part of their work and they will want to be paid. We respect that, so we were always transparent up front that we did not have a budget for speaker fees.
• Design and research talks are interesting to more people than just designers and researchers! Invite your colleagues in engineering, data science, sales, marketing, product management, etc. — it’s a great way to share design and research across your company.
• The design, research, creative, and tech communities are big. There are many interesting voices that you can reach out to that are outside the standard conference speaker circuit.
• Themes are way to help bring focus when looking for speakers to invite, but don’t expect your speakers to stick to those themes tightly. They’re just a starting point.
• Scheduling is hard, and you should be prepared to be very responsive to the many back-and-forths it can take to settle on a time and date. Respect people’s time. It can also take a while to find a date that works for your guests, so be prepared for long lead times.
• Your team is busy. Even though we always hear really positive feedback when we host speakers, it can be a challenge getting people to take a break from their work. You’ll need to put a lot of time and effort in to marketing the talks internally. We remind people regularly leading up to the day of with team announcements, emails, Slack messages, calendar reminders, and posters (lots and lots of posters).

We’re working on our next series of speakers now, and thinking about how we can improve the program for the year ahead — let us know if you have suggestions. And, if you’ve organized a speaker series for your studio, we would love to hear what worked well for you. For those of you thinking about getting one started in your studio, let me know if you have any questions; you can find me on Twitter: @mkruz.

Let’s have a Chat was originally published in Twitter Design & Research on Medium, where people are continuing the conversation by highlighting and responding to this story.

Going beyond A/B testing to see our email designs at work

People are a critical part of our development process, with their input guiding all stages of our product development. Several Twitter features are the result of people creatively hacking the platform for a specific function, e.g. Tweet threads, hashtags, @usernames. Along with observing behavior on Twitter, we use qualitative research, on-platform surveys, and experimentation to better understand how people use Twitter, and how we can better meet their needs.

Typically, several of these research techniques are used to iteratively learn what product solution we need to build and validate if what we’re building is on the right track. However, constraints sometimes prevent us from sticking to our ideal development process. And although these constraints can be seen purely as restrictions that dictate how work will get done, we find they encourage innovative thinking. When time, budget, or other resources are not on our side, we think creatively about how we can work around them to build high-quality, people-centered solutions.

Within Research, we have a few different methods to consider when we need to get insights that were required yesterday. Rather than turn away teams eager for feedback, we have a conversation about the pros and cons of different research approaches, eventually finding a path forward that is inclusive of customer feedback.

We’re sharing a recent example of how we addressed one of these situations, in the hopes that you’ll be encouraged to think creatively about how to include people in your product development process.

Our team was interested in learning why people engage with our emails, specifically the Highlights email, a selection of Tweets from their network. Though metrics told us a lot about email opens and clicks, it didn’t tell us why people opened it or why they clicked into Tweets and accounts in the emails.

• Did the subject line catch their eye?
• Were the people mentioned important to them?
• Why did they click if we already show them Tweets in the email directly?
• Do they just open all Twitter emails out of habit?

We needed user research to complement our experiment findings, give us insight into people’s motivations, and help develop new hypotheses we could continue to test through experiments. However, the team was also trying to move fast — at the time, we were beginning 2018 planning and wanted to understand and prioritize the areas we should be addressing to improve the email experience.

Given the time constraints we were dealing with, we discussed the possibility of conducting guerrilla research, specifically a variation of intercept interviews — basically walking up to people, showing them our prototype, and asking for their feedback — to get directional insights. We wanted to catch them quickly, out in the world, and let them share their thoughts, based on a few questions, in less than 10 minutes. Unlike some other qualitative research techniques, this method saved us time by skipping screener emails and spending a short amount of time with participants.

There were also limitations that we considered when we were deciding if this rapid research was the right approach:

• We wouldn’t get an understanding of the participants’ backgrounds.
• We weren’t going to be able to build a meaningful rapport.
• We wouldn’t have time to follow up on their responses.

Since we planned to validate our findings at scale through experimentation, we decided to focus on speed and lightweight investigation, and thought guerrilla research would be the best tool to get quick feedback and answers to our key questions.

We put together a plan for our team of designers, product managers, and engineers to collect feedback on the Highlights email. We drafted an interview guide based on our goals, and walked the team through some tips for reaching out to people: have a compelling opening line, be respectful of people’s time when you interview them, and let participants know their feedback will contribute to the Twitter email experience.

We decided the Ferry Building in San Francisco would be the perfect place to conduct our research.

• Bustling place filled with locals and tourists? ✅
• People from different backgrounds and ages? ✅
• Delicious post-research lunch options to bribe your team with? ✅

We set off for the Ferry Building with interview guides, notebooks, mobile prototypes, and gift cards for people as compensation. We split into six pairs, an interviewer and note-taker, to approach folks willing to answer a few questions about our Twitter email prototype. In order for people to understand we worked for Twitter, we also wore some Twitter t-shirts.

We wanted to get a range of perspectives, so we spoke with a diverse group of participants, including two young sisters vacationing from Australia, a gentleman who wasn’t fond of small fonts, and woman who was killing time until she could catch a bus to Santa Rosa.

Watching people interact with your product is its own reward, but our team also appreciated the lunch break halfway through the day so we could debrief and re-strategize for the rest of the day. Between mouthfuls of burgers, we shared what we’d learned about our participants in such a short time. We learned about the importance of relevant subject lines and of personalized content within the email, and noticed the different ways people would interact with the email.

The day after our research outing, the team gathered to compile what we learned while it was still fresh in our minds. Each team member wrote an observation on a sticky note, and then presented what they learned to the group. We noticed patterns in how people consumed the email content and grouped the notes into categories. This led to an experiment plan where we could see if our findings scaled to a larger set of Highlights email recipients.

Here are some of our team’s takeaways from the field:

• Guerrilla research helped us validate or disprove our initial hypotheses quickly while also learning new ideas to test. For example, within the Highlights email, we hypothesized that people tap on the first few Tweets in the email because they’re seen first, and then decide if they should continue reading the entire email. However, we noticed participants curiously scrolled to read the entire email first before deciding which Tweet to tap on.
• The qualitative feedback from this study combined with our previous quantitative learnings identified high-level opportunities for us. This helped determine the roadmap for the upcoming quarters. One theme that emerged was finding an easier, faster way for people to login. We made logins from email a top priority that quarter and let people login through SMS to help transition them from their inbox to Twitter more seamlessly.
• Getting all team members involved helped develop greater empathy for the people using Twitter. And the team is even more invested in the decisions going forward. It’s surprising and rewarding how often our team recalls data from this research to help support any hypotheses we want to test.

The experience with the Email team highlights one of the ways we’ve adapted to the circumstances to bring customers in to inform our product development. In other scenarios, we rely on different research approaches, depending on the research questions, timeline, scope, and needs of the product and team, to ensure we have a thorough understanding of customer needs and whether or not we’re addressing them.

In the future, you’ll hear from us on how we’re making an impact through research, specifically our shift towards a more customer-centric culture, adopting the “Jobs-to-be-Done” framework, rapid prototyping and usability testing, and ethnographic field research around the world. Until then, we hope sharing some of what we learned will help you and your team overcome constraints to build better products for your customers.

Special thanks co-author of this post, Daniel Machado.

Guerrilla research was originally published in Twitter Design & Research on Medium, where people are continuing the conversation by highlighting and responding to this story.

A quick glimpse of how we Tweeted it at work

Kick off of the World Cup is always a special moment for me. Every four years, I get absolutely obsessed with the Cup — so much so, that I’ve traveled to at least one match of every tournament since 1994. Except for this year. Perhaps you heard that my much-adored #Azzurri didn’t qualify this year?

Futbol’s greatest spectacle was going to happen without me! A new plan was needed. Many, many thoughts came and went, including ideas at both ends of the spectrum, from pretending it wasn’t happening at all to figuring out a way to watch every minute of every match. Lionel and Toni and Busquets — oh, my — that’s it! I needed to help turn every Twitter office into its own fan fest. Every host country has them, and with so much of the #WorldCup conversation happening on Twitter, I figured so should we. So, we set to work letting all my colleagues know that no matter who they supported, fanatics were welcome at work.

To be honest, though, our #Studio, Employee Communications & Culture, and Real Estate & Workplace teams were the real stars of the tournament, working hand-in-hand with our staff assistants, catering partners, and global employee ambassadors to create our own fan fests in offices near and far.

One of the best parts of encouraging everyone to take part was recognizing people’s passion and personality while discovering team affiliations of coworkers you’ve spent years next to who suddenly showed up to work wearing a rival’s strip.

Goals, saves, fouls; each were met with cheers or moans, depending on which side you were supporting.

Everyone got a little World Cup fever.

Tweets were sent.

Hopes were dashed.

Anna Sugimoto / 피자 on Twitter

うちの会社素敵すぎない？？かわいい〜〜☺️☺️☺️⚽️ #WorldCup⁠ is Happening @Twitterjp🇯🇵 #LoveTwitter

Entire teams made the World Cup part of their daily ritual.

Recognizing our passion is one of the many reasons to #LoveWhereYouWork (and #LoveWhereYouWorldCup!).

Curing World Cup Fever was originally published in Twitter Design & Research on Medium, where people are continuing the conversation by highlighting and responding to this story.

Horizon Design System, Part 2

Design systems empower designers to focus on the many unique problems that they’re solving while providing a consistent experience. Given the array of products that are being worked on at Twitter, we have two design systems: Horizon, that provides a cohesive experience for Twitter consumer products across multiple platforms, and Feather, which encompasses a much larger set of components designed to provide a consistent web experience for all of our professional tools, including internal tools, revenue, and developer applications.

But for any design system to succeed, it needs to be evangelized and effectively embraced by the various members of the team. Designers serve a unique role in being able to communicate the use of the system throughout their work. However, designers need to be aware and have access to the most up-to-date components. Documentation is a must, but providing designers with ready-to-use art files makes the design system readily accessible and easy to put into action.

Defining the solution

When I first joined the design team at Twitter, we had an SVN system in place for getting designers up-to-date Sketch assets for our Feather design system. Unfortunately, that solution only worked when designers remembered to pull the latest resources and, let’s be honest, not all of us were consistent, so we ended up using previous versions of components instead of taking advantage of the most recent updates. As we started to grow our design systems with Horizon, we needed a better way. Since I’m notorious for experimenting with new design tools and making tweaks to improve them, it’s no wonder that I gravitated toward the challenge.

A small team of us met to identify the criteria for a successful solution and came up with the following:

• We needed to limit the number of people who could make changes to the design system Sketch files.
• Design assets needed to be updated in the background so the process didn’t require extra effort or an opportunity to forget to fetch the latest assets.
• The assets should live in a place that would be easily accessible in the design workflow.
• There had to be a low barrier to entry for setup so the current team and future members could onboard efficiently.

We were already using Google Drive for storing and sharing files amongst the team so we could leverage that service to do a lot of the heavy lifting and then all we had to do was to make the assets easily accessible. In the past, I’ve used symbolic links to sync personal settings for various applications across different machines, so I implemented the same solution for sharing design assets to the team.

How it works

We created a .Design directory that stores the design assets for both Feather and Horizon. On a Mac, the . prefix hides the directory by default in Finder to avoid any confusion. This directory is stored in Google Drive and only those working on the component systems have access to write to the directory — anyone else with the URL has access to read the files.

Google Drive handles the task of making sure that our designers have the most up-to-date Sketch files on their computer, but we needed a way to make those files easily accessible. So, we created an executable installer using Bash that handles the difficult parts of the setup.

You just need to follow a handful of steps:

1. Install Google Drive File Stream or Google Backup & Sync and make sure the application is running.
2. Visit the URL to the .Design directory and select Add to Drive.
3. Give the application a few minutes to sync.
4. Download and double-click the installer.

Creating the installer

This was my first time creating an executable Bash script for others to use, so there was a fair amount of trial and error. I’ll break down the decision making that went into the creation of our script and I’ll also provide a general template for creating your own.

The basic premise of the script is that it breaks down tasks into functions that are then executed based on your setup. As I walk through these functions, you may notice that I am using $VARIABLES to store reusable data. These variables are defined later on in the process.

Establish directories

The establishDirectories function looks into Sketch’s Application Support to see if the directories for Templates and Plugins exist. If you’ve already added plugins or templates, then this function won’t perform any actions, otherwise it will create a place to store the assets. This is achieved through the commands below.

establishDirectories () {
# Create templates directory if it does not exist
mkdir -p "$SKETCH_TEMPLATES"

# Create plugins directory if it does not exist
mkdir -p "$SKETCH_PLUGINS"
}

Clean previous

The next task that the script needs to accomplish is to clean any previous installations. This way, you can use the script to update the install if you ever have any problems. The clean function below moves the symbolic links from previous installs in your trash. This helps to avoid any conflicts.

clean () {
# Use mv to test and then switch to rm -rf when directories are correct

if [ -e "$FEATHER_DESTINATION" ]
then
# mv "$FEATHER_DESTINATION" "$TRASH"
rm -rf "$FEATHER_DESTINATION"
fi

if [ -e "$HORIZON_DESTINATION" ]
then
# mv "$HORIZON_DESTINATION" "$TRASH"
rm -rf "$HORIZON_DESTINATION"
fi
}

Install assets

Most importantly, the script needs to be able to install the assets. Thus, the install function symbolically links the directories for both design systems from Google Drive to the Templates directory in Sketch.

install () {
# Symlink Feather templates
ln -s "$FEATHER_SOURCE" "$FEATHER_DESTINATION"

# Symlink Horizon templates
ln -s "$HORIZON_SOURCE" "$HORIZON_DESTINATION"
}

This function is also used to copy plugins, fonts, and a color palette file from the .Design directory in Google Drive directory to your computer.

install () {
# Symlink Feather templates
ln -s "$FEATHER_SOURCE" "$FEATHER_DESTINATION"

# Symlink Horizon templates
ln -s "$HORIZON_SOURCE" "$HORIZON_DESTINATION"

# Copy Paddy plugin
/bin/cp -rf "$PLUGIN_SOURCE/Paddy.sketchplugin" "$SKETCH_PLUGINS"
  
# Copy Sketch Palettes plugin
/bin/cp -rf  "$PLUGIN_SOURCE/Sketch Palettes.sketchplugin" "$SKETCH_PLUGINS"

# Copy SendToSlack plugin
/bin/cp -rf "$PLUGIN_SOURCE/SendToSlack.sketchplugin" "$SKETCH_PLUGINS"

# Copy color palette to desktop
/bin/cp -rf "$COLOR_PALETTE_SOURCE" "$DESKTOP"

# Copy icon fonts
/bin/cp -rf "$EDGE_ICONS_SOURCE"/*.ttf "$FONTS_DESTINATION"
}

Establish directories, clean existing installs, and install assets

Now that the core functions are created, the install script needs to run them in sequence. The cleanInstall function is responsible for this task. It begins by setting more defined variables. Eventually, the script has a final function that sets the $1 variable to the path on your computer, but these variables set the paths for the sources and destinations of what is being installed.

There is also some messaging set in a variable for providing feedback to the to anyone installing the assets. Many of our computers are have a terminal-notifier installed so I’m taking advantage of the ability to provide a macOS notification, but the same message is repeated in the terminal for instances when terminal-notifier is not installed. Setting these messages as variables allow them to be reused.

Once the variables are set, the previous functions are executed, Font Book is opened to recognize the newly installed fonts and a success message is triggered.

cleanInstall () {
# Set Source Variables
DESIGN_PATH=$1
FEATHER_SOURCE=$DESIGN_PATH/Feather
HORIZON_SOURCE=$DESIGN_PATH/Horizon
PLUGIN_SOURCE=$DESIGN_PATH/Plugins
ICON_SOURCE=$DESIGN_PATH/Tools/"Install Script"/Icon.png
COLOR_PALETTE_SOURCE=$DESIGN_PATH/Colors/twittercolors.sketchpalette
EDGE_ICONS_SOURCE=$DESIGN_PATH/Fonts/"Edge Icons"

# Set Destination Variables
SKETCH_TEMPLATES=$HOME/Library/"Application Support"/com.bohemiancoding.sketch3/Templates

SKETCH_PLUGINS=$HOME/Library/"Application Support"/com.bohemiancoding.sketch3/Plugins

FEATHER_DESTINATION=$SKETCH_TEMPLATES/Feather
HORIZON_DESTINATION=$SKETCH_TEMPLATES/Horizon

FONTS_DESTINATION=$HOME/Library/Fonts

DESKTOP=$HOME/Desktop
TRASH=$HOME/.Trash

# Set messaging
SUCCESS_TITLE="🤘 You did it!"
SUCCESS_MESSAGE="Twitter design assets have been successfully installed."

# Make sure directories exist
establishDirectories

# Clean previous installations
clean

# Install the assets
install

# Open Font Book to recognize new fonts
open -a "Font Book"

# Success Message
terminal-notifier -title "$SUCCESS_TITLE" -message "$SUCCESS_MESSAGE" -appIcon "$ICON_SOURCE"
echo "$SUCCESS_TITLE"
echo "$SUCCESS_MESSAGE"
exit
}

Checking for previous requirements

Since we’re using Google Drive to supply every designer with the newest versions of files, we need to ensure they’ve installed one of the Google Drive syncing products and added the .Design directory to their drive. Then the script runs a final checkCleanInstall function that verifies these criteria are met before proceeding with the install.

To further complicate things, both Google Drive File Stream and Google Backup & Sync store files in different locations. The function accepts either app install, but gives preference to the Google Drive File Stream product since that is the most recent release.

Basically, the function first checks to see if you’re using Google Drive File Stream and has the .Design directory added. If that’s true, then it will execute the cleanInstall function while passing in the correct asset location to the $1 variable. If it fails, it checks to see if you have Google Backup & Sync installed with the .Design directory added and then goes through the same process. If neither of those criteria are met, it checks to see if either syncing service is installed and gives a message to add the .Design directory to your drive. Finally, if none of the criteria are met, it gives instructions to start the process from the beginning. Once again, this messaging is set in variables to take advantage of macOS notifications as well as echoing text in the terminal.

This script can be used with other syncing services like Dropbox and the major change would be the directory that you’re setting. Additionally, we support people using either one of Google Drive’s syncing products. Having a single solution allows us to remove the second if statement from the function. Here’s the final function.

checkCleanInstall () {
# Set variables
GOOGLE_DRIVE_FILE_STREAM_LOCATION="/Volumes/GoogleDrive/My Drive"
GOOGLE_DRIVE_LOCATION=$HOME/"Google Drive"

DIRECTORY_FAIL_TITLE="🤔 Hmm…It appears that you haven’t added the assets to your drive."
DIRECTORY_FAIL_MESSAGE="Make sure to add the .Design directory to your drive."
DIRECTORY_FAIL_URL="https://drive.google.com/open?id=0B9fABTNKWq4TRTFGZkhYcTFkMlk"

SYNC_FAIL_TITLE="🤔 Hmm…It appears that you haven’t installed Google Drive File Stream."
SYNC_FAIL_MESSAGE="Install Google Drive File Stream and add the .Design directory to your drive."
SYNC_FAIL_URL="https://dl.google.com/drive-file-stream/googledrivefilestream.dmg"

# Check to see if .Design directory exists in Google Drive File Stream
if [ -e "$GOOGLE_DRIVE_FILE_STREAM_LOCATION" ] && [ -e "$GOOGLE_DRIVE_FILE_STREAM_LOCATION/.Design" ];

then
# .Design directory exists in Google Drive File Stream, proceed with install
cleanInstall "$GOOGLE_DRIVE_FILE_STREAM_LOCATION/.Design"

# Check to see if .Design directory exists in Google Backup & Sync
elif [ -e "$GOOGLE_DRIVE_LOCATION" ] && [ -e "$GOOGLE_DRIVE_LOCATION/.Design" ];

then
# .Design directory exists in Google Backup & Sync, proceed with install
cleanInstall "$GOOGLE_DRIVE_LOCATION/.Design";

elif [ -e "$GOOGLE_DRIVE_FILE_STREAM_LOCATION" ] || [ -e "$GOOGLE_DRIVE_LOCATION" ];

then
terminal-notifier -title "$DIRECTORY_FAIL_TITLE" -message "$DIRECTORY_FAIL_MESSAGE" -appIcon "$ICON_SOURCE" -timeout "30" -open "$DIRECTORY_FAIL_URL"
echo "$DIRECTORY_FAIL_TITLE"
echo "$DIRECTORY_FAIL_MESSAGE"
echo "$DIRECTORY_FAIL_URL"

else
terminal-notifier -title "$SYNC_FAIL_TITLE" -message "$SYNC_FAIL_MESSAGE" -appIcon "$ICON_SOURCE" -timeout "30" -open "https://dl.google.com/drive-file-stream/googledrivefilestream.dmg"
echo "$SYNC_FAIL_TITLE"
echo "$SYNC_FAIL_MESSAGE"
echo "Google Drive File Stream: $SYNC_FAIL_URL"
echo ".Design Directory: $DIRECTORY_FAIL_URL"

fi
}

To make the install script easy to run, all of these functions are included in a single file with a command to execute checkCleanInstall at the end. While building the script, I save the file as Install Design Assets.bash for proper syntax highlighting. Once tested and completed, I save the file as Install Design Assets.command with the extension hidden. The final file looks like the example below.

The next step is to make the command executable. This just requires typing chmod +x followed by the path to the file in the terminal. Pressing return will make the file executable.

Finally, an icon is added to the executable file to make it easy for people to discover. The file is then compressed and shared along with the instructions to the team.

Bare-bones template

To get you started, I’ve removed a lot of the items that are unique to our team at Twitter and provided a bare-bones template.

So how did we do?

For the past year and a half, this solution has worked really well for our team. It helped designers to quickly adopt our evolving design systems in their daily work and made onboarding new designers so much easier. The benefit to scripting the solution has made it quick to make minor changes in the rare case that something goes awry. Once the script has been updated, you just need to run it again to get everything back to working order.

But this solution isn’t perfect. Instead of single action, you’re still required to complete a few steps to get everything set up, so there’s always an opportunity to miss a step. And there are instances when Google Drive or Sketch may change file locations or a Sketch update changes how directories work in their templates folder.

We’re always looking for ways to keep improving how we use our design systems at Twitter. If you’ve come across anything that works well for your team or have any questions, please leave a comment or reach out to me on Twitter @LaCroixDesign.

All in Sync: How our designers keep up with the latest design system assets was originally published in Twitter Design & Research on Medium, where people are continuing the conversation by highlighting and responding to this story.

Until a few weeks ago, if you wanted to share a live video, you could only Tweet the entire clip. Whether it was SpaceX launching a rocket, or your favorite soccer team scoring a goal, it was easy for these moments to get lost in a lengthy stream. It was difficult to discuss what mattered most.

With Timestamps, you can share broadcasts at specific times and show people what you want them to see. Now you can watch the most important moments of video on Twitter.

This project was a joint effort between Design and Engineering, in partnership with different teams at Twitter. The best part was meeting people passionate about the same product. I met employees who designed the Home Timeline, some who optimized the Tweet composer, and others who made broadcast cards into components for our design systems.

The hardest part was taking input from all stakeholders and making them feel heard. I knew it wasn’t possible to weigh all opinions equally. I learned to defend my perspective after synthesizing other points of view. I had to facilitate conversation among teams, present ideas thoughtfully, and be patient in the process.

User Stories Driving the Process

To make sure we were building the best tool, we first had to understand why someone would share one moment instead of the complete stream. There were a variety use cases, from highlights of a news story to my niece’s first steps, cute dog tricks to phenomenal sports moments.

Combining the why with the who helped simplify. The users of Timestamps naturally divided into two distinct groups: broadcasters who put the time and effort into creating video streams, and viewers who discover, watch, and discuss the videos on Twitter.

🤳 As a broadcaster, I want to:

• Invite more people to my live broadcast.
• Drive organic sharing of the best parts of my broadcast.
• Create video highlights without staffing editors.

👁 As a viewer, I want to:

• Tweet a specific moment in the video with my followers.
• Share quickly and easily without missing the ongoing broadcast.
• Ask friends watch live with me, after witnessing the moment I shared.

Picking the Right Moment To Share

The biggest design challenge was picking the right moment to share in live videos. You could only watch livestreams synchronously. There was no scrubbing affordance, and no way of going back in time.

Our initial UI took inspiration from the slider on videos you watch on-demand. After all, once you started scrubbing, you transitioned into the pre-recorded video world. This slider reinforced our concern about time selection, as it was difficult to navigate precisely in long streams.

We considered two solutions: a shorter scrubbing window to select from or a more complex scrubber that you could fine-tune. Our product lead rightfully pushed us toward building a consistent product experience throughout live, replay, and video on-demand. So, we brought the existing slider into the Timestamp selection flow.

With the two-minute window, viewers can find the right moment to share. 👁 ✔ Meanwhile, best parts of videos get shared. 🤳✔
Broadcasters crowdsource video highlights. 🤳✔

Bridging Live and Replay, from Backend to UX

Before Timestamps, our live and replay video viewing experiences were completely separated. The back-end video stack operated on two frameworks: livestreams and replays. The UX served this purpose as well. You could comment and interact with the broadcaster only in livestreams. The UI amplified this separation. Live videos got hero-cell treatment, autoplayed, and had eye-catching, red badges signaling the immediacy.

This project created an in-between state: Timestamps shared from an ongoing stream — that is, replays of a livestream. This edge case in code was a major use case for the feature: Does a person want to know if a stream is live? If they know the stream is live, do they want to skip to live or keep watching from where they started?

We knew our broadcasters wanted their audience to watch them in real-time. So we decided to tell viewers when a stream is live with a red badge. This urged them to skip forward.

This also fulfilled the broadcasters’ need to attract viewers to the livestream.🤳✔

In the exploration, we went one step further and decided for viewers. Through prototyping, we explored skipping to the livestream after a countdown. However, user testing taught us that the interference distracted viewers. People frequently wanted to stay in the flow of watching the replay. We ended up letting the viewers decide if they wanted to keep watching or skip to live.

Seamless Watching and Sharing

The next challenge was incorporating the timestamp selection into the viewer experience seamlessly. We then took a holistic look at scrubbing.

It was invaluable to work closely with the Engineering team to get their input on design. In fact, as a holiday gift, our iOS engineer prototyped the slider to the left!

The benefit of this view was that you kept watching while scrubbing. However, the fullscreen takeover left no real estate on the screen to provide further action. Sharing took four steps: tap to scrub, scrub, tap to share, and choose a share option.

We then separated the flow for sharing from scrubbing. Instead of convincing people to share when they want to navigate elsewhere in the stream, we streamlined Timestamps into the sharing flow. Sharing now takes two steps: tap to share and choose a share option. While you choose the moment to share, audio of the ongoing stream keeps you grounded to the context.

Last but not least, sharing a live broadcast has been a way to tell people to come watch with you. So, we treated watching live with friends as an equal counterpart to witnessing the moment I shared. We ended up with a radio button to choose share live versus share with a Timestamp.

Watching live with friends remains an option.👁 ✔
The two-step share flow does not let viewers miss the broadcast. 👁 ✔

Ta-da 🎉

Here is Timestamps in action. You tap on share and slide back to the exact time you want to point your audience to. Then compose your Tweet about that moment in time. Stamp your video at the moment that matters the most. Share and consume video in a ‘Twitter-y” way. Meaningful at a glance. Starts or contributes to a conversation. Helps you discuss, inform and stay informed.

Lots of people worked on this project, but here is shoutout to: Mike, Christian, Lucas, Noah, Chen-Rui, Jonah, Annie, and Clem, who poured their hearts and souls in this. Also, to Ben and Tyler for their emotional support, and Veronika for her faith in me. To Jeremy for creating our icon. And all of Twitter Design for building this collaborative design family.

Designing Timestamps for Live Video was originally published in Twitter Design & Research on Medium, where people are continuing the conversation by highlighting and responding to this story.

Hello and welcome to Twitter UK!

My name is Eleanor Harding and I’ll be your host. I’m a Senior Product Designer here at Twitter in London. I use my time and design skills to help professionals keep up with what’s happening in the world as it’s unfolding, through TweetDeck.

Let me walk you through a typical Friday at the office.

Every Friday morning starts the same — with a steaming chai latte and a bacon naan roll from our favourite spot in London, Dishoom. It’s a team tradition to spend some time together around the corner from Twitter before we start the day.

After that, we head over to the office. Reception is a welcome sight of color with clouds of bright balloons. We don’t always have balloons, but it’s not at all unusual to walk into the office and discover something wonderful. We’re in the heart of Soho in a gorgeous space filled with teams of designers, engineers, product managers, data scientists, curators, partner managers, account managers, and many more.

The first meeting of the day is a standup huddle around the high table to check in on progress and talk about what we’re planning to do next.

After standup, we dive into focused work. Usually I design mockups for user experiences that help people be part of what’s happening, or do sessions around a whiteboard to work through sticky design problems.

We have lunch in the Commons, catered by the phenomenal team at @JustEatMyTweet. They Tweet out the menu, so there’s almost always someone in the elevator checking Twitter to see what delicious things lie in store for that day. You’ll also find us having breakfast here every other day of the week, often debating if waffles go well with bacon (for the record, they do).

After lunch, we pair up to collaborate on a project or plug in individually for some focused effort at a desk, in the studio, in the library, at a booth, or in a soundproof pod. You can decide on the right kind of space you need to do your best work. Some say there are secret hidden spaces in the office too…

One of my favourite afternoon treats is heading downstairs for a change of scenery and the chance to work on mastering the art of making a perfect cup of coffee. There’s even a machine that prints whatever design you like onto your latte. With coffee in hand and a clear head in a different space, ideas flow freely and solutions come to the surface.

If you prefer a game of Fifa to a cuppa, the games corner is the place to regroup your thoughts when you’re stuck. Problem-solving magic happens when you take a brief step back.

In the afternoon we plunge back into work and get together to make progress on impactful projects. Late afternoon meetings and a few extra emails mean our colleagues in San Francisco have come online to collaborate. As the afternoon winds down, we gather to share demos of the work we’ve done during the week.

Well-deserved weekends start on a Friday evening after Tea Time (our weekly all-hands meeting). With people in the London office from all over the world, it’s a common sight to see suitcases in the office on a Friday, with their owners ready to head off to the airport or train station to explore somewhere exciting or visit family back home.

Twitter is what’s happening and the office is where it’s happening. Twitter is our creative home.

If you like the way we work, there’s an open spot on the sofa waiting for you.

#LoveWhereYouWork

Twitter Tours: A Day In The Life Of A London Designer was originally published in Twitter Design & Research on Medium, where people are continuing the conversation by highlighting and responding to this story.

In researching the best design books out there, I found myself unsatisfied with the lists 20+ deep of design books. I wanted a personal perspective on how influential this book was to the author rather than a straight rehashing of the back of the book (if that was even provided).

I talked to the Twitter Design team about the books that helped shape their design careers. Not only did I want to know what influential books were out there, but I was really curious to know, why this book? How did this one book help you get here? I hope this list of our favorites will help inspire or shape other designers’ careers.

Josh Wilburne
Never Sleep: Graduating to Graphic Design by Andre Andreev and Dan Covert

This book focuses a lot on the process from being in design school to being a professional designer, with lots of the hiccups along the way.

I read a lot of books about being a professional designer when I was in college, but none of them really prepared me for the middle bit of transitioning from design student to full grown designer. This was hugely relatable, and the only book I’ve seen be so transparent about feeling lost and what it’s like to be a designer in modern times. I read this book quite a few times over during the start of my career, and have recommended it many times to young designers.

Stephen Fox
Zoom by Istvan Banyai

Wordless illustrations on context and perspective, reaffirming my content strategy definition: Big-picture thinking about every little detail.

It is a constant reminder that content in context is the key to compelling communication.

Josh Williams
Neuromancer by William Gibson

It’s just a sci-fi adventure, but at the core is a prescient vision for how people interact with technology.

What I found most inspiring about Gibson’s vision of technology and cyberspace (a word he coined in the novel) was how data and programs became tangible so that people could interact with as naturally and as easily as everyday objects IRL.

Giles Peyton-Nicoll
The Best Interface Is No Interface by Golden Krishna

This book challenges the relentless creative investment of “addition” to digital interfaces, through feature bloat and our love of building apps “for that”.

As designers many of us are obsessed with creation over removal, and yet, one of the key principles of design is to simplify. I always look for opportunities to remove two things and replace it with one better thing. I now actively look for opportunities to encourage technological product developments that result in the removal of all interface. This I now see as a great design result.

Eleanor Harding
The Astronaut’s Guide to Life on Earth by Chris Hadfield

Every single decision can take you a step closer to where you want to be. Life lessons from space, wonderfully relevant for life on earth.

This book helped me find my north star and learn to use it as a tool to make big career decisions in pursuit of doing more of the things I love, more of what makes me happy.

Tina Koyama
Designing Design by Kenya Hara

Although written by Kenya Hara, it’s a tribute to the people he looks up to. It’s highly philosophical, but also easy to understand. The designs are breathtaking. The breadth is obvious but the depth of the book is surprising. Every time I pick it up, I discover a new layer.

Hara-san was thinking about simplicity and sustainability of designs before most others did and incorporated Japanese philosophy in a way that simply draws you in without knowing what it really is. The older I get the more I see the many layers of his work and the more I actually understand what his work is all about. He always seems to be three steps ahead of his time and will always be the one person I hope to be able to work with one day.

Bryan Haggerty
Weapons of Math Destruction by Cathy O’Neil

Almost all projects we work on now have some component of machine learning. This book details how machine learning algorithms impact people’s lives.

We are on the cusp of a new era in product design which goes beyond interaction and visual design. We’re working with engineers and now data scientists to craft experiences. This book offers a great primer not on what machine learning is, but how it affects people. Given our roles as designers is to advocate for the user, it is imperative we have the knowledge of how such technology works and how we can better incorporate it into the experiences we are designing.

Ashley Seto
Value Proposition Design: How to Create Products and Services Customers Want by Alexander Osterwalder

This book is a process book with practical information and exercises to help create value in a product.

In transitioning over into working in more of a product design space, this book gave me some tools to help understand product owners. The exercises in the book allowed everyone on the team to participate in a user-centered approach to creating and shaping the product.

Dan Saffer
The Humane Interface by Jef Raskin

How computer interfaces could be designed with people in mind.

It was one of the first design books I ever read, and it taught me that how you see the (digital) world isn’t how it could be, that design choices are involved.

Sean Thompson
The Vignelli Canon by Massimo Vignelli

Vignelli walks the reader through many of his design projects, which demonstrate his discipline and versatility as a designer.

Vignelli, and other designers like him, have helped me think about design, less as it relates to a particular platform or moment in time, and more as a fluid language and discipline that can be applied to anything I dedicate myself to.

Tony Paves
The Vignelli Canon by Massimo Vignelli

A source of guidance and inspiration, the legendary Italian designer’s handbook on the foundational principles of graphic design and his thoughts and experience of implementing his design principles across different mediums.

It’s a great starting point for any designer, but when designing for screens, I find it useful to look back at Vignelli’s design principles for guidance. His work and his thoughts on design spans the test of time (originally written for print design) and can influence current work in UX and product design today. He also pokes fun at U.S. and our chaotic nature, which is (hilarious and) helpful to identify the importance of systems and standard.

Thanks to all on the design team who contributed to this post. A huge thanks to Josh Wilburne for photographing all the books and Ivy Blaine for pulling it all together.

The Books that Shaped Us was originally published in Twitter Design & Research on Medium, where people are continuing the conversation by highlighting and responding to this story.

A look back at our summer poster challenge

After moving to a different floor this past summer, the Twitter Design studio felt a little sparse. In an effort to brighten some walls and liven up our working space, a few of us got to thinking how we could make our creative mark. After brainstorming some ideas — stickers and murals! — we settled on some good ol’ fashioned posters to make our shared workspace feel a bit more like home.

And, boom: The studio played host to an eight-week poster challenge. Spanning Design, Research, and Twitter’s Creative Studio, we hosted four different challenges that culminated in a showcase every other Friday. We kept themes simple and gave silly titles to everyone who participated in order to create a low-stress, high-fun event open to all. Each challenge rewarded three participants with a themed prize, determined by a guest judge from the leadership team.

Here were the themes for our inaugural poster challenge:

• Tweets!– Visually represent your favorite Tweet
• Portraiture– Recreate yourself, an idol, or a colleague through illustration, photography, or any way you like
• Core Values– Take the Twitter core values to the #NextLevel
• Community– Represent a hashtag, cause, non-profit, or whatever you’re a part of

The challenge was a rousing success! It also allowed us to work beside talented, creative folks that we don’t always see in our day jobs. We spotlight a few below:

Ingrid Bremner– Designer, Twitter Creative Studio

What first got you interested in visual design?
When I was a little I was obsessed with the album art in my parents’ record collection, especially Axis Bold as Love and Sgt. Pepper’s Lonely Hearts Club Band. I hoped to do that for a living one day. I still hope to.

What was your inspiration for your posters?
The decision to create these posters with the Risograph influenced the choice of subject matter. For the Tweet challenge, I wanted to celebrate the delightful absurdity of @phranqueigh. For the portrait challenge, I wanted to pay tribute to the wonderfully wild and vibrant Yayoi Kusama.

How would you describe the style of your work?
I would describe the style of these posters as bold and playful.

How did you settle on a color palette?
The Risograph pretty much decided the color palette for me — it produces such lively yellows and pinks and reds.

Josh Wilburne– Product Designer, Tweets

What first got you interested into visual design?
I used to be really into punk and zines when I was younger. I wanted to design album covers and magazines, so I went to college for graphic design. I did that for a few years before getting into more digital work, and eventually into UX and product design. But really the old album covers, show flyers, and punk zines were my first intro into the concept of graphic design.

What was your inspiration for the portrait challenge?
I love my dog, and I wanted a way to visually represent him. I also like gradients and this general “nouveau Memphis” design trends that are happening lately, so I just looked at lots of posters and got some ideas.

How would you describe the style of your work?
I think I get lost in inspiration from all over the design blogosphere. I try and see trends happening in modern design, as well as some of my more favorite classic designers (Josef Müller-Brockmann, Barbara Kruger, Jan Tschichold, to name a few). Like most designers, I feel like you just kinda absorb lots of things and then eventually try and execute some sort of amalgamation until it feels right.

Any highlights or fun moments from the challenge you want to call out?
When Biz hand drew the portrait of himself and Jack! Also getting everyone together to just create something for the sake of creation was a great way to break up your day-to-day work and stretch your creative muscles.

Biz Stone on Twitter

Hey @marciadorsey, I entered Twitter's Summer Poster Challenge for Portraits and won with this drawing of 2 friends!

Mackenzie Crist– Designer, Twitter Creative Studio

What first got you interested into visual design?
It’s hard to say! I think I’ve always been pretty interested in visual design, whether or not I could articulate it. I remember when I discovered Word Art (from Microsoft Word) in elementary school, and I think I was hooked on typography ever since.

What was your inspiration for the portrait challenge?
My inspiration for the portrait challenge was the magnificent nuns from my Catholic, all-girls high school (shoutout to Holy Names Academy!). They were remarkably intelligent and interesting women, who were also hilarious and witty.

How would you describe the style of your work?
I love typography, so I try to incorporate lettering in my work whenever possible. I also enjoy geometry, crisp lines, and precise alignment of objects.

How did you settle on a color palette?
For the nuns, I went with the brightest colors we had. I love the neon pink and how it overprints with the blue and yellow. I wanted to use color to boost the energy of the posters.

What did you learn from participating in the poster challenge?
Most importantly, I learned how to use — and proceeded to fall in love with — the Risograph. Part of the fun of the poster challenge was learning to expect imperfections that would result during the printing process. Typically, I’m pretty meticulous with my design, but the Risograph doesn’t always allow for such precision. I began approaching the design process differently so that any “mistakes” made during printing (such as misalignment or overprinting) would enhance the poster.

Thanks to all who participated, the folks who helped organize such a large cross-functional festivity, and our resident photographer: Josh Wilburne, Adi Wise, and Jeremy Reiss.

A Summer of Ink 🤘 was originally published in Twitter Design & Research on Medium, where people are continuing the conversation by highlighting and responding to this story.

Horizon Design System, Part 1

When I joined Twitter over two years ago, I discovered a group of devoted designers and engineers working on a Hack Week passion project called Feather. Feather became a web component library focused on serving Twitter’s internal and enterprise products.

Feather’s mission was to provide consistent and thoughtful experiences at scale. As the number of Feather’s components, patterns, and internal customers grew, this once-Hackathon passion project evolved into a well-supported team. Our group was committed to creating a quality component library that supported other teams by improving work performance and efficiency.

Meanwhile, the resources we were using to build the Twitter app were not as well defined. Despite everyone’s best intentions to create a cohesive experience with Sketch UI templates and office hours — informal sessions where feature designers confer with the Platform design team about best practices — the design team’s size was too large to maintain alignment and consistency.

To find out more about the lack of cohesion, a user researcher on our team, Wilson Chan, conducted numerous interviews amongst the design team looking for where we could make improvements. We will be sharing what we learned in a post here soon.

Based on the research collected, we assembled a team to create Horizon, our design system for all our Twitter consumer products. For Horizon to be successful, we knew it needed to be treated with the same effort as a product, with clearly identified goals, a roadmap, and — of course — swag.

Goal 1: Bring cohesion across platforms
One reliable way of introducing cohesion across platforms was through audits. Slight visual differences across platforms were easy to find, but with different teams dedicated to various initiatives, inconsistencies across UI elements and interactions were far too common.

The audit exercises helped us create an inventory of updates for us to make as resources become available or teams touch on related areas of the apps.

The best use of our audit findings was to take conflicting patterns and document the appropriate uses to guide towards unification. With this documentation, we finally had a resource to help prevent the same issues from arising again.

Goal 2: Provide trusted resources
Creating consistent documentation guidelines and distributing always-up-to-date .sketch assets as resources helped everyone begin to communicate verbally and visually in a unified way.

We wanted to make sure our team’s language for different elements and interpretations of appropriate usage wasn’t wildly different. Through naming exercises, interviews, and working sessions, we collaborated with designers and engineers across the team to craft an extensive set of usage guidelines.

Without this centralized documentation, our team couldn’t scale properly. Knowledge was confined to specific people, resulting in those individuals having to meet with others regularly to discuss the same topic over and over again. Our documentation created a single place for gathering the knowledge that team members gained while working on a product, allowing for a self-service model.

From the research conducted within the design team, a substantial amount of time was being spent recreating views in the product in Sketch. By providing a set of synced resources on each designer’s computer that contain up-to-date elements and screens, we are able to increase productivity and efficiency; we eliminated that tedious, recurring task (more to come about this in an upcoming post).

Goal 3: Look towards the future without recreating the wheel
Knowing how and when to evolve an existing component or interaction pattern can often be unclear. We are solving this by identifying a sequential exploration phase within our product design process: Utilization, Adaptation, then Creation.

Utilization of Horizon components allows us to leverage defined solutions for common design problems and needs. With our design system, we built strong foundations of existing UI elements and interaction patterns that we can use, and reuse, with little overhead and the least amount of friction. Using these elements supports creating a consistent experience across platforms requiring people to have to do less cognitive work to learn new interactions.

Adaptation of an element is an opportunity to refine and improve all current use cases. When an existing presentation or behavior doesn’t fully solve a problem, we can make adjustments to an element to accommodate the needs and have those changes propagate throughout the app.

Creation of new UI elements or interaction patterns is sometimes needed when the parts of our design system don’t solve a specific problem for people using Twitter. We try, whenever possible, to adhere to utilization and adaptation of our system, but recognize that in order to provide a great experience, new artifacts are sometimes needed to solve a problem. By going through this cycle, we can ensure that creation of a new element is beneficial to our system and the people using Twitter.

Conclusion
By identifying these goals early in our process, we are setting our sights on how we want to work and what we want to build.

We’re learning a lot throughout this process, through quarterly team feedback surveys and presentations, while evangelizing our mission throughout the organization.

Twitter Design on Twitter

We've been doubling down on our design system and tools. Great presentation today by the team. We'll be sharing more on this soon!

This is the first blog post in the “Horizon Design System” series. We look forward to sharing more about our process and progress in future posts. In the meantime, if you have questions, leave us a reply. Or send us a Tweet!

Studio images courtesy of Josh Wilburne. Header illustration courtesy of Michie Cao.

Looking to Horizon: Why We Built A Design System was originally published in Twitter Design & Research on Medium, where people are continuing the conversation by highlighting and responding to this story.