Skip to content

Responsive UX prototyping for Cobra Beer

I helped the digital design team at Karmarama develop a responsive website for Cobra Beer.

Multiple device view of Cobra beer responsive website

Karmarama developed an integrated advertising campaign to rid Cobra beer of its curry house shackles. Part of the brief was to re-develop the pre-existing website to enable consumers to engage with the new campaign and the brand.

The initial UX had already been partly developed a few months before I started my contract at Karmarama, but it was still in it’s early stages, so I had plenty of opportunity to contribute to the project.

The website is a fully responsive experience that incorporates both an immersive brand story (predominantly through video and image content) as well as functional product information.

I helped realise the vision of the Karma digital design team by developing an HTML prototype. This was used as both a tool to validate UX and visual design thinking as well as provide the external build agency with a reference point on which to develop their front-end HTML code.

I used Foundation (the front end framework by Zurb Inc.) and some jQuery wizardry to develop the prototype. This enabled the Karma design team to be able to visualise their designs and key interactivity prior to it getting signed off and handed over to the build agency.

The campaign was well received, although I think that had I been involved from the onset, a few of the issues that we encountered in the latter stages of the project could have been mitigated. But all in all a fun project to be involved with.

Props to Mike Dorrance for his digital design awesomeness.

HTML prototype video walk-through (Foundation 5)

Cobra beer age gate prototype
Prototyping the 'age gate' page to ensure visitors to the site were of legal drinking age.
Cobra beer homepage prototype
Prototype of the Cobra homepage with a full-screen video.
Cobra beers CDD page with navigation visible
Prototype of the CDD page with full-screen video.
Cobra beers CDD page
Prototype of the CSS page with full-screen video playing behind the collapsable navigation.
Cobra HTML prototype viewed on a laptop
One of the main challenges of the project was to demonstrate how the transition between Cobra/Braco products would work. Prototype of the product page.
Cobra beer HTML prototype viewed on a mobile device
Prototyping the 'burger menu' and drop down navigation on mobile devices.
Cobra beer website mobile view
Final page designs showing the Boss blog page and the expanded state of the navigation on mobile.
Cobra beer website viewed on tablet and mobile
Tablet and mobile views of the product pages.
Cobra beer website viewed on tablet
Tablet view of The Boss blog page incorporating a packery-driven JavaScript layout.
Cobra beer website product page design
Alternate views (Cobra and Braco) of the product pages.

Share This Project

If you enjoyed this project, then let others know about it by sharing it.