LearnRe-align in 3 minutes and 59 seconds


writes on June 23, 2011

Mike Kus recently did an unauthorized re-align of innocentdrinks.co.uk which he unveiled at FOWD London. The point of the excercise was to demonstrate the importance of communicating the personality of a company on it’s website – making it more human. Interestingly, after he showed the video, Innocent got in touch with him about possibly working together.

He recorded the entire design process and sped it up to 3 minutes and 59 seconds and I think you’ll like it.

Current site

Screengrab of current site for Innocent Smoothies. Fairly boring without any real personality.

Mike’s re-aligned design

Screenshot of Mike's finished Innocent Smoothie re-design. Large photos of the drink bottles at the top with the words 'delicious smoothies for everyone'


Learning with Treehouse for only 30 minutes a day can teach you the skills needed to land the job that you've been dreaming about.

Get Started

35 Responses to “Re-align in 3 minutes and 59 seconds”

  1. Askalemiforum on July 9, 2011 at 10:29 am said:

    thanks admin good post http://www.netokey.com 😉

  2. “Interestingly, after he showed the video, Innocent got in touch with
    him about possibly working together. ”

    Yes thats exactly what happened…

  3. Love the music! Would be interested to hear how long this took in real life too.

  4. Beautiful design – such character!

    Love it, well done!


  5. Really nice inspiration, thanks!

  6. First off, very well projuiced. Sorry.

    However, after a bit of internal debate in the company I work for, I’d like to play devil’s advocate, if you’ll grant me that privilege.Rather than pick holes in the design of which there are only one or two, I’d like to draw attention to the bigger picture.

    I’d like to argue that the new design is, in fact, not necessarily designed any better than the current design and here’s my reasoning:

    Where’s the intent? I don’t see any framing of a problem. What problems from the current design are you trying to solve.

    Where’s the reasoning? I see decisions being made in the context of the tool, but not within the context of the problem being solved. One decision is being thrown out in place of another. That’s part of design, but what’s missing is the reasoning on why one direction is chosen in place of another (not on granular design elements, mind you, who’d want to be a designer if you had to justify every decision you made).

    Brand extensions.  Innocent have been extending their brand (like Porsche did with their Cayenne or Apple did with music or a phone) and this new design does not reflect this. 

    Whether brand extension is a good idea is not for a designer to decide, at least not in isolation. It’s far bigger than that. Perhaps Innocent should focus on smoothies but maybe they’re on the right track tapping into heathy living and eating and how their other products align with that strategy.

    It’s clearly better visual design (a better grid, for example), but that is only one aspect of design and by focusing on this aspect, we only serve to keep “designers” in their box. Design is how it works, not just how it looks.

    So, I haven’t got an appreciation that there’s a clear process here (apart from talent, which equals magic).

    By posting just a sexy deliverable, I think we only serve to keep designers, even the best ones, in their box. 

    I think we, as designers, need to get better at facilitating design critique and, consequently, defending our own designs (including me, I’m one of the worst offenders here).We need to get better at framing the problem and then articulating how our design solves that problem.Lar

    • Mike Kus on June 27, 2011 at 9:10 pm said:

      Hi Laurence,

      Thanks for you comment.

      This video was part of a presentation I gave at FOWD London and DIBI. My talk was about creating meaningful visual design. In the case of this Innocent realignment, I was demonstrating how we can convey things like a company’s personality and brand attributes through the visual design, and why it’s important. 

      I first showed the Innocent site and went through where I thought it fell down and how it could be improved. I then showed this video and gave reasoning behind all my realignment decisions. 

      I appreciate that that my decision making process isn’t detailed in this post and that it probably would have been helpful. I’d be happy to quickly walk you through my decision making process on a quick Skype call. Email me if you’re interested. My contact details are on mikekus.com

      My second point… and this is an important one; is that that screen shot Ryan has posted of the current Innocent site above isn’t the version I realigned! Innocent realigned their site very shortly after I published my realignment idea. There is a screenshot of their site how it looked a few weeks ago at the time I realigned it on my own blog here http://mikekus.com/archive/realigning-innocent-drinks/



      • Thanks Mike, and the important point is that I wasn’t challenging you, not even your design. Like I said, was missing the context (by not being at your talk nor seeing your blog post – sorry to have missed both).

        Just read your 24ways post too, a great read.

        • Mike Kus on June 27, 2011 at 9:35 pm said:

          Cheers, Laurence.

          You’re definitely right about the context. It doesn’t really make sense without some explanation. 

          Thanks again for your input 🙂

  7. Anonymous on June 27, 2011 at 3:17 pm said:

    I enjoyed this very much – but is it just me – doesn’t that “re-alignment” look extremely familiar?

  8. wow I wonder if he makes decisions on the fly. He did!

  9. So glad you posted this! Love seeing Mike’s decision making process – seeing the mix of planning and serendipity. Funny – I sometimes imagine sites designed by people at his level of skill just emerge fully-formed; consider me now disabused of this ridiculous notion. Also great to catch glimpses of his go-to tools/shapes/textures etc. I foresee a lot of pause/play action in my near future!

  10. BAM ! Very few designer can do such amazing thing and Mike Kus did it perfectly.
    I wonder how many time did he take before to start the video record. I guess he should have taken some time to think about the IA and UI? Well I hope ? If everything has been made on the fly, this designer is a genius.

  11. Love it

    Funny that even when sped up, illustrator still takes ages to load!

  12. SUPERPAO on June 25, 2011 at 3:43 am said:

    this is awesome!! i want to make all my non-design friends and cheapy clients watch this

  13. Anonymous on June 24, 2011 at 9:42 pm said:

    Its great to see the process and workings of the design process like this. 

  14. Awesome work Mike!

    Some dumb feedback:

    Rather than take a picture of the three bottles in a room with a big window though (seen in the refection) – it would have been nice for the bottles to be in somewhat of the same reflective environment as the site is (by the video you can tell early on that Mike wanted the bottles to be in an outside environment and it stayed there).

    Doing this would give more color to the liquid in the bottles, depth, perspective shadows, and a more better environment refection (you’ll need to edit yourself out of the refection) 🙂

    Flippin’ awesome work though…

  15. Jameos on June 24, 2011 at 1:02 pm said:

    Very cool. Although in the video, I couldn’t focus on much else except the word “Heathy”, watching for when the spelling was corrected. 🙂

  16. Woud love to see more details about the techniques, besides its pretty amazing!

  17. It took me roughly 30 second to find this great post, thanks a ton.
    Mango Pure

  18. Anonymous on June 23, 2011 at 7:12 pm said:

    Awsome. Such a good designer.

    I know the video is under 4 mins, but how long did it take in real time?

  19. Not sure in which universe this is a re-align: this is a complete redesign taking a site from dull to awesome!
    But, is it? the new design looks indeed prettier than the existing one and it’s much more “organic” following the essence of innocent drinks: pure fresh fruit. However, Mike removed the blog section, the language selectors, and the social network connections with the exception of Twitter. I agree that these elements are not the focus of a company and the new design is much better and has at least one strong call to action, Find Out More, whereas the older one had none. Nevertheless, it would have been interesting to see how these other elements could be integrated in the design.
    It’s an incredible work though, and of course, you couldn’t expect less coming from the awesome designer Mike Kus is! 😀

  20. Absolutely amazing – and the fact Innocent actually got in touch is awesome. One thing though, the logo on the bottle doesn’t match the new re-aligned ID – #JustSaying 😀 amazing work none the less.

  21. Very interesting to see how a designer does this from start to finish.

  22. that was Awesome!! Great work…

  23. Johnhutch on June 23, 2011 at 3:53 pm said:

    HOW DID HE DO THAT SUNBURST?! He drew the selections on the fly!? I’ve never seen it done like that. 

  24. Great video and music. Where’s the bit where Mike corrects ‘heathy stuff’ 😉

  25. Great work – exhausting to watch – thinking of how long it really took

  26. That was amazing.  It’s great getting a look into the process.  I especially enjoyed seeing some elements being used, then taken away.

    Thanks for the posting the video for us to see.

  27. Love thoe finished product and the clear thought process shown throughout the video

  28. Anonymous on June 23, 2011 at 3:37 pm said:

    Very cool, even though this was more of a redesign than a re-alignment. Awesome end product!

Leave a Reply

You must be logged in to post a comment.

man working on his laptop

Are you ready to start learning?

Learning with Treehouse for only 30 minutes a day can teach you the skills needed to land the job that you've been dreaming about.

Start a Free Trial
woman working on her laptop