Some friends of ours run a clothing company called Cicatriz. They came to us and asked if we could build them a shop where they could showcase and sell their clothes online.
They proposed the idea of using videos instead of the typical pictures to display their 12 products (which ended up being only 11..). One important thing was that the site was not supposed to feel like the typical e-commerce website, but instead offer a different type of experience of online shopping.
Oh, and there was no budget at all.
Concept and how we did it
Cicatriz didn’t want the website to feel “polished”, they wanted it to have a lo-fi/semi-trash/broken feeling. So we decided to give them an audiovisual experience, presented in a hectic video interface built in Flash.
Early on we went for a 3x4 grid to present the 12 product videos. The original idea was to have them all connect as seen in the videos where the “dude” is handing over a shirt from one video to another.
However, this was a bit more difficult to film than we had initially thought, so instead we went for some quirky “Aftereffects”. A pity perhaps, but I think this solution helped the site become even more interesting and unique.
One important thing for us was that the solution was supposed to be 100% Flash. In other words we wanted to avoid the typical “pay here popup window”. We wanted to show that it was possible to build a fully featured webshop in Flash.
To accomplish this we had to build a connection with the bank’s payment system, using a third-party API (poorly documented) that gave us access to different payment methods like Visa and MasterCard.
All the security bureaucratic from the bank turned out being a bit of a pain in the ***, but in the end we managed to do it, and the result is a solution which we are pretty proud of..
Interface design and render-bugs!
Given that the look and feel of the site was supposed to be “lo-fi”, the aesthetics had to be sparse.
The typography for the main interface for example is very strict, set to one typeface, one colour, one size for the main interface, all in caps.
For the animations we wanted it to be kind of hectic and broken, quite the opposite from most other Flash website where everything is super smooth and tweened.
For inspiration we looked to some material from Nine Inch Nails and some old videogames.
Building the first prototype, while doing animation tests over the videos we stumbled upon a render-bug in Flash, causing blocks and pieces to be left on top of the videos in certain bitmap-smoothing conditions. Absolutely fantastic.
Who would have thought that a bug in Flash could be so perfect? It fit perfectly into the design concept. Fortunately the client agreed and decided to keep it.
The workflow for adding a product is as streamlined as we could manage. Just choose size, then “add to cart”. The initial idea was to automatically “add to cart” when the user had chosen the size, but it turned out to be less user-friendly and the data-base requests went through the roof..
Throughout the website we are using context sensitive tooltips to help the user around the website, they are also used to show a live stock of each product.
Another thing that we are proud of is the mouse-wheel functionality for scrubbing the videos in the main interface. If you haven’t tried it yet, you should! Using the mouse-wheel you can fast-forward/rewind the videos with ease.
The guys at ClapClap (which is a part of Cicatriz) did all the video production themselves. A friend of theirs acted as a model, they shot, directed and edited in Stockholm using another friend's studio (starting to see a pattern?).
As I mentioned before, the plan was to have 12 products making it a perfect grid. However, late during video production they noticed that they only had 11 to show on the website.
This was long after we had begun building the site and we didn’t want to break the whole design now, so we had to find a quick solution, hence the Cicatriz logo in the end! Yes, a dirty solution to say the least, but it in this lo-fi setting anything goes!
Not being motion graphic professionals and using their friend as the model helped, making the website look kind of un-polished - in that good way we were striving for.
Sound: A love-hate relationship
Let's be honest here, most people hate music on websites. And for the most part, so do we at Mocoro. However, sometimes it’s called for and to us Cicatriz.se is a prime example of just that, with the whole concept and audiovisual feeling that is.
The sound and music is composed by Olle Corneer. The only brief we gave him was “could you make us some cool lo-fi/retro 8-bit video game sounds, please?”
The results was a hectic track, with 12 corresponding sounds per video that “fits” into the loop. In addition there is also an unique sound for actions such as “success”, “error” and “rewind/forward”. For those who likes silence, we have implemented the option to disable sound through the “right click menu”. Please developers/Adobe; make that a standard...
Response and conclusion
After a pretty long production it was amazing seeing the whole website finally come together by implementing the final code, design, music and videos (especially for us at Mocoro who had been working with placeholder videos of yours truly throughout the production!).
It's really fun for us that a no-budget project ended up this big, receiving numerous awards and being visited by thousands of people from all over the world.. Now hurry up and go buy some limited slick clothes!