Bing Video Answer Framework Guideline
The Problem
SERP (Search Engine Results Page) answers are one of the fundamental experiences for video searching and viewing in Bing.
Videos on SERP are key assets to drive user engagement and Whole Page Side-by-Side wins, but there is inconsistency due to various video pieces, and answers are designed by different teams and it will confuse users to understand all the different video answers and cause alignment issues.
Our solution
Designing a framework guideline for video content on SERP to help designers from the video team and partner teams build a new video answer easily and efficiently, become a strong foundation for new features coming in the future, and also reduce the inconsistency between various video pieces on SERP.
At the same time, it also can save development efforts and have an overview of the overall video experience on SERP for the product team.
different video answers on SERP
What did I do?
-
Tidy up the current video answer templates structure
-
Standardize the templates for different sections and screen sizes
-
Create guidelines for sizes, styles, assets, uses, redlines, etc.
-
Add the how to use it section and provide suggestions for new cases
-
Keep managing and updating the framework as new features ship all the time
Structure of all types of video answers
New guideline includes layout, pattern, uses, etc.
Results
2 things the new framework guideline brings us:
Efficiency and Consistency.
-
The framework can be a strong foundation for new features in the future and also reduce development efforts.
-
It will help keep the consistency between the design for all video answers on Bing across different partner teams.
2 things I have learned during this project:
-
Think more about the situation and problem we meet when we use a design system, we are the target users themselves.
-
The design system must be updated and organized continually, the more requirements we have, the more complete the system will become.
Multi-perspectives Product Review Answer
The Problem
When you search for something on a search engine, there usually may not be black and white results for it, there can be two sides to your query. Bing basically collects data from multiple sources using its artificial intelligence. The more diverse and comprehensive results users get, the search engine is more trustful.
Product is the 4th largest segment in the video. For users who make a purchase decision for products by looking through others’ reviews first, they do have requirements for honest and diverse answers with multiple perspectives. User prefers trustable reviewer who gives honest opinion and wants more balanced opinions from different sources.
Our solution
Multi-perspectives play an important role to build trust as they will provide more than just one voice, and let the user see things from different angles. By building multi-perspectives product review video answers, we can help users to get more balanced opinions on the product and build trustworthiness.
What did I do?
Starting from the product segment, I want to design a multi-perspectives answer on the video result page that can provide:
1. Multiple high-quality product review videos
2. Caption to indicate the reviewer is trustworthy
3. Perspectives about the product from the reviewer
On desktop design, I separate MP answers with other normal video answers and use pole position and edge-to-edge background for feature promotion. In the video card, two quotes from each video will be shown in the tile, which can be positive or negative. This will provide users a clear look at the reviewer’s perspectives, users also can compare an answer to another answer to see from different angles from different reviewers. I also added a quick jump link at the end of the sentences, for users who are interested in a certain opinion. An authorized badge will also show with the answer if the channel is authorized, to indicate the reviewer is trustworthy.
Final design of MP
Additionally, I designed responsively for all 10 iterations for the best experience on every screen size and device.
Some of the design explorations
Responsive design
FRE Design For Adding a Video to Playlist
The Problem
Early this year video team was implementing a new feature, Playlist on VRP. Based on the hypothesis that users want to collect a list of videos during search and play them together, we plan to have a learning flight to find out what’s the user really needs.
However, the current design for adding to the playlist seems weak to everyone. We have feedbacks from internal and external that says this design is easily being missed. It’s will take a long process to redesign the whole feature, before we get to have a look from the beginning we want to promote the feature by designing the first-run experience for it.
Our solution
The current design has 3 main issues that will cause the problem in our assumption: not visible enough, hard to understand, and not attractive to users.
So we wanted to collect some data to help find the real issue from the FRE learning flight. The main goal of the FRE will be two:
1. Feature promotion so first time users can discover it
2. Feature education so users can understand how to interact with it
What did I do?
So I designed 3 different treatments to solve each problem and evaluate the results by flighting all three treatments. The 3 treatments have different focus areas: to increase visibility, to add a feature education, and to combine both.
After the experiment, option 3 has a strong increment in the usage of the playlist feature.
option3_flow
option3_flow
option1_flow
option2_flow 2
Play videos to see different design treatments