Design, uninterrupted #141

February 10th, 2011

Today’s post highlights the design of CascadeBreweryCo.com.au by Pollen Digital (@Pollendigital). If you’ve been following this blog over the last few months, you know how much i love vintage colors, textures and illustrations. This single-page design features a gorgeous color palette and a brilliant puzzle-like arrangement of content cells. Each cell is color-coded based on its type, and the content is shown in a lightbox overlay with the same amount of attention devoted to every single pixel.

Unfortunately, these great visuals are coupled with a usability disaster in the form of the sliding navigation “menu”. Clicking the “open menu” text in the top left corner reveals a rather cryptic collection of sliders and switches that allow the visitor to “brew” his own content. You can drag the sliders sideways, click the slider label or toggle the switches – with each action rearranging the main content grid in a rather unpredictable, and more often than not, visually jarring fashion that leaves a jagged bottom edge. It looks like dragging a slider to the right gives more weight to the entries for the specific category, and those get pushed to the top of the grid – completely messing up the carefully crafted balance of color, weight and positioning. It also appears that some of the entries are static and do not disappear no matter what are the current control settings.

My personal feeling is that there was no experience designer involved in the process of designing the site, and the studio’s desire to show off its coding talents took over the usability aspects of the browsing experience. The visibility and arrangement of the content should not be given to the user, especially when the dynamic algorithm that defines the final location of each cell is in such a bad shape. I would rather see the same amount of dynamic control allowing the visitors to “experiment” with different beer ingredients, creating various flavors which are then graded or explained by the backend engine.