Guns N’ Roses Official Homepage

Home / Web / Guns N’ Roses Official Homepage

CLIENT TYPE: Musical artist

ROLE: UI/UX design lead

PROJECT OWNER: Ticketmaster

DURATION: 2.5 months

LAUNCHED: Summer 2016

The Guns N’ Roses “news bullet-in-chamber”

Experimental interaction design meets American rock branding

See it in action

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:
Mobile users: 49%
Desktop users: 44%
Tablet users: 7%

Lowering barriers to bullet-chamber use

 

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.