eBay Internship:
Leading the UX Design for eBay's Internal Experimentation Platform
Role Timeline Team Tool
UX Designer V3.2 Jan 20 - Mar 25 DSS
UI Designer
V3.3 Mar 25 - Apr 30
Figma, Axure, Jira
User Researcher
Overview
01
CONTEXT
Touchstone is eBay's internal experimentation platform that allows employees all over the world to experiment via A/B or multi-variant testing, manage their experiments, and analyze data easily. Over time, its user base evolved and the existing experience could not handle the emerging use-cases and scale across widely different teams and departments. In 2021, our team decided to redesign the platform to increase its usability for everyone.
PROBLEM
Many new users are product managers, designers, user researchers who do not have a professional data analysis background. The statistics knowledge behind the product is hard for them to understand, which leads to inefficiency for users. Also, since the team does not have UX designers before, the interfaces are programmed by software developers. Many details were not considered carefully from a user-experience perspective. How we might empower our diverse users to use Touchstone in the way they want while making it simple, efficient, and uncomplicated to use.
02
Platform Architecture
03
User Research
We kicked off the process with a comprehensive experience review of the current experience by conducting a usability test within the company.
1. Several workflows and experiences in the existing product scored very low on the usability scale as per our benchmarking.
2. Very high drop-off rates, especially at the experiment setup procedures, indicated poor onboarding and overwhelming product complexity that we need to address.
3. We planned for an end-to-end visual and usability refresh to address dated UI paradigms.
03
Design Goals
The experience review helped us define the focus areas for the redesign.
Objectives
Improve the efficiency of setting up experiments and viewing reports
1
Reduce users' understanding cost, and improve the product usability
2
Reduce development costs and create the design system
3
Key Results
Improve users' interactive experience with the platform
Apply data visualization
Promote using Figma as the collective design tool within the team
Optimize the layout of interfaces to improve users' visual experience
Improve user perception and enhance the sense of control
Create component libraries in Figam to improve the efficiency of team collaboration and product iteration
04
Design Process
Objective 1: Improving the efficiency of setting up experiments and viewing reports I
Before
No guidance
Complex workflow
Unreasonable sequence
Low screen-efficiency
After ✨
Experiment Setup Steps
# Provide Users Clear Guidance
PROBLEM
The old page lacks guiding information, making users confused, and causing irregularities in the content filled in by users
SOLUTION
Introduce a progress bar to give users a clear step-by-step display and guidance, which can enhance users' sense of control and expectations.
Before
After ✨
Divide Hypothesis into three small sections, and guide users to fill in the logic of setting experiment variants -- expected results -- reasons, which not only reduces the difficulty for users to fill in but also helps the platform to recommend the most suitable embedding indicators for the experiment to users.
# Reduce the user's operating distance to improve efficiency
Fitts's Law
the amount of time required for a person to move a pointer (e.g., mouse cursor) to a target area is a function of the distance to the target divided by the size of the target. Thus, the longer the distance and the smaller the target’s size, the longer it takes.
Before
After ✨
# Use card layout to integrate important information to improve space utilization
The old banner design couldn't better present the information, so we looked for a more suitable layout to compose the information presentation.
In the end, I chose the card-style design, which is like a container that can contain complex information and can arrange and combine independent information modules in an orderly manner to form a feed flow design. Use card design, headlines to differentiate between modules and content. Try to use white space, font size, and word weight to separate the information hierarchy.
Before
After ✨
SOLUTION
Objective 2: Reduce users' understanding cost, and improve the product usability
Old Version
PROBLEM
The presentation of data in the old version mainly relied on tables and figures, which leads to many barriers for users to use.
SOLUTION
Assign each treatment a different color to avoid the long and repetitve name. I introduced the visualization of confidence interval and normal distribution to represent the statistics in the old tables.
Data Visualization Design
When the mouse hovers a experimental group, the area map representing the experimental group will be highlighted, to distinguish the area from the other experimental groups, and display the specific data in the tooltip
Merge the same data
Place labels on upper and lower area
Put data and graph on different layers
Show peak data only
When the mouse hovers a experimental group, the area map representing the experimental group will be highlighted, to distinguish the area from the other experimental groups, and display the specific data in the tooltip
1. In order to show the overall trend, eliminate individual points that would affect the overall trend to form a smooth curve
2. Based on the line chart, use color to increase the legibility. In addition to observing trends, users can compare the accumulated values within a selected range
Components
A. Comparison
B. Composition
Objective 3: Reduce development costs and create the design system
# Promote using Figma as the collective design tool within the team
Before I joined the team, the workflow is that the product manager drew a prototype in Axure and wrote the requirements to software developers directly. Developers are based in three countries. Time difference and distance result in high communication costs, and the efficiency from design to launching s very low. After I joined, in order to open up efficient collaboration between design and development, I promoted the use of Figma for design within the team, and make tutorials for developers and testers in the group about how to use Figma's built-in code to empower product development, which greatly improved the efficiency of design and development of our team.
# Design System
