Work     About





Client
Segment
Selected features
1. On-boarding learning modules
2. Workspace home dashboard
3. Adding Home in navigation
Role
Product Designer
Project duration
2 months


Challenges


I work with two engineers, one designer, one engineering manager and one product manager on this project in the activation team within growth pillar. We ship new features every 2 weeks during these 2 months. All features we worked on were unique and brand new two months ago. This means that features’ logic, visuals and patterns were not defined and included in Evergreen - Segment’s product design system. We have to define new UI patterns long the way, while we pivot based on frequent user feedback.



The why


The percentage of new customers currently get activated within 4 weeks is far below the best-in-class B2B SaaS benchmark. Segment is a complex, technical product that is difficult for users to get started with. After a live implementation discovery session - one engineering manager, one engineer and one product manager sat in a room and challenged themselves to set up Segment workspace from scratch, we confirmed some of the pain points our users are facing and concluded our insights as such:

PROBLEM 1
We currently encourage new customers to start tracking events right away, which we know is a complex, challenging process that can take a new customer weeks to comprehend and execute properly. However, to get value from Segment, you don’t need to implement track events. A customer can implement page calls for 1 web or mobile source and start using popular integrations like Google Analytics, FullStory, and Intercom immediately. Track calls can be layered in later - if at all. This indicates that the activation target that we set for customers can be much easier than what we currently make them do.

PROBLEM 2
There is very little visibility around the status of implementation during setup (ie, whether or not data is flowing, whether or not destination credentials are invalid), and the setup instructions themselves have significant gaps that leave the user guessing at what they need to do. These two issues combined make it extremely difficult for a customer to understand what they need to do to complete setup and how they need to do it. The most gratifying moments in the setup experience were the moments that provided confidence that the implementation was right, not just done (like seeing events show up ion the Debugger or seeing the Intercom bubble pop up on my site) — but these moments were sparse and difficult to navigate to within the app at the relevant points in time.

Before



Vision


Any customer who signs up for Segment is guided through their entire activation process in a logical, step-by-step way that leads them to the quickest path to getting value from the product. They are able to manage and reference their entire implementation experience from the Workspace Home, the new command center and dashboard for customers within the Segment app. Customers are provided with discrete activation and implementation milestones to hit in an ordered fashion. Customers feel confident throughout their entire setup process thanks to the frequent feedback, visibility, and validation that the app provides with respect to their implementation. 



User Flow


1. Users will complete a fast and interactive signup flow that gets them into their Workspace as quickly as possible while providing information to help us learn more about them and customize their subsequent experiences.

2. A checklist will greet users in the Workspace and tell them step-by-step every single task that they need to complete in order to activate. The checklist is so explicit and so granular that users never feel like they don’t know what to do next or how to do something that they need to do. The initial activation goal itself lowers the activation bar to the easiest set of tasks possible in order to get end-to-end value from Segment for a customer: get website pageview or mobile screenview data into a Destination and start using that Destination immediately.










3. Each task flow within the checklist (such as creating a Source or authenticating a Destination), is guided and requires the user to do only what is minimally required to get started. When users complete each task, we provide tools upfront that give full visibility and validation that the task has been completed correctly. For example, with methods like the Debugger, Auth Tester, and Event Delivery. We augment the feeling of gratification by providing surface-level indicators of task completion like checkmarks, strikethroughs, and confetti.




4. Whenever a task is completed, a visualization of the activation output (Source -- (data flowing) → Segment -- (data flowing) → Destination) animates and lights up, contextualizing the “why” behind each task. Instead of just checking off to-do list items, the customer is activating their Segment implementation, and this visualization gives that process meaning and purpose.

5. By the time users have finished activation, they have data flowing from 1 Source into a Destination and they have verified that data is flowing into their Destination. Activation is now complete!









Defining UI patterns



Dashboard explorations













© Qiao Huang