CLIENT TYPE: Musical artist
ROLE: UI/UX design lead
PROJECT OWNER: Ticketmaster
DESIGN DURATION: 2.5 months
LAUNCHED: Summer 2016
The Guns N’ Roses news bulletin
Experimental interaction design meets American rock branding
FUN FACT:
In 2016, the year this project launched, the Guns ‘N Roses’ “Not In This Lifetime” tour was the highest-earning tour per-city in the world, and the 4th-highest overall!
EARLY WIREFRAMES
Mobile-first homepage, desktop-first tour: a two-way design challenge
Google Analytics indicated most gunsnroses.com users access the site by phone, but proceed to purchase show tickets on desktop. This meant a consistent experience between devices was ideal.
By going with a centered layout, the site resulted in just that.
gunsnroses.com user breakdown by device:
Lowering barriers to entry
Given a bullet chamber isn’t the most common mental model for news consumption, high priority was given to creating multiple, overlapping means for operating it and hinting at its functionality. Creating a UI that’s fully consistent across all devices was just one of many active attempts to compensate for the feature’s novelty. Others include:
- Giving users have the ability to click on one of the photos on either side of the logo, a secondary form of navigating the news chamber.
- Making the inactive photos inside the chamber change from partial to full opacity on rollover, briefly deflecting attention away from the logo.
- Placing the band’s bullet logo front and center, as the most visually dominant item on the page, in order to provide context to the chamber design and keep user attention near the arrows on either side.
Whiteboard prototyping with dev team lead and project director at LiveNation/Ticketmaster office.
This picture was taken during part of a brainstorming session that focused on weighing the pros and cons of two main bullet chamber layout options – centered and right-hand-side.
Another major factor in establishing the ideal layout was the client-side request for an above-the-fold promotional copy area. This space would largely be used for concise tour-related updates, such as new locations being added to the schedule.
The right-hand-aligned chamber approach seen here was ultimately abandoned for a centered one, as it translates better to mobile and creates a consistent first impression for users.
Sample of functional specs
