Visual & interaction design
Truth be told, no design process is linear. In a textbook world every process fits into a neat diagram like this.
In the real world, it's more like this.
Courtesy: The Anatomy of Web Design
Fresh off the block
And that's precisely what happened with this microsite. The brilliant chaps at Synapse, our digital agency based in Goa, got all charged-up. They spent the weekend working off a half-baked brief based around a bunch of ideas that we had been bouncing off each other.
One of the first mockups of the microsite looked something like this.
While it drew inspiration from the right products & tried to neatly package the ideas that we had bounced off each other, this approach didn't work for mainly two reasons:
- Firstly, it was too dry and didn't evoke the same emotional response as our TVC (this was primarily a TVC microsite). For too long had our brand held the dry, tongue-in-cheek & transactional nature. This campaign was all about re-positioning it smack in the center of an emotional, earthy, & human character. Unfortunately, this approach, while interesting, was still an embodiment of the earlier avataar.
- Secondly, it wasn't immediately captivating. It was expecting the user to spend the time & effort to explore & discover. In my opinion, too much to expect from a microsite with a shelf-life of 4-weeks. What we needed was something that engaged & guided the user into a singular flow.
The "axe job"
With so many ideas on the table saying "yes" is a no-brainer. The tough part is knowing when to say "no".What followed was a ruthless "axe job". We shelved anything that was increasing complexity while not adding significantly to the core campaign objective (engagement with "every trip has a purpose"). After spending another day on the axe-job here's what we narrowed down upon:
- The microsite should guide the users into sharing a travel destination & purpose. With a mandate to engage, and the "vox-populi" nature of the campaign, it was necessary to get the UGC ball rolling – nothing more engaging than getting a user to actually 'do' something.
- Showcasing destinations & purposes as pure text entries would definitely hit a wall with the engagement factor. So we made it more interesting by giving users the ability to upload a photo/video about their trip. Nothing is more engaging that looking at other people's pictures. Ask Facebook – the largest photo sharing website of the world where users spend 3m 48sec on an average per visit (ComScore) looking at others' pictures. (offtopic – did you know that Facebook has long overtaken Flickr as the largest photo sharing website?).
A different perspective
The second cut, looked something like this.
And the accompanying user-flows:
This was a lot better. The large image in the background was serving two purposes. Firstly, it was making the microsite home page immediately engaging and was lending it the campaign's core 'human' element. Secondly, the placement of the form was effective in guiding the user into participating & co-creating. However, there were still some loose ends that needed to be tied:
- I wasn't too happy with the way the image & the overlay text were cuing the user to say something esoteric. We wanted real stories from real people – not something made deliberately interesting because "Heck, I had to say something smart!"
- A couple of required link-offs like a link to the YouTube brand channel, contest details, curated UGC were missing from the home page.
- Necessary Cleartrip branding was missing. The campaign line - "every trip has a purpose" needed to be positioned prominently.
- The user-flow after the home-page needed a lot of work.
Mission Goa
While the microsite design was moving in the right direction it still needed some serious amount of work. With the launch was just 9 days away, I went to Goa with an extremely serious weekend mission (what a contradiction!) – to nail the microsite design. Along with the team at Synapse we went back to the drawing boards and came back with v3 of the microsite design. Here's the home page:
And here's how the design extended to travel purposes submitted by users:
We loved the way the campaign line and the destination/purpose were juxtaposed in the blank band on top of the photograph. However, this approach would not work for longer destinations/purposes. Also, identifying the user who submitted his/her entry could be handled better.
The black band went back to "options hell" and this is what we finalized:
The band could've been thinner – it was covering too much of the photo's real estate, but it was positioning the core campaign elements – where (real destinations), why (real stories), & who (real people) - extremely effectively.
We were fairly happy with the outcome and moved on to designing the user-flows & contest (next post).
Very nice article! Both content wise and style wise..
ReplyDelete