Harley-Davidson 115th Anniversary

In 2018, Harley-Davidson will celebrate its 115th Anniversary with a landmark event in Milwaukee, attracting motorcyclists from across the country. Harley-Davidson solicited the development of a responsive event page detailing the legendary weekend. 

Harley Davidson banner image.png
 
 

The build of the 115th Anniversary event page came in the midst of MullenLowe Profero’s larger redesign project to make H-D’s website fully responsive and shift platforms from CQ5 to AEM. Limited time and resources to build the event page required the use of components already built for the new AEM platform. This presented a unique challenge: presenting all of the copy provided by the client using only existing components.

I worked closely with the content writer, visual designer, senior UX designer and project manager on the project. I was responsible for developing the UX design strategy as well as creating the final annotated wireframes.

 
 
 
 

ORGANIZING CONTENT

 
 
 

My first task was to examine the copy provided by the client. In order to convey all of the details in a narrative that was easy to scan, I grouped the bulk of the information into two main segments: 1) opening activities or 'The Big Kickoff' and 2) event rallies and parades or 'Let's Get the Party Going'. After grouping the content I chose the appropriate components.

 
 
 
DESKTOP/TABLET

DESKTOP/TABLET

MOBILE

MOBILE

 
 
 

I extracted copy about custom bike shows taking place during the event. Separately featuring the custom bike shows in a distinct UI component reinforced the H-D brand and its focus on bikes, as well as created a new visual element on the page. Unfortunately, this feature was later removed per the client's design preference. 

 
 
 
DESKTOP/TABLET

DESKTOP/TABLET

 
MOBILE

MOBILE

 
 
 

MINIMAL VS. SCANABLE

 

A back-and-forth in our process was deciding how much of the page to reveal to users upfront, versus how much content to tuck away. One solution was creating a persistent navigation bar that would make a longer page easier to navigate. 

 
Screen Shot 2017-10-12 at 12.36.29 PM.png
 

For the event FAQs, or ‘Need to Know’ section, I designed two different options: 1) an expandable accordion for a cleaner look and shorter page and 2) in-line text for exposed and scannable questions and answers. The accordion style was chosen in order to keep with a consistent design across other sections of the site.

 
 
 
MOBILE ACCORDION STYLE

MOBILE ACCORDION STYLE

MOBILE IN-LINE

MOBILE IN-LINE

 
 
 

CONSTRUCTING A RESPONSIVE PAGE

 
 
 

I created responsive medium-fidelity wireframes that I handed-off to the visual designer, who created the final visual assets.

 
 
 
DESKTOP/TABLET

DESKTOP/TABLET

MOBILE

MOBILE

 
 
 
DESKTOP/TABLET

DESKTOP/TABLET

MOBILE

MOBILE