Facebook Stories and Direct

Share your day with friends
and send private visual messages.

Problem

News Feed ranks posts using an algorithm to help you see important updates from friends and family.

Because you don’t usually have enough time to scroll through everything posted by your friends, you can wind up missing some of the more casual and informal moments of your friends’ lives.

We also heard from people that they felt their content had to be high quality enough to share with all their friends in News Feed, which had the potential to discourage them from sharing smaller moments.

Solution

With the rise of camera-based sharing shown by Instagram and Snapchat, we built two new spaces for people to view and share visual content from their friends on Facebook.

In Stories, only friends who check your Story will see your content, making it a space where you can feel more comfortable sharing smaller moments throughout your day. The format is full-screen and visual.

With Direct, you can send ephemeral photos and videos to friends and have conversations.

Role

After working on several experimental sharing products in Facebook's London office, I moved back to California in August 2016 to help lead the effort to build Stories and Direct. We launched worldwide in March 2017.

Working on the team designing the system for sharing visual content on Facebook, I collaborated with engineering, product marketing and research teams to build, test and launch.

We presented to Mark Zuckerberg and the product leadership team to gain consensus and set direction.

See updates from friends in Stories.
Send and receive visual messages.
Talk about what your friend shared.
Stories and Direct designed for Facebook Lite – intended for devices with small screens.
Stories and Direct designed for desktop browsers. The final version that shipped put Stories into the sidebar.
Interactions of replying to content received in Direct. The conversation is attached to the photo or video.
Art direction and production of the demo video for Direct.

Facebook Friends Browser

Connect with your closest friends.

Problem

News Feed uses an algorithm to determine which posts you see.

This means that you might miss a casual moment from a close friend's daily routine or feel that you see too many updates from an old acquaintance.

When sharing content, you might not feel comfortable posting frequently because you don't want to overwhelm your friends' News Feeds. You might also not want to post something that you don't feel is high-quality enough to share with all your friends.

Solution

In this space, you only see content from friends you choose. Each friend has their own feed where you can check what they've posted recently. By flipping the model of consumption from passively scrolling through News Feed to actively choosing friends, this space makes sure you can keep up to date with the friends you care about most.

We also experimented with ways to share that were designed to make it more socially acceptable to post more often, help you feel comfortable posting small moments, and make it faster and more fun to share parts of your day.

Role

We had been asked by product leadership to think about this problem and I worked with a product manager and two engineers in London to come up with a solution.

We eventually grew to a full product team of engineers, researchers, content strategists, data analysts and marketers.

As the only designer, I helped lead product strategy, conducted research and usability sessions, designed the user interface, worked with engineers, and presented to leadership. We explored dozens of variants and directions from mid-2015 to the summer of 2016.

When a close friend shares an update,
this icon will let you know.
You pick the friends
you want to see posts from.
Swipe through friends
to browse posts.
Different ideas for how to show your top friends.
Experiments in how to make it easy and fun to share visual content.
Interactions for viewing content from friends.

Code for America

Find a job that pays enough to live on.

Problem

America’s public workforce system is a set of government services designed to help people find and keep high-quality jobs.

The delivery of these services is frequently shaped by policies written without a good understanding how people use these services. Job seekers are often asked to navigate complicated systems, use unintuitive interfaces, and struggle with bureaucratic procedures.

Solution

We conducted research to identify systemic issues in the workforce system. We interviewed dozens of case managers and job seekers.

We prototyped and tested various technology products to help people find and keep high-quality jobs. We used these experiments to inspire government partners to use technology to improve delivery of workforce services.

Role

Collaborating with a small cross-functional team, I led research, design, prototyping, and experimentation.

I designed high-fidelity screens, mocked up interactive demos, and built functional prototypes and websites.

We gathered feedback from government leaders and non-profits to refine and improve our products.

Receive financial aid as a working caregiver.
Find the best job training programs.
Get compensated for currently unpaid work.
Help job seekers find and compare training programs that are eligible for tuition assistance from the government.
Enable people to successfully appeal a decision by an employer to rescind job offer based on conviction history.
Support people to get back into the workforce by helping them get reimbursed for caregiving expenses.
Empower job seekers to bring together their network of supporters to help them find a job.

Facebook Riff

Create videos together
with your friends.

Problem

Videos are a great way to share an experience with your friends. They can see the world through your eyes, wherever they might be.

Yet there often too many barriers for you to create a video. You might not know what to make a video about, you might be afraid your friends won't like your video, or you might not want to edit and polish your video.

And so your friends might miss out something special in your life.

Solution

In 2014, a viral video phenomenon swept the internet. People around the world were sharing videos as part of the Ice Bucket Challenge. The intimacy and vulnerability shown in these videos was bringing people together around a cause.

Inspired by how these videos were strenghtening friendships, we made an app that reduced the pressure of making a video.

Rather than come up with a new topic, you can just add a clip to a friend's video. The spotlight isn't all on you to create something funny or beautiful. You create a video together with your friends.

Role

After brainstorming with a product manager and engineer to come up with the concept for the app, we worked with a small team in London and Tel Aviv to build the app on iOS and Android.

I designed and prototyped the user interface, produced marketing and App Store materials and built the website.

We launched the app in April 2015.

Someone picks a topic.
Friends add clips.
Awesome videos go viral!
The branding was meant to inspire fun and creative videos.
Riff designed for Android, which we launched simultaneously as iOS.
When you add to a video, a countdown clock gets you ready.
Marketing website for Riff.
T-shirts for the team.

Facebook Text Filters

Add emotion and style to text posts.

Problem

Writing is one of the most basic and powerful ways to communicate.

With quick access to high-quality cameras to capture and share moments, posting plain text on social media can sometimes feel like it's harder to express how you're feeling or what's happening.

Solution

Just like a filter can help express the mood or emotion of a photo, we experimented with what a "filter" could be for text posts.

Instead of sharing just what you wrote, you would be able to select a combination of fonts, colors, and images to help tell your story.

Role

We prototyped this idea and pitched it to leadership. After some tests, research and iteration, another team went on to build out a version of this concept.

Later, it evolved to a feature where you could add a background color to your post.

Place Lists

Explore local spots by
neighborhood and category.

Problem

I love traveling and documenting my experiences. I make lists to remember places that I've enjoyed in different cities.

Foursquare has a rich database of places, but I wasn't satisfied with the way you could browse or share lists. I wanted more features and a cleaner layout.

Solution

Using the Foursquare API, I built a product that displays the lists I've made, with a page for each list that can be shared.

Places are ranked by rating and organized by category. You can filter by a combination of category, neighborhood, and rating — or search by any metadata.

Role

This was a personal project I built during the summer of 2017.

I designed the interface and built a system for syncing with the Foursquare API to keep the data up to date.

I engineered all the features to filter, search, and browse places and lists.

Facebook News Feed Discovery

Discover new and relevant
articles, videos, photos, and news.

Problem

Your News Feed is mostly made up of content from your friends and pages you follow.

This can sometimes make it hard to see different perspectives of a story or discover new sources of content.

Solution

After you read an article or watch a video, suggestions of related content will show up below.

To add new sources of content into your News Feed, you can browse recommended pages and see what they've posted recently.

Role

In 2013 and 2014, I worked with the News Feed team to design various features for recommending content and suggesting sources.

We prototyped and pitched several concepts, variations of which were then further developed and launched.

Facebook Pages

Connect and interact with your favorite
artists, restaurants, businesses, etc.

Problem

When you see posts from a musician, public figure, restaurant, brand or any other business, it's usually in your News Feed. When you visit their Facebook Page, the layout focuses on their posts – which you likely have already seen.

Details and other content from the brand or business aren't easily accessible.

Solution

To help people get information quickly, we redesigned the layout to highlight content specific to the page's category.

The sections would be reordered to show you the most relevant data first. A store would have a map and its hours, a restaurant would display photos and a menu, a movie would show videos and reviews.

Role

We designed and built a modular layout system. We presented to Mark Zuckerberg and product leadership and iterated based on feedback.

The redesign didn't launch as originally pitched at the time, but a similar layout highlighting content sections based on category eventually came to Facebook Pages in 2016.

Facebook Threaded Comments

Reply to a specific comment
and have multiple conversations.

Problem

In a comment thread, it's hard to have more than one conversation. This gets worse when there's a lot of people on a public thread or when a business wants to respond directly to a customer.

It's tough to tell which comments are replies to other comments and which are responding to the original post. It winds up being hard for someone to jump into the conversation or read it later.

Solution

We developed and tested a system that would allow some comments to be designated as replies to other comments.

When you wanted to reply directly to someone's comment, you could click "Reply" and your comment would be marked as a response to that comment.

Replies were visually differentiated so that it was easier to read the conversation and add your thoughts.

Role

As an intern in 2012, I designed various layouts for comment threads with replies. I also prototyped the interactions of replying to a comment and collapsing or expanding the thread.

We presented to Mark Zuckerberg and the product leadership team. The feature was initially launched for comment threads on posts by Pages. After refinement and further iteration by another team, the feature was launched to all threads.