virgin2.png

 

Virgin.com

Beyond / 2014

In 2014, I LEAD the IA and design of the new Virgin.com publishing platform

Virgin's new publishing platform was designed around three key audiences: people interested in Travel, Music, Entrepreneurship.

Sub-audiences were also identified: those who wanted to seek Virgin sub-brands (Virgin Mobile, Virgin Atlantic, etc) as well as those who simply wanted to follow Richard Branson.

Using data from the old/existing virgin.com site, and in collaboration with research and content leads, I was keen to ensure the new Virgin.com experience matched the expectations of these audiences.


the ux process

  • In-depth social research to determine key demographics; this fed the personas and the broader content strategy

  • Holistic and landscape benchmarking along with competitor research

  • Initial IA and user flows; red-routes to determine key paths from landing through to content

  • A mobile-first approach; low to high-fidelity wireframes

  • Prototype creation and frequent user testing with Virgin's user focus panel

  • Using a dual-track approach, validated assumptions (designs) were provided to delivery to be fully-designed and built

 Virgin "workflow" personas & high-level user journeys

Virgin "workflow" personas & high-level user journeys

testing to validate assumptions

To validate assumptions, I used navigational card sorting (tree tests and reverse-tree tests) which informed the sitemap, red-routes and broader content approach. I also conducted remote user-testing using whatusersdo.com (using preliminary wire-framed prototypes), as well as in-person qualitative testing using InVision.

 

Initial journeys and IA

For the first round of journeys & preliminary information architecture, I took to the whitewalls, Sharpies and Post-Its in-hand

 The Virgin.com shared space; most of the alignment between project leads and stakeholders happened in here

The Virgin.com shared space; most of the alignment between project leads and stakeholders happened in here

 Initial Virgin,.com wireframes

Initial Virgin,.com wireframes

 The first Virgin.com sitemap; this was eventually turned in to a tree-test and tested with end-audiences

The first Virgin.com sitemap; this was eventually turned in to a tree-test and tested with end-audiences

 More sketched wireframes

More sketched wireframes

 

higher-fidelity IA & user routing

 Responsive design approach: how content expanded/collapsed depending on the view-size of the user agent or device

Responsive design approach: how content expanded/collapsed depending on the view-size of the user agent or device

 A version of the new Virgin.com menu that had validated positively through panel-based user testing

A version of the new Virgin.com menu that had validated positively through panel-based user testing

 The final Virgin.com sitemap. The sitemap also shows user "red routes" (the user's primary journey/s through to important content)

The final Virgin.com sitemap. The sitemap also shows user "red routes" (the user's primary journey/s through to important content)

 

validated concepts moved from discovery to delivery

Designing lean allowed me to put concepts in front of Virgin's user focus panel for quick testing and high-level actionable feedback. Working this way meant the team quickly determined which ideas worked - and which ones didn't.

The concepts that resonated with end-audiences were polished and recorded in to a high-fidelity format, usually for stakeholder presentational purposes with the client and key owners at Virgin.

Once Stakeholder buy-in had been achieved, and after the initial IA had been conducted, finessed, documented and validated, I began fleshing out the layout and overall design of the new Virgin.com for the Delivery stage of the process:

 The new Virgin.com homepage

The new Virgin.com homepage

 Richard Branson's landing page

Richard Branson's landing page

 The company page

The company page

 The article page

The article page

 

Richard branson popped over to meet the team

 Richard Branson visited to say thank you for all the hard work

Richard Branson visited to say thank you for all the hard work

 He's a smiley fellow

He's a smiley fellow

 We made him tea, as you do

We made him tea, as you do

 Fully endorsed; wireframes are signed off

Fully endorsed; wireframes are signed off

Visual design

A collection of visual designs to demonstrate the final, beautiful design of the new Virgin.com website: