Navigation

The Virgin Atlantic Airways Blog: A Case Study

Marketing, Web Design, Web Development | Apr 15, 2010

Working with a company as large as Virgin Atlantic was something of a dream come true for me. I it’s something that a lot of web designers aspire to.

Over the last few months, I was fortunate enough to be given the opportunity to fulfill this dream.

I was about to write this post up over on my blog but Walter very kindly invited me to share this case study with the much larger audience here on Webdesigner Depot and across the Smashing Network.

I’m no Elliot Jay Stocks and I certainly don’t claim to be, so when Virgin Atlantic got in touch with me back in November I was surprised, humbled and extremely enthusiastic at the prospect of working with the company on a new blog for the “vtravelled” website.

Many people have since asked me why Virgin chose to work with me in particular. The answer is that they found me on Twitter, enjoyed my blog posts and, most importantly, liked my work. This won’t end the debate about the “value of Twitter” for some people but it certainly has without a shadow of a doubt for me.

 

The Beginning

In November 2009 vtravelled’s editor, Maxine Sheppard, got in touch to ask if I would be available to design and develop a complete blog for the vtravelled website (Virgin’s new online travel community and web app). Meetings were arranged and after a week or so I got the green light for the project.

I’ve done some work for big companies before, including Ubisoft, but this was really my first time getting into the corporate culture of the industry. To be totally honest it’s really not as scary as people make it out to be, though I can imagine that there is some variation in people’s experiences.

Virgin Atlantic has managed to put together a truly great team at vtravelled; as a result, not only was the company very easy to work with but it was great fun, too.

Virgin Atlantic HQ

The building is as wide as it is long, it even has its own set of traffic lights.

Bizarrely, I think the most daunting (perhaps awe-inspiring) part of the whole process was going to Virgin Atlantic’s headquarters for meetings.

Something about driving up to a building that can (and does) physically contain both offices and actual aeroplanes is pretty special. The entrance to the building contains the company’s own gift store, and after a long walk you end up in the atrium, which is directly adjacent to large sections of Boeing aircraft that are used to train cabin crew.

At the first meeting I asked the head of vtravelled, Lysette Gauna, (as a joke) if all of the design awards lining the vtravelled office were hers. The answer was, “Yes, but I keep most of them at home.” D’oh! Time to be really afraid.

 

The Brief

VTravelled Offices

The vtravelled offices are bright and creative and the whole back wall is a chalk board!

The brief was fairly straightforward: vtravelled is a big web application and community for travel lovers but it’s still being actively developed. The team needed a way to put out editorial content and engage with users on social networks. A blog was the obvious answer.

I wanted to make sure that I really nailed the direction it was looking to go in on the design side, so I came up with a slightly different implementation of using mood boards; I called them Moo’d cards. The idea was simple but effective: I took 100 samples of great design work that I’d collected and printed them on 100 MiniCards from Moo.com.

Mood Cards

Some of the Moo’d cards that were used.

We looked through all of them during the kick-off meeting and eight cards were selected to represent the sort of style that the team was looking for to appeal to vtravelled’s user base.

If you haven’t tried this technique, I highly recommend it; It’s a great way to discover client expectations of design. I’ve since released all the source files for the Moo’d cards as an OpenSource project, including web and iPhone versions.

Once we established an overall style (minimalist, in keeping with vtravelled branding but creative and different from the main website) and an overall direction (a magazine-style blog, with plenty of avenues for user interaction), it was up to me to get started.

 

The Design Process

The design process when working with a large company is pretty similar to any other: starting with wireframes, then developing mockups.

The main difference comes at the feedback stage: two or three people had to review and sign off at each stage, at which point they took much larger issues into consideration. For example, Virgin is particularly sensitive to how its brand is portrayed. Anything the company does has to fit in with its morals, standards and qualities.

After establishing the structure of the website, it was time to move on to actually creating the design.

This was about a 30-hour process (for the home page) which moved through several interesting phases leading up to the end result. Luckily, in anticipation of writing this post, I recorded a screencast of almost every minute of design time and compressed it into a three-minute video.

All in all, the design process took place over about six weeks.

This video was created with ScreenFlick ($25) for Mac OS X, recorded at 1 frame per second, and edited in iMovie.

 

The Development Process

Once final-signoff for the design had been achieved, the development process began and lasted approximately another six weeks.

Virgin Atlantic uses IE6 in its corporate offices, so this was a big consideration in developing the front end. The website had to degrade gracefully enough to accommodate this browser so that it was at the very least functional. Once again, because of the great team at vtravelled, I was also permitted to use progressive enhancements with CSS3 for newer browsers.

Turning the front-end code into a custom WordPress theme was the next step. There were a few special considerations here to make the website as powerful as possible.

I started with the WooThemes “WooFramework” to allow a high level of back-end customization but, in the end, it was modified and customized so much that the vtravelled blog pretty much ended up with its own custom system. It was important to take into consideration that a lot of people would be administrating the blog, so it needed to be as flexible as possible in all areas.

Finally, the theme needed strong pagination and light-hearted error messages on the 404 and search pages that would reflect the friendly nature of the brand.

 

A Little Trickle Tweet

TrickleTweet Sketch

The first sketch of the Trickle Tweet plugin.

I’m pretty handy when it comes to writing PHP for WordPress but when I need something totally custom built, there’s only one guy I turn to: my partner in crime, Japh Thomson.

During the design phase, I had sketched out an idea during a meeting that went over really well with the vtravelled team. The idea was to use the Helvetica-Man branding that existed throughout the vtravelled website and social media profiles for a stream of live conversation about travel.

TrickleTweet Final

The final version of the TrickleTweet plugin.

Japh had already developed a piece of code with the Twitter API, called Trickle Tweet which allows you to search for any term on Twitter and view a live (up-to-the-second) stream of the latest mentions of it.

I was permitted to sub-contract Japh and he was commissioned to modify his script to become a completely custom WordPress plugin for vtravelled. This has turned out to really be the piece-de-resistance of the website.

 

Launch and Conclusion

Launching a website for a big company is a little different than a normal launch. I had to liase with vtravelled’s development company fo proper server settings and to remove password protection to the sub-domain at the right time.

I had to liase with the advertising company to ensure that the right ad codes were installed, and I had to go through a mad 24-hour period of beta-testing, bug-fixing and reviewing performance.

In the end, we soft-launched the blog at about mid-day on Tuesday and started the announcements and press releases a few hours later. Fingers crossed, nothing has gone wrong so far and the website has gotten a very positive response on Twitter, which was reflected in the blog’s day-one traffic levels and some other features around the web.

As with any website, there are improvements can be made and features will develop over time, but I’m pretty pleased with how v1.0 of the vtravelled blog has turned out.

Working with Virgin Atlantic has been one of the absolute highlights of my career so far, and I’m very pleased to be working with the company again at the moment on a few other pieces of design work.

I still suck at estimating time though; we initially thought the whole blog design and build would take four weeks!

 

Credits


Written exclusively for WDD by John O’Nolan.

Please share your comments about the design and the process below…

Share this post
Comments (no login required)
  • http://www.webanddesigners.com Webanddesigners

    Indeed helpful and detail case study.

  • http://www.pbwebdev.com.au/blog Peter

    That was fantastic to see how someone else puts together a site and to find out that its very similar to our own.

  • http://twitter.com/sammidnight Sergei Tatarinov

    Good job you did, and thanks for an interesting article!
    I’ve never heard of Moo’d cards, they will definitely help me.. Thanks for mentioning them.

  • http://bealitao.carbonmade.com/ Bea Litao

    Great article. I like your idea of using Moo’d cards as well. My want to do the same too.

    • http://www.artistino.com/ Stijn Mertens

      Very interesting read, thanks for the insight in your work John.

      Love the blog btw!

  • DaveK

    Great Idea the moo’d cards, much more visual approach to narrowing down design choices, very clever.

    Very interesting to see how large scale companies deal with their web presence.

  • http://designlovr.com ximi

    Great and inspiring case study! You did a truly great job on this web site and I especially liked it that you added a short video summary of your design process.

    I actually liked version with the blue header (and faded dots) a lot as well.

    I just headed over to the site and the end result is amazing, great idea with the twitter stream as well!

    Two minor details: I think the slideshow switches a little bit too fast. I could finish reading the content just like that, I would add one more second.
    I’m not a big fan of the read more buttons that break out of the box (I’m sure you put careful consideration into this), I would have preferred them inside, especially because they are very simple and plain compared to the box, which is styled a little more (especially the shadow/no-shadow contrast of the two irritates me).
    These are just very weak, minor points and reflect my personal opinion.

    Thanks again for sharing this! I wish the web would be full with this kind of posts.

  • http://kozeyar.com kozeyar

    lovely! got many things for me

    Cheers!

  • http://web-esse.ru/ Snegurka

    Write the process on video is a good idea.

  • Kangai

    WOW!
    This is a great article and the vtravelled blog is amazing.

    I’m not a web designer, but I’m really inspired. Keep up the great work!

  • http://minute44.com Dan

    Great article! And, more importantly a really great site! It must have been incredible to work on such a high profile job (and I bet your bank manager is equally pleased ;)) thanks for sharing the experience with us.

    My favourite part of the site has to be the trickling twitter feed. It’s beautifully executed. I wouldn’t mind seeing a tutorial on how to create something like that in the future.

    Congrats, John.

  • http://satellitedev.com/ Japh

    Thanks for sharing your process, mate! (And for the mention, of course!)

    I love watching that time-lapse design video. Never gets old :)

  • http://twitter.com/laasbloemhof Laas

    Thanks, inspiring article and great fun to read. Pretty website too!

  • http://www.creativeglo.co.uk James

    Great article. Estimating project time is often problematical. Was there creep in the scope, or was it a case of everything took longer than expected? Are you able to comment? If so, do you have any insights you can share with regard to handling the relationship with the client regard to the extended timelines?

    • http://john.onolan.org JohnONolan

      Hi James,

      There wasn’t any scope creep at all (thankfully), it just took a little while to go through the feedback process and get various iterations of the design signed off. With such a large company everyone has someone else to answer to, and everyone involved has a different (very busy) schedule. Most of the time-lapse was from gaps in work waiting to be given the go-ahead to move forwards.

      I’m not complaining by any means – it’s just one of those things you learn along the way. I always forget just how long to allow for bug fixing too – and that one is entirely my fault!

      Cheers!

      John

      • http://www.creativeglo.co.uk james

        John, thanks for the reply, very much appreciated. You touch on two things which are often not understood until they are encountered. Bigger companies tend to have more interested parties, and consequently longer feedback times. As you say, everyone is busy, It’s one of those things. And, as for those darn bugs, they have no regard for timetables.

  • http://ricknunn.com Rick Nunn

    I think this is one of my favourite new sites for this year, it’s really nice to see how similar your processes are to my own.

    Keep it up dude, or I will kill your family.

  • http://www.twitter.com/markjames19 Mark

    Great job John. Just goes to show how effective Twitter can be!

  • http://www.lautr.com Hannes

    Great Article, its always good to see that even a big company like Virgin can make something nice without 2 Years of working Time and 25 departments to approve :D I’m somewhat jealous!

  • http://rawkes.com Rob Hawkes

    This is a beautiful overview of your workflow John, I really enjoyed reading it. I’m kinda glad you never showed me the website until launch day as I really got to see it for all the effort and skill that had gone into it, rather than seeing it slowly change over the weeks. Still, after visiting the site myself and having a look around I can say you’ve done a great job. You should be proud! =D

  • http://narenbimal.blogspot.com Narendra

    really a nice one….especially the use of moo’d boards…

  • http://www.damianherrington.co.uk Damian Herrington

    Excellent in-site and video John!

  • http://yourdesign.co.za Michael Montgomery

    I can carry on about how great this s ite is you created.

    However what I really want to do is thank you (John O’Nolan), for having the courage to take on a project such as this and pull it off with flying colors :::

    This gives the “smaller” designer the hope & confidence that premium work is for everyone willing to commit :::

    THX

    • http://john.onolan.org JohnONolan

      Thanks so much for the kind words Michael :) I really appreciate it

  • http://www.rachilli.co.uk Rachel

    I was so happy for you when I found out you were working for vtravelled! You’ve done yourself proud and built a great looking blog :) Brilliant article, it’s great to see your in depth process. I’m sure it will be useful for so many people – it already has been for me! Love, love, love the idea of the Moo’d cards. It’s a great way to set out lots of ideas and like you say, get a good idea of what the client is after. Thanks again for such a good read!

  • melissa hall

    Great work. What are the copyright issues regarding the work shown on the moo cards? I assume it was not all your previous projects but work found on the net.

    • http://john.onolan.org JohnONolan

      Hi Melissa, you can find all the licensing information on the release page for the Moo’d cards linked in the main post above. This includes information with regards to the copyrights of the images used.

      Thanks for your comment!

  • http://ukwelii.wordpress.com Mark Kiagwa

    This is an impressive study. Thanks for sharing. Creative Direction on projects especially web is always great and interesting to see the lessons and approaches here. Great find.

  • http://www.heckhausen.net Tim Heckhausen

    Great case study. Was fun and interesting to read.

  • http://www.home-theatre-systems.net HD Guy

    The end result looks fantastic!

  • http://www.virginhealthmiles.com Vinny Brown

    Seems that Virgin companies share the ‘awesome place to work’ thing in common. I’m a developer at Virgin Healthmiles and love the up-beat, forward-thinking culture here.

  • http://www.thatdeadpixel.com Mike

    Awesome read and I really liked the video. Did Virgin give you specific content they wanted in the site, and you then used that information during creating the layouts? Or were you kind of “making up” potential content sections. Does that make sense?

    • http://john.onolan.org JohnONolan

      Hi Mike – Thanks for commenting, and great question too! Virgin had a very specific idea of the type of content they wanted (travel related editorial, for the most part), and they also provided me with a sample article. It’s a *fairly* standard blog in terms of content, so I didn’t have too much trouble working along those lines!

  • http://qdomen.ru Alan

    Indeed helpful and detail case study.

  • http://jobberies.com Nagobonar

    congrats for this job

  • http://www.jordanwalker.net Jordan Walker

    Great case study, that project should be a successful launch.

  • http://www.goofywildcat.com goofydg1

    nice job.

  • http://xoyaz.com coyr

    Great case study. Really helpful to see all your design process.

  • http://parveenverma.com Parveen Verma

    Indeed a great case study and Moo’d Cards are a plus (will definitely be benefited). After you and other team members investing a lot of time and creativity to make this project happen, it was a little disappointing to see wordpress naked skin underneath on post comment error page.

    • http://john.onolan.org JohnONolan

      Hi Parveen, could you link me to the page which you’re referring to? I’d love to improve it if I’ve missed out on styling something!

  • http://www.webdesigner-michigan.com Kevin Mist

    Wow.. this is a surprise!

    “Virgin Atlantic use IE6 in its corporate offices”

    I have always thought of Virgin as being a cutting edge corp.. It is large companies like these that are holding us back from moving past this horrific piece of software…

    Nice article. It is always interesting to read how others work their process.

    Kevin

    • http://john.onolan.org JohnONolan

      Hi Kevin, totally support your sentiments but there’s one thing you have to keep in mind on this one! Most corps aren’t using IE6 out of choice, it’s because their hardware can’t support the OS upgrade required to be able to run IE7/8. Upgrading every computer for every Virgin office in the world would be veeerry pricey.

      I’ve no doubt that it will happen one day, but until then… graceful degradation FTW! ;)

  • http://www.estevaomascarenhas.com Estevão Mascarenhas

    Great job. Excellent work!
    Very interesting case study.

  • http://www.unionroom.com Union Room

    This is by far my favourite kind of post. Especially when it’s from someone doing work of such high quality.

    Great stuff!

  • http://www.freelancedesign.cz stope

    You’re missing a background for “Submit Comment” below the articles… It’s kinda funny compared to the “epic” scale of the no-bug-part of the web =)

    • http://john.onolan.org JohnONolan

      Hi Stope, I’m sure there are a couple of little things that can still be improved on the site – could you send me a screenshot of what you’re talking about? john [at] onolan dot org

      Thanks for letting me know!

  • http://helloimtom.com Tom Sinclair

    Great read and inspiring as ever John.

    Saw the Moo cards post a while back on your personal blog and it’s good to see it in the real world. Definitely worth thinking about in the future when trying to see what a client likes/dislikes design wise.

    I’m sure you’ll get some great clients off the back of this one. You’re on a slippery slope of no social life and too much work :p

  • http://www.wefunction.com Liam McKay

    So many great ideas here, and well executed. I love the Moo cards for the mood board – Genius! Also really enjoyed watching the video, nice to see things progressing so beautifully. Top marks!

  • http://www.cooljaz124.com cooljaz124

    Great , very interesting case study.

  • http://www.strawberrysoup.co.uk Neil Dennis

    Well done John – a great article and account of your working process. We continue to enjoy your openness and design work!

  • http://www.sennza.com.au/ Bronson

    Wow! That an amazing post. I haven’t seen such a comprehensive blog post on the design process in years!

    Thank you so much for sharing this with us! The screencast was amazing too!

  • http://www.burning.me Mark Cossey

    This is a great post and I really enjoyed reading it. The “Virgin Atlantic use IE6 in its corporate offices, so this was a big consideration in developing the front end.” comment made me smile and have come across similar scenarios myself. Always a challenge.

    Well done.

  • Greg Johnson

    Congratulations John!

    Here’s to your continued success mate!

    As a UX director, I think you did an amazing job for someone who refers to them-self as a web designer. You did a great job with this one and I look forward to seeing more of your work in the future.

    Cheers!

    • http://john.onolan.org JohnONolan

      Thanks for the kind words Greg – really appreciate it! :)

  • http://warstwy.com adone

    Amazing case study. Amazing post.

  • Scott James

    Hi John

    Great post. Always a joy to see other designers work flow. Could you tell me what program you use when creating your wireframes?

    Thanks :)

    • http://john.onolan.org JohnONolan

      It’s all photoshop :)

  • http://creative-le.com Dan Le

    Great case study. I’m glad to know that big companies aren’t such a big pushover or strain to work with. Once I saw that mood cards, I already said in my mind that I’m going to make something like that. Thanks for the ideas, and congratulations on the project.

  • http://www.mattshawdesign.co.uk Matt Shaw

    Great post! Very interesting to see how a project like this comes together – and interesting to see how you work also!

  • http://www.alsupipe.com Oyun

    Catching things like this is why I keep reading this site, thanks.

  • D

    Not a big fan of the design. Sorry. The black borders feel out of place/too contrasty. Some are 10px-15px some are 1px. No consistency/flow. The shadows feel a little dirty. The rounded corners are ok but feel a little too rounded. I don’t think there’s enough visual hierarchy overall. There’s too much stuff to figure out/pay attention to when I first land on the homepage…It feels like there are 2 main nav areas – the black stuff up top and the white nav bar. All the red read more links feel strange being moved down on every sub post type area. Why? The logo has a weird quarter space between the 2 words – weird. With two very diff weights def not needed.

    Overall its much better than 99% any other designer would do but feels somewhat amateurish and not polished up. Feel like its trying to be an ultra cool css3 blog rather than something really nice and usable.

    • http://john.onolan.org JohnONolan

      Hi D, thanks very much for taking the time to leave that feedback. I appreciate your comments and will take them into consideration for future designs.

  • http://www.sametomorrow.com/blog adam

    Nice write up and article.

  • http://doublejawsurgery.com/ Graham

    Excellent article! Sounds like you learned a lot. I bet you’ll have a lifetime of opportunity with this project in your portfolio!

  • http://www.junglecreative.com Ray

    Great write up as per usual John, always enjoy your posts.

    Extra congrats on landing such a big fish as a client, is this you gonna be hiking your basic rates up a bit now and proclaiming “I’ve worked with Virgin Atlantic”.

    Elliot Jay aint no John O’Nolan

    :)

  • Santosh

    Mood Cards idea is inspiring. The same process we (I) usually follow like showing 4-5 websites to client asking which one they like most but surprised to know that there is a systematic approach called Mood Cards.

  • http://www.yahoo.com Dee

    Why am I the only one who isn’t very impressed with this….

    • http://satellitedev.com/ Japh

      @Dee: You probably aren’t. Different people are impressed by different things. Also, most people like to encourage others, so they prefer to respond with positive comments.

    • Greg Johnson

      Professional envy? Lack of appreciation? An extremely large chip on your shoulder? You’re not the type of person who is impressed by hard work, and open mind and excellent execution? Who knows, you’re the only one that can answer your own rhetorical question.

      I think at some point in your life and career as an artist, and make no mistake that everyone from graphic design to user experience to back-end development is an artist, you reach a point where you can appreciate the work of someone else whether it’s your cup of tea or not.

      It’s easy to nitpick, but at the end of the day you really only need to provide a solution to the problem. In this case, I can sum it up with a simple question and answer:

      Did John achieve the goal he and Virgin Atlantic set out to achieve?
      Yes.

      We all have our naysayers John, look at the majority of these replies. You did a great job.

  • http://contempographicdesign.com Chris Robinson

    Nice work, dig the “trickle tweet” functionality

  • http://www.bluetigerdesign.com Matthew

    Wow awesome work John! Your a real inspiration to young designers such as myself. BTW whats that song called in the video? cheers, matt

    • http://john.onolan.org JohnONolan

      Hi Matt, Thanks for the kind words! The song is Brigade ‘Sink Sink Swim’ from the album ‘Come Morning We Fight’

  • http://www.metaversetechnolabs.com/ Jigar

    Good post :)

  • http://www.travelblather.com Jeremy Head

    I LOVE that Trickletweet thing… brilliant

  • http://stevepolacek.com Steve Polacek

    Thanks for sharing this peek under the hood. As a fellow-freelancer, it’s always insightful to see how others work. The time-lapse video is very cool. I love the moo’d cards and the fact you released them as open source, which lead me to your site with more great stuff to check out. Your open and personal approach to doing business is fresh and relevant. I’m a fan. It makes me want to find the time to share the behind-the-scenes stuff as well. Great work John. Keep fighting the good fight.

  • http://twitter.com/litmusonline Litmusonline

    You did outstanding job which encouraged to making unique design with concept and vision too. I really admire your work. :)

  • http://faviconservice.com FaviconService

    i love this design, John. Its fantastic! very well made. with great attention to details! If you’ll need favicon – just ask!

  • http://www.pixelfish.co.uk Adam

    Nice work! i love seeing a project from concept to completion.