Img_inline_0012_equipment03

Client

Coffee Fix
Gatley, Cheadle, Cheshire.
Independent gourmet coffee shop and cafe.

Client project blog (password needed)

Brief

Provide a fully responsive (delivered for desktop and mobile/touch-first) website for the Coffee Fix brand that focusses on providing key information for potential visitors to the physical premises along with product and promotional information.
The site should embrace the eclectic feel presented within the shop along with a rustic/traditional sense of good home cooking, relaxation and good conversation.
Platform: Web (RWD)

Creative direction

Content first, uncluttered and open and fresh. Keyed on the eclectic feel of the shop. Keeping to a ‘sketchy cartoon’ feel for designed graphics.

Deliverables

  • Creative brief
  • Style guide (graphic/typographic/palette)
  • Site blog to allow client tracking of progress/decisions
  • Site plan
  • Site wireframes (Balsamiq)
  • Site walkthrough (Axure)
  • Graphic design
  • Photography
  • Brew guides (caffettiere, filter and aeropress) for print and web
  • Custom site templates and pages
  • Formatted page content (actual text to be supplied by the client)
  • CMS configuration
  • SEO (non or low cost options)

The process

First, I interviewed the owners – Gareth and Claira – to discuss their existing brand, their business goals and current/desired clientele. We discussed the primary goals of the website and how it should feel. Next, we discussed ideas for the content so I could get a grasp of the information architecture and start to map out the site. For this step, it was out with the post-its and get some key headings down so they could be ranked and grouped.

Site pages sticky notes
Sketched page map
Site pages sticky notes

I sketched a few ideas for graphical styles (a sketchy style was desired) and we chatted about the photography. It was felt that the site should be quite rich in photographic visuals so this meant a number of follow-up sessions so I could get the camera out. We finished by covering the deliverables and timescales.

Cafetiere brew guide

I set up a client blog so that I could gather content and so there was a place for the client to go to look at the wireframes and add any thoughts. Next, I produced some palette and typographic ideas based on the feel that came from that meeting and noted down palette ideas. After sketches of site ideas, I produced wireframes and we spoke about the content, then it was out with Axure to put together a comprehensive walk-though. Finally, for this phase, I put together some high fidelity mock-ups using photoshop and illustrator.

Wireframe sketches
Wireframes in axure
High fidelity mockup

Site Map - Axure generated

Once agreed, I started coding, drawing and photographing – and generally getting the site together. I made sure that I met on a very regular basis so the Gareth and Claira could see how things were progressing and make sure that there were no surprises.

Website - desktop

Website - desktop

Follow up

Currently tweaking a fixing odd issues during live testing.

Tools

Pens, Paper, Photoshop, Illustrator, InDesign, Dreamweaver, Balsamiq and Axure.
(also, MAMP, Yummy FTP and various browsers and mobile devices for testing)