09 June 2011

56

Realigning Innocent drinks

mikekus

I’ve recently given a talk a called ‘Designing for Humans’.  The talk explores the concept of creating meaningful visual design that partners with simple, easy to use functionality in order to create an overall improved user experience.

As part of the talk I realigned the design of the Innocent homepage. I say realigned very specifically, as this is not a redesign. I’ve simply realigned the content of the current homepage. I didn’t speak to Innocent beforehand, so the realignment is based purely on my knowledge and experience of the Innocent products and brand. (I didn’t mean for that bit to sound like a disclaimer!).

Innocent are a fun and creative company with a strong and recognisable brand. They have a lust for life, promote healthy living and are environmentally conscious. These values, brand attributes and personality don’t come across on their current site. I had a go at realigning their homepage to better reflect the Innocent brand.

If you haven’t heard my talk, I started covering this subject matter in my recent 24Ways article.

Anyway, what I really wanted to share with you is this time-lapse video I made (with the help of Greg Annandale) of me realigning the homepage design. Check it out below. Music for the film was written and performed by Tony Kus.

Below is a screenshot the realigned Innocent homepage and the below that the current Innocent homepage that I worked from.

innocent realignment

innocent current site design

56 Comments

  1. Andy

    09 June 2011 | 10:20 am

    Just saw this at DIBI – was truly awe inspiring!

  2. Benjamin Reid

    09 June 2011 | 10:21 am

    You did a really nice job of the “realignment” Mike. I hope that Innocent might take you up on a bit of design work for ‘em.

  3. Iggy Hammick

    09 June 2011 | 10:24 am

    Brilliant! Fascinating seeing it all come together from scratch. I sat there grinning like an idiot all the way through it! Thanks for sharing!

  4. Alexander Horre

    09 June 2011 | 10:27 am

    Mike,

    Your slides and video at DIBI was insane; backed up by Zeldman saying your work in low-fidelity art work is fucking fantastic.

  5. Emily Davis

    09 June 2011 | 10:28 am

    Hi Mike,

    I didn’t hear your talk but thanks for sharing the realignment here.

    Innocent’s website hasn’t really changed in about 5 years from what I remember. And web design has moved on a lot. The current box design reflects this whereas your design entices you below the fold and is far more modern as a result.

    I also think your use of real estate placing the products as prominently as you have, is a great way for Innocent to demonstrate pride in their products.

    Interestingly, the social media icons on their current site don’t work either.

    Emily

  6. Phil

    09 June 2011 | 10:35 am

    Pretty awesome time-lapse video, great work as always Mike, and very inspiring! :-)

    Can I ask you what font is used in “the innocent mini movies competition”?

  7. Paul Randall

    09 June 2011 | 10:42 am

    Love the time-lapse video, it’s really interesting to see the design process like that and the decisions that were being taken as you were working.

  8. mikekus

    09 June 2011 | 10:44 am

    Hi Phil,

    That font is called Komika Axis

    Cheers,

    Mike.

  9. Dylan Purdy

    09 June 2011 | 10:44 am

    Fascinating!! Great work Mike… Surely your phone will ring for the ‘official’ job now :)

  10. Paul Sprangers

    09 June 2011 | 11:04 am

    Wow Mike! Great design. Unfortunately I didn’t see your talk, but the video is great. Video’s like this make me want to get back into Photoshop right now, so please keep them coming!

    I love the splashes around the big type, it really draws the eye to the text.

  11. Matthew Ellis

    09 June 2011 | 11:13 am

    This is the nuts! You should do more of these.

  12. Avangelist

    09 June 2011 | 11:15 am

    This was stunning yesterday and thank you for responding to my questions.

    The thought process behind assets was eye opening.

  13. Rob Hampson

    09 June 2011 | 12:07 pm

    Awesome design and great music too!

  14. Phil

    09 June 2011 | 12:28 pm

    Thank you for the quick replay! :-)

  15. Jack

    09 June 2011 | 3:59 pm

    Saw this and really enjoyed it at FOWD’11. Thanks!

  16. Dave

    09 June 2011 | 4:48 pm

    Very interesting.
    The music fits really nicely too.

  17. DIBI (Design It. Build It.) – 2011 | | Facio Design

    09 June 2011 | 5:20 pm

    [...] I really enjoyed Mike’s talk on ‘Designing for Humans’, especially he’s time-lapse screencast of how he’d realign the innocent smoothies website. Not only was it good to see what [...]

  18. stew

    09 June 2011 | 8:11 pm

    Lovely one Mike, oddly seems more ‘on message’ than the existing one.

  19. Bruno Marinho

    09 June 2011 | 8:13 pm

    Awesome work man! thanks for sharing!

  20. mikekus

    09 June 2011 | 10:32 pm

    Cheers Stew :)

  21. mikekus

    09 June 2011 | 10:39 pm

    Thanks for your comments, everyone.
    Cheers :)

  22. Paul Sprangers

    10 June 2011 | 10:17 am

    I was wondering how you came up with the concept for this design. Did you sketch out some ideas up front or was it just real-time freestyling?

  23. mikekus

    10 June 2011 | 5:52 pm

    @Paul Sprangers

    I sketched out some rough ideas and then went into Photoshop.

  24. Design It Build It - DIBI Conference 2011 Notes | Call me stupid, but...

    10 June 2011 | 9:03 pm

    [...] for me was the realigning of the Innocent smoothies website design by Mike Kus – the video on his blog is well worth a look (or [...]

  25. Heather

    10 June 2011 | 9:15 pm

    Loved this video @DIBI this year. Was expecting a huge round of applause as the video ended, but… nothing. Definitely the ‘cat’s pyjamas’ as far as I’m concerned, though.

    Do you know how long the whole redesign process actually took?

  26. Matilda

    11 June 2011 | 10:16 am

    Great to watch and a much better design than the original I had to watch it twice to be sure… In the video it says heathy stuff ;-)

  27. John

    11 June 2011 | 2:18 pm

    It is such a cleaner and brighter looking design. Good job!

  28. Christina

    13 June 2011 | 1:42 pm

    Beautiful and inspiring work. I love the idea of showing the process. I’ve shared this with my clients to show them how just designing a website is not as easy as it looks. Lots of iterations, movement of elements, and changing fonts, colors, and textures really go into the design process.

  29. Matt

    14 June 2011 | 5:39 pm

    Great work. Great music.

  30. Eva

    15 June 2011 | 12:53 pm

    Absolutely awesome!

  31. Oli

    15 June 2011 | 2:36 pm

    Awesome video.

    I find it interesting how you can seem to just iterate ideas right in Photoshop without wire-framing. I have always been told that there is something wrong with doing that, but I find if you just do something, you will end up with something. if that makes sense.

  32. Ben

    22 June 2011 | 1:34 pm

    Isn’t this designing on spec?

  33. Craig

    22 June 2011 | 1:42 pm

    Glad to see it’s not just my illustrator that takes 6 years to open. I thought the video had stopped.

    Great work, looks really nice.

  34. Sean

    22 June 2011 | 2:07 pm

    Inspiring stuff for sure

  35. Michael

    22 June 2011 | 2:40 pm

    … great skills, inspiring work (& awesome music)!

  36. Lawrence

    22 June 2011 | 4:55 pm

    Just wanted to say I love this and your work in general is truly excellent

  37. hixster

    23 June 2011 | 1:01 am

    Nice work – did you get the call yet? :-p

  38. Timelapse or tutorial: videos of designers designing | Drawar

    27 June 2011 | 5:10 am

    [...] Mike talks about this video on his blog here. [...]

  39. Web Design Weekly

    02 July 2011 | 9:30 am

    [...] Realigning Innocent Drinks Mike Kus realigning the homepage of Innocent Drinks, documented with a great time-lapse video. [...]

  40. João

    04 July 2011 | 3:47 pm

    You´re in the final to become my favorite designer so far…

    GOOD JOB!

    Regards, João (from Brazil)

  41. Ignazio

    19 July 2011 | 5:43 pm

    Incredible work!
    I’m using on Zerply the theme you designed ;)

  42. Khalid

    26 July 2011 | 11:01 am

    Really a great job! Congra.
    The best innovative Design:-)
    Regards, Khalid

  43. Trent Walton

    27 July 2011 | 9:50 pm

    Fantastic work! I love the way you lay out a page.

  44. mikekus

    27 July 2011 | 10:02 pm

    Thanks, Trent! :)

  45. Ben

    29 July 2011 | 1:59 pm

    Amazing work, very inspiring, and a 100% improvement on their current site can’t wait to see it live!

  46. Pedro

    30 July 2011 | 5:23 pm

    Nah that’s shit, haha, amazing work as usual man. Very inspiring.

  47. Fabian

    06 August 2011 | 6:29 am

    Thx Mike for a first class lesson on being “On brand”. The video blog of the work involved was amazing.

  48. Jeanette Clement

    09 August 2011 | 11:48 am

    Definitely my favourite designer :) awesome style. How long did it take in real time?

  49. The Anatomy of an Effective Homepage | Bitmag

    17 August 2011 | 4:42 pm

    [...] cartons. Mike’s perception of the brand does not align with his expectations so he attempted to realign the design to suit how the Innocent design could convey more [...]

  50. al-jerreau

    21 September 2011 | 5:48 pm

    Awesome work man!!! I’m really a big fan of your work, even your photos are super. You are really talented, and an inspiration to me as a junior web designer

  51. mike

    13 October 2011 | 12:26 pm

    Mike, I love your redesign. Can I ask what software you use for creating the animation? Apologies if it’s somewhere on your blog.

    Mike

  52. Laura Williams

    19 October 2011 | 12:20 pm

    This is really inspiring, what a transformation! Great job Mike.

  53. James

    21 October 2011 | 6:08 pm

    You nailed this buddy. Watched this and listened to Work/Life balance podcast last night whilst working on a project.

    The design is superb as always, what I love about this vid is it really captures the sheer time and effort required to really ‘design’ something properly. Every-time a client pulls out the “Just whack something together, shouldn’t take 5 mins”, I’ll point them to this video!!! (3:58 actually ;-P)

  54. Pick Yourself | The Story of Telling

    10 November 2011 | 11:22 pm

    [...] alone.If you want to work with a dream client, find a way to show them what you could do for them. Mike Kus did exactly that when he realigned the Innocent drinks homepage and posted the results on his blog. He may not get [...]

  55. Surrey Builders

    30 April 2013 | 2:30 pm

    Innocent drinks taste amazing, they are the real deal.

  56. web redesign | dart120nvc

    07 May 2013 | 8:33 pm

    [...] http://mikekus.com/archive/realigning-innocent-drinks/ Share this:TwitterFacebookLike this:Like Loading… Video | This entry was posted in Uncategorized. Bookmark the permalink. ← Karen Kavett: Grid [...]

Leave a Comment