IT'S:UX:TIME

Posted in Design by Tom Harman on March 09, 2010

Following the recent launch of IT’S MY TIME for Benetton, I wanted to give a little insight into our UX process with snippets from our approach and how we’ve tried to apply this thinking to IT’S MY TIME. I’ll start with the obvious…

There are two very distinct phases to UX design:

Pre-launch launch and post-launch infographic

Pre-launch: Prediction

Entirely based on lessons learnt from previous projects, assumptions on traffic, types of user behaviour we’re looking to encourage and the type of community we’re looking to harbour. User testing plays a crucial role in getting early feedback, but it’s impossible to tell exactly what problems may arise or what features are lacking until the site is out in the wild. Crucial structural decisions, such as how users will interact with each other, or editorial content, are made at this stage.

Post-launch: Evolution

The site goes live and 50 people sign up. The next minute there are 5,000 and you’re designing by the seat of your pants, patching up holes as design flaws appear or a clear need for features become apparent. Quick uptake is a great problem to have but can also have technical implications which require further UX consideration. The beauty of designing for the web is the ability to make small changes and tweaks to perfect the user experience. However, there is no going back on big structural decisions, so we have to hope we nailed them before going live. Due to the short length of the project - only 5 weeks - we steered toward a more prediction-heavy design approach. Here’s an overview of what we were hoping to achieve and how that turned out in reality.

Pre-launch: Applying a metaphor

File

As with any design approach, having a theme or a vision you’re working towards helps the smaller details fall into place. From the start, we wanted to incorporate the clock concept but forcing users to upload specific “time themed” content felt like it raised the barrier to entry too high and reduced flexibility too much. So, we needed a more versatile metaphor to align the user experience with. The whole campaign is aimed at re-visioning how Benetton casts its models, so, we decided to use the catalogue as the core element to base user interactions on. We wanted users to create their own pages of what could collectively turn out to be a user-generated catalog. Inspired by sites such as muxtape.com and lookbook.nu, we set about tackling the core problem of allowing exciting personalities to shine through, rather than the site being just a photo collection of “beautiful people”.

1. Encourage Participation

We wanted to give users value for just using the site, rather than relying on social interactions to make it compelling. The vision was to create a physical, printed catalogue made up by the pages (or profiles) of the shortlisted users. We hoped this would provide incentive to create captivating pages rather than simply uploading nice photographs. We hoped the element of tangibility would add depth and imagination to user motivation.

2. Encourage Creativity

Creativity is at the heart of what Benetton were looking for in their models. The catalogue page metaphor fitted perfectly here, providing a blank canvas for more motivated users to take advantage of. They could upload photos of videos of various elements of their lives and personality to create a page that really shines. At the same time, we weren’t excluding the “beautiful but boring”, who simply want to upload their modelling shots and not return to the site until the finalists are announced.

3. Allow for Flexibility

The design and build schedule was very tight and the competition structure fairly loose, so we needed to make progress but still have enough room to maneuver if there were legal issues or problems that arose from user testing. This was particularly important when competition rules kept fluctuating betwen “Users must upload 4 photos and a video” to “Users can upload as much or as little as they want and shouldn’t be limited”.

At launch

After refinement and user testing, we felt we had a strong solution so we started applying visual design. The structure was flexible enough to incorporate last minute user testing feedback, such as going from 3 votes to 20 votes and only requiring users upload 1 image or video. Here’s how the design of the profile page developed from a wireframe and an example of how we were hoping users would get creative with their profile:

IMT Wireframe

IMT Vision

Post launch

The site received tremendous traffic. We saw over a million comments between users in the first week alone. The homepage was designed to highlight those who had recently signed up, cultivating a lovely “welcoming” interaction where existing users would “meet and greet” new users. Unfortunately, the early success of the site lead to a couple of UX problems:

Capacity issues

The sheer volume of users uploading photos meant our servers couldn’t keep up. Thanks to some excellent quick thinking by the tech team, we rapidly increased capacity, but we also required a bunch of new UI assets for ‘processing’ avatars and to encourage users to upload smaller files along with other small tweaks to the core user flows.

Comment spam

After about day 3, users started to realise how to play the game and the notion of “vote for vote” began. This is when a user posts a comment saying “Vote for me and I’ll vote for you back”, which is OK once in a while, but new users would get a barrage of 20-40 comments within half an hour of signing up. Users would copy and paste this to all profiles they could find in order to obtain the all-powerful votes. Although we didn’t make any changes to the design, we limited users to one comment every 60 seconds and encouraged the editorial team to make a big effort to highlight users who were playing the game fairly.

Conclusion

Despite a few minor setbacks, IT’S MY TIME has been a great success. The catalogue concept mapped very neatly onto an online environment. The interactions and relationships between users have been fascinating to watch as they evolved. My favourite thing about this project has been seeing how many people got creative with the profile format. In a tribute to their resourcefulness I’ll leave you with these 3 masterpieces.

Hanu

Hanul Profile

Bas

Bas Profile

Sarah the Unicorn

File-5


Catalogue image by cod_gabriel

Special thanks to Rockie Nolan for allowing us to use her fantastic images in our profile mockups.

<Back to the blog

Newsletter

Get news about our projects, thinking and talks.