Re-align in 3 minutes and 59 seconds

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'

Free Workshops

Watch one of our expert, full-length teaching videos. Choose from either HTML, CSS or Wordpress.

Start learning

Treehouse

Our mission is to bring affordable Technology education to people everywhere, in order to help them achieve their dreams and change the world.

Comments

35 comments on “Re-align in 3 minutes and 59 seconds

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

  2. 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.

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

  4. 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 :-D amazing work none the less.

  5. 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! :D

  6. Awsome. Such a good designer.

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

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

  8. 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…

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

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

  11. 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.

  12. 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!

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

  14. 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

    • 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/

      Cheers,

      Mike.

      • 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.

        • Cheers, Laurence.

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

          Thanks again for your input :)

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

    Yes thats exactly what happened…