After two StubHub engineers won first place in Skype's hackathon, they approached me about creating conversational UI that would help suggest events based on the users's input.
The chatbot became a fun challenge to create a script that sounded human, responded at a natural pace, was prepared for off-script moments, and incorporated gifs and emojis when appropriate.
The challenge: Refresh StubHub's onboarding experience to match their brand redesign, while introducing an opportunity to scan the user's music library (to provide personalized event recommendations).
The solution: Copy, imagery, and animation that inspires and excites users, without being overwhelming them in the onboarding flow.
The process: Through daily collaboration with a Product Manager and UX Designer, I first determined what to feature in the onboarding flow by answering these questions:
I began by categorizing the most important user benefits and business requirements: reminding the users of the different genres offered, requesting their location, offering to scan their music library (and offering an option for users without a library), and finally a notification permission screen.
Because users are typically hesitant to share their location and allow notifications, I organized the copy so the headline lead with the benefit first, followed by a succinct sub-heading to illustrate how we could deliver that benefit. Keeping with StubHub's voice and tone, I used conversational phrases like "Let's go!" and "Sounds good!" to convey excitement in the call-to-action buttons. I chose "Maybe later" over "No thanks" as the secondary call-to-action to remind the user that they could revisit this option if they changed their minds. To cater to users who do not have music saved on their phones, we included a word cloud (5th screen, above) for users to manually choose their favorite artists, teams, and events.
Given that these screens would be the first window into the new StubHub experience, it was important to communicate the brand's revamped energy. This meant a new color palette, sleek font, and updated imagery. The first screen now opens with an animated StubHub logo which drops the user into the "Experience something amazing" screen. The football player image above is actually animated on a carousel of three images. The carousel also includes images of a ballerina and music artist - which I purposely chose to represent StubHub's wide range of genres.
After several rounds of user research, we found that the new copy resonated well with users, but tweaked the design on some screens to improve usability. Overall the onboarding flow and brand redesign was a welcomed change to our users.
Empty states are a great opportunity to drive engagement, or in StubHub's case, enhance a user's profile. Here I kept the copy short by focusing on the user benefit and when necessary, including a instruction on how to perform an action. Our UX designer included animated illustrations for a more engaging user experience.