StubHub is an online event ticket marketplace providing platform for ticket buyers and sellers. As more customers were visiting the site on their mobile devices, the company was looking for a responsive site redesign providing fast and convenient access on all the device types.
At Stubhub, as customers come first, the company wanted to ensure that customers not only enjoy using the product but have a positive emotion during every step of the conversion journey and towards the organization.
UI/UX designer and developer
- Worked on design and development of multiple redesigns of home, event, browse and checkout pages.
- Worked on content creation and marketing campaigns to improve conversion.
- Participated in discovery sessions, heuristic evaluations, focus groups, user interviews and usability tests to understand customer needs.
- Collaborated with experience designers to develop design brand style guide and components to create a pattern library for maintaining site consistency.
- Participated in brainstorming sessions and presented ideas/prototypes to cross-functional teams.
- Collaborated with product managers to gather requirements and define user stories/features to achieve goals in an agile work environment.
- Worked with analytics team to define A/B test and analyse user site interaction data.
Product manager, experience designer, developers
Finding the right ticket on Event page.
The goal was to provide engaging and clean interface to facilitate customers find the best value ticket, any where on any device.
- It was difficult to quickly design and prototype new features, on a variety of screen sizes, and incorporating brand style.
- As team was growing, there were more instances of designs being out of sync and designers working with outdated palettes or starting from scratch.
- Based on user research, the basic features customers were looking for were best price, good view, and ease of ticket delivery. There were too many features of filtering and sorting but it was overwhelming for the customers.
- Redesign event page as responsive and single page application for improved interface and page performance on different devices.
- A design system based on guided principles and style guides to create reusable components to maintain site consistency. This provides single source of truth for rapid prototyping and development.
- Design intuitive and engaging pages by keeping customer needs upfront. Adding more relevant filters and hiding rest, gave more real estate to ticket list and seat map. Ticket seat maps were highly used filters for big events providing visual filter for sections and zones.
- Design UI atomic components so that it is easier to A/B test components and features at different levels.
- The first step was to list and review all the existing components and features of the site. Understand which components are highly used and provide unique value to customers. Retire or redesign features which were least used to provide cleaner interface.
- Reviewed site analytics, UserTesting and customer support open tickets data to understand customer site interaction and where they drop from the conversion funnel.
- Considered site breakpoints for different size layouts and brainstormed how each component should be designed for respective device layouts.
- Took this opportunity to structure our system based on Atomic Design Methodology - small, independent atomic parts combined into larger molecular structures. Collaborated with designers to define and document typography, colors, buttons, form elements, alerts, list, and other components.
- Brainstormed design ideas as sketches, with PM and UX for various features keeping in mind business requirements, customer needs and technical feasibility. Developed component/page prototypes for user testing and stakeholder reviews.
- Designed site analytics test cases and integrated Adobe’s Omniture (page load and click event tracking) and ClickMap (heat map tool) to understand customer’s page interactions in production.
- Page design for better page performance - worked with designers to assist with responsive web design guidelines, advocated for lesser image and more CSS3 based features, contributed insights as how and when assets/components are loaded which can be reused and cached across the site for better customer experience.
Event page (Tablet and larger resolution)
Event page (Mobile resolution)
Event page showing filters (Tablet and larger resolution)
Event page showing filters (Mobile resolution)
Event page showing popup filter (Mobile resolution)
Event page with ticket list only (Mobile resolution)