Re-align in 3 minutes and 59 seconds

Treehouse●Inspiration 35 Comments

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'

Start Learning Web Design, Coding, How To Start A Business & More for Free!

Learn More

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

  • http://twitter.com/edokoa edokoa

    Pure genius!

  • Anonymous

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

  • http://ajleon.me ajleon

    That is awesome!

  • http://twitter.com/dave_sherratt Dave Sherratt

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

  • Kory

    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.

  • http://twitter.com/rachelortiz Rachel Ortiz

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

  • http://twitter.com/simonreed Simon Reed

    Great video and music. Where’s the bit where Mike corrects ‘heathy stuff’ ;-)

  • Johnhutch

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

  • http://twitter.com/BillSKenney Bill S Kenney

    that was Awesome!! Great work…

  • http://en-gb.facebook.com/people/Paul-Richardson/546810085 Paul Richardson

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

  • http://www.attract.uk.com Liam Swift

    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.

  • http://ilovecolors.com.ar Elio

    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

  • Anonymous

    Awsome. Such a good designer.

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

  • http://twitter.com/SashaBaksht Sasha Baksht

    Just awesome!

  • http://pulse.yahoo.com/_QZ2YFF7QYPBTHFRXDML4BP2R6I Scottmccoy Smith

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

  • http://twitter.com/RGBJam RGB Jam

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

  • Jameos

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

  • http://twitter.com/markgeyer Mark Geyer

    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…

  • Anonymous

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

  • SUPERPAO

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

  • http://www.elliot-ross.co.uk Elliot Ross

    Love it

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

  • http://all-for-design.com/portfolio Auré

    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.

  • http://twitter.com/heathwaller heath waller

    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!

  • http://abstractcube.wordpress.com/ Alonso Lamas

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

  • Anonymous

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

  • http://twitter.com/laurenceveale Laurence Veale

    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

      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.

      • http://twitter.com/laurenceveale Laurence Veale

        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

          Cheers, Laurence.

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

          Thanks again for your input :)

  • http://twitter.com/kurtzenter kurtzenter

    Really nice inspiration, thanks!

  • Dan

    Beautiful design – such character!

    Love it, well done!

    Dan

  • http://twitter.com/hmallettuk Hywel Mallett

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

  • Adsd

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

    Yes thats exactly what happened…

  • Askalemiforum

    thanks admin good post http://www.netokey.com ;)

  • http://twitter.com/creativepayne Aaron Payne

    Friggen SWEET!