Website: zumo.co.nz (responsive web design wireframes) - view screenshots
Size: 11 page templates
My professional status: independent web designer/developer
Website client: Zumo Coffee Roasters
Dates: February 2013
Brief: Zumo is a coffee roasting company and coffee house based in Nelson. I was approached to put together a quote for an online web application which would allow Nelsonians to order their cup of Zumo coffee via their smartphone, tablet or desktop computer, ready for pickup/takeaway, in-house enjoyment or home delivery.
As part of the quote, I put together a full set of wireframes to demonstrate the responsive layout, the web app's functionality, and the ordering process itself; across the 11 templates that I had identified as being necessary for the app to function as required.
The project was put on hold a short while after I delivered my wireframes, but I'm including it in my portfolio because it was a great piece of work!
- Reviewed the coffee-ordering process in detail and broke this down into a series of steps, then successfully developed a set of wireframes that reflected that process and translated it into a set of web pages for the client
- Incorporated responsive design into the wireframes - the first time I had done this on a sitewide scale.
My responsibilities included:
- Putting together a fixed-price quote for the project
- Figuring out and developing the coffee ordering process, as follows:
- selecting a coffee type (eg latte, long black etc)
- choosing specific options within that coffee type (size, milk, bean etc)
- reviewing order
- delivery options (have here, takeaway, or delivery)
- order confirmation
- Using Balsamiq to compile the information architecture (a full set of wireframes, process recommendations and documentation) for all parts of the website, including the screens detailing the coffee ordering process; as well as screens for favourites, history, and user profile; and general content pages
- Including in these wireframes the layouts for responsive design, demonstrating different layouts at various breakpoints for mobile, tablet and desktop for each template
- Project management and client liaison.
This was an interesting project that never quite happened. I really enjoyed thinking through and putting together the process for coffee ordering - I love that kind of process-driven logical thinking where the needs of the user are paramount and where you have to work through every microscopic detail of the process in order to get it right - it really suits my detail-oriented brain.
It was also one of my earliest responsive designs, where I started to get my head around the challenges of arranging content on different devices with different sizes of viewport. Heaps of fun - and even if we never get to use it for this particular client, it's never wasted effort because of what we've learned and figured out along the way.