Concept

In the early weeks of 2009, Specialmoves was asked by MWO to design a microsite for Bosch's new range of secateurs. The concept was that the visitor would be presented with a large, idyllic garden where he/she could cut and create a 'virtual bouquet' from the rose bushes. This bouquet could then be sent to friends and loved ones for fun. The site was to launch just before Valentine's day and continue on past Mother's and Father's day, so the idea was particularly fitting.

Gardening

Using intial sketches and moodboards as a springboard to work from, the garden scene was then built in 3D Studio Max and tweaked until we were completely happy with the overall look. We wanted to create what looked like a real garden at a first glance but that retained a carefully crafted, almost model-like quality. A combination of high-res textures and warm, ambient lighting really helped us achieve a great end result that bettered even the client's expectations. Incidental animations were also added to help bring the scene to life, such as the rippling of pond water and the odd butterfly fluttering from the trees. As a final touch, we mixed together a soundscape of birds, insects and general outdoor ambience for that extra bit of immersion.

The garden through its various stages of development.

The Interactive Process

The act of cutting and sending your virtual bouquet was to be the main area of interaction of the website. During the process of designing the garden, our UX and visual designers worked together to draw up storyboards of the process from start to finish. In addition to helping the client understand our approach in detail, they acted as a firm foundation on which to base the final graphic designs. We aimed to keep the user involved at all times so we broke the process down into 3 simple chunks: cutting your roses, customising your bouquet and sending it to a friend.

Storyboards clearly illustrated the interactive process for both our designers and developers to use as a basis for the build.

Rose Clipping

We wanted the act of cutting the roses to be as simple and intuitive as possible – no harder than clipping a real rose! As detailed in our intial storyboards, we programmed the secateurs to follow the mouse cursor closely so that whenever the user clicked on a particular rose in the bush, the stem would be snipped, and the rose added to your collection. We also wanted the visitor to be able to cut roses of various colours – red, yellow and pink. As multicoloured rose bushes don't exist (unless there's one in some undisovered archipelago somewhere..), we chose to make 3 different rose bushes, one per colour. The user begins with a red rose bush - as the cursor moves towards the left or right of the screen, the camera pans across so that either the yellow or pink rose bush takes centre stage. We layered up the 3D-rendered assets on a 2D plane to allow us to animate them at different increments, giving a natural sense of parallax (background elements moving less than those in the foreground).

Assets were prepared in different layers and compiled to create the final scene.

Finishing your Bouquet

The next step was to customise the bouquet's wrapping paper and ribbon as well as writing a custom message to the recipient. Rather than presenting the user with a generic bunch of roses, our aim was to match the number and colour of the roses in the bouquet to exactly what the user had cut in the previous screen. The two images below illustrate how different the bouquet can vary depending on the choices made by the user.

The user can tweak the bouquet's appearance to perfection.

Sending your Love

Sending only a picture of the virtual bouquet to a friend didn't seem enough of a reward, more so a shallow interpretation of its real equivalent. For the end result to feel worthwhile, we decided to create an animated video which immediately felt more fun and better suited to the digital space. Once a rough animatic was approved by the client, we created and rendered the scene in 3D.

The evolution of the animated video, from original animatics to the final render.

Graphic Assets

As both garden and interactive process were developed to such a high quality, it was only fair that we spent an equal effort on the rest of the graphics. From buttons made to look like plant tags, to text fields in the shape of dugout lines, all assets were crafted in a style that fitted the scene as coherently as possible. Anything less would pull the user out of the context that we had taken so much care to create.