Responses by Garrett Deiter, cofounder and creative director, Makers & Allies.
Background: The site brings the unique collection of Mollydooker Wines to life in a memorable, interactive while allowing its international audience to shop for wine in both the United States and Australia. The site acts as part of a refresh to the overall Mollydooker brand and digital presence.
Design core: Some of the most interesting features of the site include the surreal, illustrative South Australian creatures animated throughout; the distinctive color schemes and bold typography; and the kaleidoscope-inspired navigation all brought together into a seamless commerce experience.
Favorite details: We love the amount of personality we were able to infuse into this site. It’s the unexpected details we appreciate the most. From a design perspective, the originality of the overall bright and vibrant color palette; from a development perspective, the kaleidoscope-inspired navigation—these were definitely something we enjoyed creating and presents a memorable experience for users navigating between pages. We like sprinkling some hidden gem surprises throughout the web work we do.
Challenges: Trying to pack so much visual personality into a site that also had to function as an intuitive commerce shopping experience. Finding that balance between interactive entertainment, form and function was part of the challenge. Creating a seamless gateway for visitors from both Australia and the United States was also a technical challenge to problem solve.
New lessons: We had the chance to explore some new coding techniques to breathe life into the animations you see woven throughout the site with technologies like Canvas.
Navigation structure: Designers often forget about how important the navigation experience is. We just wanted to create something that wasn’t boring, so we had some fun experimenting with different interactive ideas until we landed on the psychedelic kaleidoscope effect. We couldn’t stop playing with it ourselves, so we figured others would enjoy it too.
Special navigational features: The rollover kaleidoscope effect on the main menu navigation is actually previewing the page that users will visit if they click, a fun wayfinding solution that brings form and function together.
The large, floating, left-hand scroll indicator dripping with color on the homepage intrigues users to scroll down the page, and the microinteractions on button rollovers throughout the site are a few of the fun navigational details. It’s the small things that bring it all together, like the arrow rollovers that shake and point to the left that nod to the meaning behind mollydooker, Aussie for “left-handed.”
Technology: Canvas, CSS3, HTML5, JQuery, GSAP.