Rapid HTML prototyping for Cobra Beer

I helped the digital team at Karmarama develop an HTML prototype to demonstrate the UX vision for the Cobra Beer website.

Cobra Project Hero

Project Overview

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 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.

The Challenge

To develop an engaging microsite to:

  • Drive awareness amongst existing customers of the experiences they could redeem with their Avios points.
  • Provide a tool for the relatives of existing customers to prompt the account holder to redeem an experience(s) with their points.


My Role

  • Wireframe development
  • HTML prototype
  • Overseeing UI designer (from UX point of view)

HTML Wireframes

Using HTML (Foundation) to develop the wireframes enabled me to communicate key page structure and flow to the client. I then reused the HTML in the prototype where I increased the fidelity of interactions using jQuery and CSS. 

 

HTML Prototype Video

I used Foundation (the front end framework by Zurb Inc.) and jQuery 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. Below is a video walkthrough of the HTML prototype, demonstrating key functionality.

 

UI Design

The responsive UI was designed by (then) Karmarama designer Mike Dorrance. Below are select screen shots showing both the desktop and mobile views.

 

Cobra Website UI
Cobra Mobile UI 1
Cobra Mobile UI 2
Cobra Mobile UI 3

Client Testimonial

Mike Dorrance Profile Photo
Mike Dorrance
DIGITAL ART DIRECTOR AND DESIGNER
“I worked closely with Ben at Karmarama on a series of projects that benefitted greatly from his involvement. He brings a wealth of insight and enthusiasm to do the best work, turning around crafted prototypes and producing fleshed UX documentation as well as having an eye for optimising and finessing the end user experience, he'll be a valuable asset to any team.”

Tools

  • HTML

  • CSS

  • JavaScript

  • Foundation

Deliverables

  • HTML Prototype

Type

  • Responsive website

Sector

  • FMCG

Get In Touch

If you need help with a UX Design project then I'd love to hear from you.

Download CV