PROJECT SUMMARY

Problem

VIVE Cooking School was about to embark on the second phase of their business of creating a community hub around their school and the producers, artisans and growers who supply the fresh produce. They needed a new website to encompass this element while also confirming the navigation and finding a way to build their loyal customer base. The aim was to combine all these elements while transferring the physical space into a digital one.

Approach

By creating a territory map we were able to visualise the whole ecosystem of the school and those involved in Phase 2 of the business. From here we undertook research to define what customers, SME’s and people interested in cooking, understood about where their food comes from, their cooking and shopping habits. We also undertook the 5 E’s of customer experience to understand the physical space in order to translate it into the digital one. We analysed this research and then ideated, iterated and tested what the appropriate outcome should be.

Solution

To create a responsive website that took users on a journey from the actual cooking of the food through to the school and into the wider community. On the Table, In the Kitchen and In the Paddock were three phrases that translated the cooking school’s Phase 1 and 2 onto the digital site. These were broken down into appropriate content and then interlinked throughout the site to create endless connectivity and transparency, while also adding a ‘log-in’, ‘save for later’ and ‘cookbook’ function to keep customers returning to the site and building loyalty with the brand.

DISCOVER

Methods Used: Territory Mapping, Competitor & Comparative Analysis, Heuristic Evaluation, Guerilla Testing, Surveys, User Interviews, Contextual Enquiry, 5 E’s of Customer Experience, Google Analytics

To begin we undertook comparative and competitive analysis of both cooking schools in Sydney and ‘hub’ style sites that were similar to the clients concept of the second phase of their business/website roll-out. We found VIVE school was very unique in it’s offering and most sites had elements with their navigation and content that were not satisfactory for the user. Hub style sites were difficult to find and most websites were done poorly.

TERRITORY MAPPING

From the initial briefing from the Client we began by trying to understand the ecosystem of the school and it’s wider community as this would help us realise the role out of Phase 2 of the business, that is, the integration of local growers, producers and artisans, and the creation of a community hub for all things ‘paddock to plate’.  We began by making a Territory Map. We then undertook a competitor and comparative analysis into other Sydney cooking schools and ‘hub’ communities.

 

 

HEURISTIC EVALUATION & GUERILLA TESTING

Looking at the heuristics of the current website and by employing guerilla testing we found the following functions impeded the ability to find information:

  • No filters
  • No categories
  • No search box
  • No breadcrumbs
  • Lower menu gets lost

The following discrepancies impede the ability to book a class:

  • Clunky booking system
  • Says ‘Sold out’ but the button says ‘Book now’
  • No ability to add self to waitlist or shortlist
  • No suggestions for similar classes
  • Can’t book same class on a different date
  • Can’t register for a class update
  • The shopping cart is stationary – ‘should be sticky’
  • Difficult forms
  • People miss the bottom navigation, expect it left
  • ‘Blog’ and ‘Recipes’ confuse people

DATA, INTERVIEWS & CONTEXTUAL ENQUIRY

We collected quantitative data from undertaking surveys and also from Google Analytics which helped us to understand the users, their food and shopping habits and preferences, and their pain points. We could see what were the most popular pages visited, bounce rates and what types of people (eg. movie goers) were actually interested in cooking schools.

We interviewed 12 people, 4 of which were SME’s and 2 who would book group team building exercises in their corporate office.

We visited the school to find out the ‘look and feel’, watch how people walking past would interact (as 60% of customers were walk-bys) and also see the wider community of markets and specialty shops within the Saporium, the building in which VIVE Cooking School sits.

 

 

THE FIVE E’S OF CUSTOMER EXPERIENCE

The Client wanted to replicate his physical school into the digital format of the  website. During our interviews and also asking people walking around the space, we asked the five E’s of Entice, Enter, Engage, Extend and Exit in relation to heir motivations of going into the school, their impressions and interactions inside and what contact they would like after leaving. We also asked the 5 E’s in relation to the digital space to understand their motivations, etc., of going to a cooking school website. We then, in the DEFINE stage, analysed this information and translated it into the digital space – as requested by the Client.

DEFINE

Methods used:  Affinity Mapping, Insight Statements, Empathy Mapping, Personas, Userflows, Journey Mapping

Through Affinity Mapping we grouped our findings into Themes which we then were able to extract Insights from. As the information was quite extensive we decided to only concentrate on a few to ideate, those that were top priority for the website, and presented the others to the Client with some recommendations.

INSIGHTS

We concentrated on the following Insights:

  • People would like to know more about where their food comes from, however many don’t have relationships with food producers. 
  • People are excited to experiment and learn new techniques, however information needs to be more easily accessible 
  • People want a variety of more detailed information however it isn’t always available 
  • People don’t mind booking classes online however find the process incredibly frustrating Many people have special dietary requirements but don’t have access to appropriate classes

EMPATHY MAP, PERSONAS & USER FLOWS

Each team member created a persona after putting together an empathy map. My individual persona was Andrew Anderson. He was an SME and already understood the ‘paddock-to-plate’ thought process having grown up in the country. He liked cooking and often took classes.

From here I created a userflow for Andrew who was looking for a recipe to cook. To incorporate Phase 2 as a link to this page I created an option to find the producer/grower for the ingredients as well as adding filters which were a current pain point of users.

USERFLOW FOR ANDREW – SELECTING RECIPE, LINKING TO PRODUCERS FOR INGREDIENTS

 

JOURNEY MAP

IDEATE

Methods Used: Opportunities – How Might We Statements, MoSCoW Methodology, Feature Prioritisation

After creating our Affinity Map and Insights we set about determining our How Might We statements to aid us in creating our prototype. The four below were chosen as the Must Haves for his project. We determined these by using the MoSCow technique:

HOW MIGHT WE:

  • make information more easily accessible for people who like to experiment and learn new techniques? 
  • help people with special dietary needs to find appropriate classes?
  • make the booking process enjoyable and intuitive?
  • serve information to cater to people’s specific interests? 
  • connect those interested with the people who produce their food?

FEATURE PRIORITISATION:

We determined from this that the following would have to be prioritised due to our time constraints on the project:

  • Transparency in content – users wanted to have all information up front including transportation to the school and parking.
  • Easy navigation – the current website was difficult to navigate although it looked good. There was a lot of information needing to be added with the introduction of Phase 2 so simple clear top navigation and drop down menus were important.
  • Creating links – the website needed to have a continuous loop so that users could move around easily and food, kitchen, and growers would connect.
  • From the 5 E’s – the site needed to take into account the findings from the study undertaken on the 5 E’s (as above).
  • Booking process – needed to be streamlined and clear.
  • Easy contact – especially for corporate group organisers. This was a pain point.

THE CONCEPT

After looking at the territory map I came up with a concept in which Phase 2 of VIVE’s business could be integrated onto the home page and deeper into the site. On the Table, In the Kitchen and In the Paddock where formed as a journey that the user would take as they scrolled down the page. On the Table would sit at the top as it was the core of VIVE’s business. This is where classes would sit. Under this In the Kitchen would showcase the physical school and also recipes that users could make in their kitchen’s at home. And following on In the Paddock would contain information and articles, artisans and producers, as well as partners. This was the broader community.

 

BUILD

Methods Used: Rapid Sketching, Wireframes, Interactive Prototype

After determining the priority features we undertook several sessions of sketching to create a number of wireframes. Each feature involved navigational items, information architecture, page flow and general content layout. We designed:

  • Home page
  • Log-in (for Phase 2 Member sign-up)
  • Add to Cookbook feature for the recipes (member only)
  • Save for Later feature for classes (member only)
  • A link to producers from the recipes page for users to search for produce if they were unable to find a seller
  • Social media
  • Shopping cart in navigation for easy check-out
  • Simple checkout/booking process
  • Integration of Phase 2 of the business
  • Filters for recipes and classes
  • Breadcrumbs
  • Timetable for classes
  • Add to Waitlist function if classes booked out

 

VALIDATE

Methods Used: Usability Testing

Through a series of usability tests we found that we needed to tweek a number of small issues and to which we found solutions. In all we undertook 2 rounds of paper prototype tests and 2 rounds in a digital format. This included (but was not limited to):

  1. Adding ‘Home’ on navigation bar as to use the logo wasn’t intuitive for users
  2. Changed the word ‘Community’ to ‘Lifestyle’ as users didn’t understand it’s meaning in this context
  3. Added a short description under each of the On The Table, In the Kitchen and In the Paddock as new users without much food knowledge didn’t understand the In the Paddock and artisans, growers and producers section
  4. Changed ‘General’ and ‘Specialist’ to ‘Classes’ and “Special Diets’ on the drop down menu for cooking classes as users were confused by the language
  5. Added a ‘Find ingredients here’ option as the previous iteration linked each ingredient in the recipe to a producer. This either wasn’t understood or it annoyed users
  6. Rearranged information on class booking page as it was out of order for users

EVOLVE

Methods Used: Iterating – repeat stages until high fidelity prototype

 

 

A link to the InVision interactive prototype can be found below (it is there – just roll down to the left and it will appear!):

Vive Invision Prototype

  • ROLE UX & CX Designer. Responsible for client liaison, project management, UI design. Part of a 3 person UX consultant team. From the prototyping stage the team worked on one component each (out of three). I was responsible for On the Table Concept, Home Page, Recipes, Individual Recipes, Save to Cookbook and Save for Later
  • DURATION 2 weeks
  • METHODS Territory Mapping, Surveys, Heuristic Analysis, Guerilla Testing, Competitor & Comparative Analysis, Interviews, 5 E's of Customer Experience, Affinity Mapping, Insights & Opportunities, Feature Prioritisation, MoSCow, Sketching, Wireframing, Lo & Hi Fidelity Prototyping, User Testing | TOOLS InVision, Sketch, InDesign, Slack, Google Drive, Excel
  • CLIENT VIVE Cooking School, Rosebery