What is cooktogether.blog? Cook Together (CT) is cooking class repository. CT started as an internal company program. Weekly in-house cooking classes would be provided. Employees that registered and attended were required to cook together, eat together, and clean together.
Attendees of classes would likely be stationed working on one part of the overall meal. No one person would learn everything. These classes are a community activity.
As the classes grew, a way to house and consume past classes was needed. Originally past classes were simple blog like entries. No substantial formatting, structure.
Product managers internally saw an opportunity to take an experimental employee benefit into a full fledge platform. Eventually spreading CT to other companies and partners to setup their own. They asked for a new enhanced platform that was easy to use, robust, SEO friendly, and accesible.
The platform was designed and built for both public and private use. Partnered companies can run in-house cooking classes, then post the class details online for the public or their employees. CT uses innovative and accessible lesson interface to help users recreate recipes on their own time.
Problem
300+ recipes across nearly a hundred classes needed to be presented and organized in an easier way compared to other cooking websites.
Conventional cooking or recipe platforms generally take two approaches to displaying information
- Present a list ingredients and a separate list of steps or directions
- Place ingredients as a list for within each step
Dissociation between ingredients and steps makes it difficult for users to follow along. Keeping the ingredients and steps nested together makes it impossible to gain an overview of the ingredients involved.
Solution
Overall the solution is straightforward. A list that has two-way interaction between each other. Interact with a step and the corresponding ingredients highlight, and vice versa.
The implementation was not straightforward
Challenges that needed to be solved
Backend entry
The backend for the administrative staff (chefs, nutritionist, moderators) needed to be quick to master while being reusable
- For each direction/step added, an additional panel would appear requiring entry of the ingredient and quantity
- Each ingredient would be logged for reuse without the quantity
- A finished preview was provided for each entry
Accessibility
It was important that the ingredients and steps interaction was correctly conveyed to users with assistive technologies.
At the time of this writing, there does not exist two-way binding of aria tags. An enhanced custom solution for tags was asked on stackoverflow
Successes
Within 6 months of launching CT, product managers noted the following.
- Employee engagement and satisfaction went up
- Consistently healthier lunch choices were observed on non-CT days
- Employees claimed to regularly make meals found CT
- CT ranked #1 in search results for the term Cook Together