Case Study: Flames On Italian Website

Details:

2 week duration
Solo project

Six Users Involved in Research and Testing:

An Italian chef from Rome
A Finnish traveller
An Indonesian living in Australia
Three local Aussies

Tools used:

Pen and Paper
System Cards for Card Sorting
Sketch App
InVision App

Brief

The brief was simply to create a website design for Flames On Italian Restaurant that people could use to order online. Flames On Italian is a little Italian Pizzeria on the Sunshine Coast in Queensland.

Discovery and Research

To begin the project I completed initial research of the business to get a sense of current branding, their service offerings, online presence and their customer base. Through an interview with the business owner, I gained clarity of the existing customer base and the main goals that the business was aiming to achieve through having a website.

Initial Notes on Stakeholder Goals & Sitemap Assumptions

brainstorming

One key business challenge was that they wanted to offer an online ordering alternative to Menu Log.  Flames On Italian were seeing a big loss of profit due to Menu Log encouraging them to participate in big promotional discounts e.g. 35% off, in addition to paying out for Menu Log’s transaction fees.

Based on the customer types provided by the owner, I asked relevant people questions about how they currently order pizza.

I began defining the focus of the project through a problem statement / job story and developing key personas.

Problem Statement

Flames On Italian is located in a very touristy area so the job story was focused on tourists. Since many tourists in the Sunshine Coast are not native English Speakers, focusing on them would mean it should be simple for locals to use as well. Based on this approach, I decided to perform research and testing with key local users as well as foreigners.

User Story

As a hungry tourist,
I want to eat good food near me,
So I can satisfy my tummy and continue having fun.

Remembering this job story throughout the project helped to keep focused on what’s important for the user, not my design ego. Although the focus was on tourists, I created a persona for a local family just to keep them in mind.

Proto Personas

Primary Persona

Federico Persona

Secondary Persona

The Kelly Family Persona

Understanding Current Information Architecture

takeaway-menu-ia-map

Card Sorting

The current takeaway menu had some very obscure pizza names and what seemed like to me, confusing pizza categorisation.

By doing card sorting I was able to validate some of my assumptions and dispel others.

The card sorting was really insightful in showing what would be intuitive for users when navigating the website and ordering a pizza.

A couple of card sorters - A local beauty therapist and an Italian Chef

card-sorting-italian

One user's card sorting made a robot shape!

card-sorting-robot

Users were really curious, wanting to compare their decisions with the real menu

card-sorting-takeway-menu

Card Sorting Insights

Sitemap Information Architecture Development

sitemap

User Flow

Primary User Flow

simple-user-flow-1

Interface Design & Ideation

Sketching

initial-sketching

Paper prototype testing initial sketches. This is my favourite Finnish traveller

user-testing-paper-prototype

Initial Wire Frames of Key Screens

Following initial paper tests, wireframes were created in Sketch App.

And uh oh!

The pizza menu display required a lot of scrolling. Ain’t nobody got time for that.

To figure out what to do I researched the usability, interface and design of existing pizza websites. Local sites were very poor so the big chains were the most helpful. Actually, even the biggest pizza companies aren’t doing a very good job of this!

#scrollingfordays

menu-screen-oversight

Eagle Boys had the most user friendly layout.

best-practice

I created several different layout options for the key screens. They were tested with users before completing the design of the full flow.

Screen layouts tested with users

screen-variations

Variations on header designs

flames-on-wireframe-alternate-head-design

Full User Flow Wireframes

User Flow - Version 0

flames-on-wireframe-a

Key areas to iterate following user testing

feedback-points-highlighted

User Flow - Iteration 1

flames-on-wireframe-b

Digital Wireframes were tested in InVision. When you drink beer, you order pizza.

invision-prototype-test

More User Testing - Iteration 2

user-flow-iteration-2

Further testing highlighted subtle considerations to iterate on - Iteration 3

final-full-user-flow

Iteration 3 - Up Close

final-1
final-2

Success Metrics

Offering a new, intuitive and enjoyable way to order online, we expect overall sales to increase, with a goal of 10% over 6 months. This is a modest goal as it is currently the off-peak tourist season.

Orders via Menu Log may decline as customers transfer over to this online platform. Sales data and analytics will inform the client regarding the progress of online sales.

Pizza sales through the online platform, repeat customers, time spent on site and purchasing task analysis are all key indicators on how effective the design is. Tracking these metrics will help to qualify the success of the new site design in driving more sales, profit and brand awareness.

It is recommended for the client to have the site metrics analysed within 3 months and continue iterating and improving the design to further increase conversions.

An increase in the number of positive online reviews on Flames On profiles on Facebook, Google Maps, TripAdvisor, Zomato is another key avenue to measure and monitor brand awareness, and gain insights into the success of the new online ordering system.