Project Context

Over the summer of 2018, I worked as a Product Design Intern at Facebook Ads Org. My team is called Business Interfaces and I was working on the product development for an internal tool. My project specifically was to improve the onboarding flow and in-product messaging system for this tool. During the course of three months, I designed an end-to-end onboarding experience, which has been shipped, and also established a messaging framework guiding when and how to deliver messages to people.

Due to the confidentiality of this project, I cannot present the visuals or elaborate how does the product work. If you are interested in learning more about this project, feel free to contact me!

PracticesDesign System, Design Tools, Product Thinking, Interaction Design, Visual Design

Methods & Tool
Interview, Competitive Analysis, Sketch & Principle

Role
‍Product Design Intern

Date
June 25-Sep 14, 2018

Timeline

12 weeks flew so fast

Despite for the first week, which was onboarding training, I was working on the projects for the following 11 weeks. I conducted some user studies during the second week and jumped into the first project at week 3. I had daily check-ins with my manager and three design critiques each week with designers from the cross-functional teams. After tons of explorations and iterations, I presented my work on week 10, in front of my teammates and peer interns. Looking back to the timeline, I find that 12 weeks ran so fast but I learned so many skills that I has grown into a way better designer after the internship.

Discovery

Understanding the people

As I started my initial research, I interviewed 8 FB employees to find out how they get started with the tool. In the interviews, I asked them to recall and walk me through the experience when they first used it and created a new project. I asked how they typically learn a new tool and how they expect to learn this tool.

Understanding the products

Then I conducted a competitive analysis to study how other products tackle the similar problems. I picked 6 competitive products to compare the onboarding flows and 5 well-established design systems to learn how to effectively deliver message in product.

Insights

People-Wise Problems

According to the user feedback from the interviews and the takeaways from the competitive analysis, there are three people-wise major problems existed in the current onboarding and messaging experience.

#1 Hard to learn
First-time users don't know how to get started.

#2 Lack of personalization
This tool is currently used by many different disciplines at Facebook, all with varying skillsets and backgrounds. What's a relevant update for some may be less so for others.

#3 No access to resources
A large percentage of people interacting with this tool are not in the product feedback groups. Traditional ways to inform people about updates to the product only reach a small audience.

Product-Wise Problems

Through comparing the messaging sections among various design systems, I found some problems existed in the current messaging delivery methods.

#1 TOASTS ARE EVERYWHERE AND INCONSISTENT
Toasts are the major messaging component delivering almost all of the messages. Some toasts are dismissible, some are not. Some last for 5s, some last forever. Some show up each time when trigger, while others only show up one time for new users.

#2 No Display Rule
There is no display or interaction rule to prioritize messages and to avoid of potential message collision and stacking. As indicated below, this four toasts stacking at the viewport is blocking the workflow and really annoying.
‍

Solution

For New Users,
adding a onboarding step before jumping into a blank page

To help new users get started with the tool more easily, I added a New Project Modal assisting them to preset the settings of the new projects. After iterations based the feedback received from the weekly design critiques, I simplified the modal and moved some of the content into a Onboarding Guided Tour on the blank page.

For Return Users,
refining the current messaging system to deliver "right" information at "right" time

To make sure the product is delivering information effectively, I recategorized the current messages and introduced two messaging components, popover and guided tour. Through studying design systems of other companies, I established a guideline to indicate the interruptive level, contextual level, and message urgency level for each type of the component. Moreover, I refined the visual style for toasts, to make them less distractive, based on the guideline.

To avoid of potential component collision, I also prototyped the interaction for each component. As I prototyped it with the product interfaces, I can't show the interaction publicly. As mentioned earlier, if you are interested in learning more about this project, feel free to contact me!

Reflection

Fighting against my comfort zone

As an Asian woman, I was raised in a way that I should listen more and speak less, and I shouldn't say anything if I'm not sure. I was so scary to be wrong or to show something that is imperfect. However, my manager told me that if it's uncomfortable, do it; if it's impossible, don't; which was totally blown my mind. So I step out to prepare for my first presentation, and then maintain the conversation in the following weeks. Gradually, I felt comfortable and confident in showing my work and taking feedback.
‍

Design is a learning process

From the regular critiques and communication, I realized that design is a learning process in a way that designers exchange experience and learn from each other. It's not a "senior vs. junior" or "teacher vs student" relationship.
‍

Knowing what I don't know

Earlier in the internship, the biggest problem for me to improve was that I don't know what I don't know. Now, after 12 weeks, I think I have a clear sense of what should I learn, which skills should I focus on, what good looks like. I'm sure that after the internship ends, I will go back to school with a strong purpose and a solid plan for improvement.

Facebook Internship