virgin2.png

 

Virgin.com

Beyond / 2013

I kicked off 2013 by heading up the User Experience direction on the new Virgin.com website (launched Winter 2013)

In collaboration with content leads, research strategists and a number of talented designers at Beyond, we were keen to ensure the new Virgin site experience was well researched and fuelled by the collected needs of the Virgin audience. The new site and it's content was appropriately designed around three key Virgin audiences - people interested in travel, music and entrepreneurship. Sub-users were also identified (those who wanted to seek Virgin sub-brands, or those who simply wanted to follow Richard Branson). The needs of these people were at the forefront of our vision and validated through suitable user testing.
 

Virgin 'workflow' personas and high-level user journeys

Virgin 'workflow' personas and high-level user journeys

A solid user-centric process was mapped out and undertaken:

  • An in-depth social research piece to determine key demographics (which eventually fed the user personas), the findings of this social undertaking also spearheaded the content strategy part of the website.
  • Holistic / landscape benchmarking and competitor research
  • Persona creation: who we are designing the new '.com' for
  • Navigational card sorting - naturally leading in to a definite site and content map
  • SEO strategy; to ensure the integrity of existing URL slugs and external routes in to the website still stand and don't lose their search rank weighting
  • User flows
  • Low and high-fidelity wireframes
  • A mobile-first responsive strategy
  • Prototypes and user testing throughout (remote testing via whatusersdo.com and in-person testing using InVision)

For the information architectural stages, we took to the office whitewalls with Sharpies and PostIts.

This enabled us to rapidly design up low fidelity IA and layout concepts, and to quickly determine which ideas worked - and which didn't. We continued to iterate until we got it right! This allowed us to put concepts in front of Virgin's user focus panel for quick testing and high-level actionable feedback:

After cycling through a number of directional ideas, we added polish to a number of concepts to make them more concrete and client (and user) presentable.

The examples below illustrates: firstly, the Virgin.com responsive strategy - how the content was to expand or collapse depending on the device the site is being viewed on; secondly, an early prototype of the website navigation and menu system which was heavily iterated upon through panel-based user testing; and thirdly, a visual site map and user red routes (the user's primary journeys through the Virgin.com site).

Responsive design overview

Responsive design overview

An updated version of the new Virgin.com menu

An updated version of the new Virgin.com menu

The final Virgin.com sitemap

The final Virgin.com sitemap

Once much of the research and initial information architecture had been conducted, finessed, documented and agreed upon, we began fleshing out the layout and overall hierarchical feel of the new Virgin.com.

The new Virgin.com homepage

The new Virgin.com homepage

A 'Richard' (Branson) landing page

A 'Richard' (Branson) landing page

A Virgin company page

A Virgin company page

An article page

An article page

Prior to launch, we also had a very special guest visit us...

Richard Branson popped in to the office to say thanks

Richard Branson popped in to the office to say thanks

He's a smiley fellow

He's a smiley fellow

We made him tea, as you do

We made him tea, as you do

Wireframes - signed off! Can't get a better endorsement than that?

Wireframes - signed off! Can't get a better endorsement than that?

Lastly, here are a few more visual screenshots to demonstrate the final, beautiful design of the new Virgin.com website and it's highly versatile publishing engine: