Background
VISION
As part of the Search team, our vision was for Facebook Search to offer the best experience for finding people, communities, and businesses, and for exploring the most meaningful content related to interests and current events.
Historically, Facebook excelled at helping users discover and connect with people. However, we found that many users were increasingly broadening their search intent to include areas such as News, Entertainment, Travel, and Business, presenting significant opportunities for improvement.
As a result, the Search team embarked on a long-term redesign initiative named Apollo. The goal was to create an intuitive search experience that would help people discover content and communities best suited to their interests.
CORE PROJECT
At the beginning of my internship, our team put together a list of use cases to inform our redesign. For instance, finding an unconnected friend or discovering related news about a celebrity and what they are up to. Many of my team members would take ownership of these different use cases.
My task was to enable these use case owners to build a consistent user experience by developing a set of universal components and guidelines that would help shape the entire result page experience for search. In other words, a design system dedicated to Search
A list of pre-identified use cases for Search on Facebook app.
Process & Deliverable
FOUNDATION TO SEARCH
By syncing up with each use case owners as well as PMs, I identified the common patterns across use cases and prioritize components based on their essentiality to the search experience.
Here are a few of foundational components to the newly Search experience:
- Posts are a type of core results that allow users to engage with content and communities on Facebook that are relevant to their interest by linking them with post content as well as the entity in the header.
- Entity Result is a core result component that links directly to an entity destination. It has several variations to accommodate multiple content types.
- Collections are a component which groups the same entity types into a curated format to help capture user’s intent and enable exploration with people and communities tailored to their interests.
- Finally Pivots including Tab Pivot, Product Pivot, Related Searches, and Related Hashtags are components to allow users to transition to more of the same content or other related content.
Foundational components to Search.
ITERATE, ITERATE, ITERATE
The initial search experience was focused on efficiency and the compression of information. The redesign aimed to create a content-forward experience that allowed users to have an improved content consumption experience. Along with the adoption of the existing Facebook Design System, this principle guided my exploration of the components.
Exploring ways to express components in a content forward way.
When a single component is used for various types of content, customization may be necessary. Therefore, I made it a practice to design within context and test different types of content, which proved to be highly beneficial in refining the design.
Testing in context and with different content is a good way to stress test the feasibility of your design.
DEFINING USAGE
Another key part of my project was to define when and how to use the components I developed. For instance, determining which type of collection component to use. Here are a few points I identified for consideration:
- Entity Type — What is the most essential to this entity type? Does the entity type benefit more with emphasis on images or on snippet information?
- Query Relevance — What is this collection’s relevance to the query? Is this collection highly relevant (e.g., >80%) to the query, therefore deserve more presence within the search result page?
- Entity Equality — What’s the entity equality within this collection? Is it important to have each entity’s presence equally distributed within the collection?
1) High relevant query result to people. 2) People rely on both thumbnail and title to discover video, hence a collection to emphasize on both. 3) Less relevant query result to people, hence smaller size component. 4) Similar exposure to the products listed within the collection for fair entity equality.
Instead of enforcing designers on the component to use, the goal for these points were to help and inspire them to consider the different use cases and what to prioritize when utilizing these components. There is no absolute right answer.
FINAL DELIVERABLES
After an extensive collaboration and feedback sessions with all the stakeholders, I created a set of component usage and guidelines with a wide range of component variations. These documents serve as the source of truth of how the components are constructed and guidelines on how the team could utilize these components.
A sample from one of the final deliverables. These foundational components with usage and guideline help the team to develop a cohesive experience that aligns with our team vision. Note that some components were TBD because they were depedent on design from other parties.
final thought
“Collaboration breeds lasting result.”
Point of View
A huge part of this project's success hinged on collaboration with the design and development team. I needed to understand the needs of each designer for their respective use cases, identify common patterns across all user scenarios, and navigate the technical limitations involved in developing these components. Without collaboration, there was no way I could deliver the result I did.
The internship not only gave me the experience to work within a large ecosystem, it also taught me how collaboration could create lasting result. Shortly after a few months post the internship, a developer I worked with told me that most of the components I created were implemented and the guidelines I created continue to serve as a helpful source for the team. Hearing that, I was filled with joy and great satisfaction. The time may be short, but I was proud to be part of the Search team and a designer that create impact that lasts.
