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.
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.
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.
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.
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.
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.
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
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?
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.
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.
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
- Timetable for classes
- Add to Waitlist function if classes booked out
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):
- Adding ‘Home’ on navigation bar as to use the logo wasn’t intuitive for users
- Changed the word ‘Community’ to ‘Lifestyle’ as users didn’t understand it’s meaning in this context
- 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
- Changed ‘General’ and ‘Specialist’ to ‘Classes’ and “Special Diets’ on the drop down menu for cooking classes as users were confused by the language
- 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
- Rearranged information on class booking page as it was out of order for users
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!):