Apicius is a video based cooking app enabling family to share recipe tutorial clips and stories with friends, the world or just among themselves. Named after one of the world's oldest cookbooks, the recipe videos, known as "Pieces," can be made with the built-in recording and editing tools, or uploaded from videos produced on the computer.
How do we provide users with simple tools to archive, teach, and share their culinary stories within their own families, generations, and the world?
In 2023 the organization Storycorps registered 41.2k new online users who archived 19.8k self-guided conversations, that document their stories with the Library of Congress for future generations.Over half of the stories are of diverse ethnic backgrounds showing the desire to document their unique personal stories and heritage.
The global Recipe App market size was valued at 476.8 million in 2021 and is expected to reach 974.3 million by 2027, indicating the world's ever increasing appetite for culinary tales.
One of the more recent cooking apps to the industry, Whisk has gained ground through partnerships. In addition to TikTok, they also partner with Amazon, Walmart, Kroger and Instacart to assist users with grocery shopping.
They are already reporting over 1.5 million interactive users per month. According to SimilarWeb demographics, Whisk is primarily used by women, and in the age ranges of 25-34 years old.
This recipe platform offers access to over 2 million recipes on a variety of web-based devices. In addition to allowing users to filter recipes by food allergies and preferences, it also learns user preferences. Therefore, the longer you use, the better it becomes at recommending your preferred meals to cook.
With many recipe apps, a few inconveniences may exist like metric conversions and dimming of the screen after a delay. Paprika minimizes these inconveniences, which is why many users enjoy cooking their meals. It also lets users interact with its interface by crossing off tasks or items along the way.
While not a dedicated cooking app, Snapchat repeatedly appeared in my initial interviews, especially among the Gen Z participants.
Content creators would upload episodic cooking content in short demonstration videos. Some of it sponsored by larger backers such as the Food Channel's "Yummy" series, while some of it was niche creators catering to college students. Despite the app's decline in relevancy, multiple interviewees we're vocally fond of the quick, informal cooking videos.
Interviews were conducted over the span of three weeks, screening first for basic cooking ability, familiarity with few different sources of recipes, and finally selecting participants based on the demographics gleaned from the secondary research, notably, equal parts women of late Gen-Z to millennials as our "Zoli" persona, and women of Gen X and older as our "Tues" persona, with two control participants not fitting the screening criteria nor the research based demographics.
Zoli is a young adult in their 20's and a college student. Still getting the hang of cooking, she browses online recipe sources like food TikTok's, Snapchat cooking serials, and New York Times Recipes through a student subscription. Zoli often combines or modifies these recipes to make her own signature dish, cooking the most perfected of them at family gatherings. She feels limited by certain trends of which food content creators tend to follow, but enjoys the ability to message and engage with them. While on a trip to Italy, Zoli mused that the traditional food she was eating would never show up in any of her cooking feeds and wished there was an avenue to do this.
Tues is in their 50's working part-time on passion employments and library work. She has a collection of cookbooks and stays up to date with publications of celebrity chefs like Roy Choi and Ina Garten. Tues usually teaches the nostalgia meals through lengthy text, and will scrapbook secret recipes after a family gathering or elder passes, to preserve their day-to-day memory. Rather than using widespread viral social media like Zoli, Tues prefers to privately network with family and neighbors through group chat, NextDoor, and Facebook.
Informed by the initial research and interviews, our design requires both the larger functionality of video social media along with private, family-oriented features. We incorporated a structure of two social circles to allow for both of these needs to bet met harmoniously. This allows for content to be shared between a variety of familiarity levels and allowing for different uses of the app.
This was the first Minimum Value Product flow sketching out the flow for the interactivity desired by our younger userbase persona, ending with messaging and video comments. Not only does this flow incorporate the two-tiered social circle architecture but it was the first implementation of the design's "Palette" system, an algorithm similar to the content curation used by popular social media apps, but based off of an emoji feedback vote the user can interact with.
Another Minimum Value Product flow. This sketch illustrated a few redundancies in the ways users could be notified of content from family.
This red route was from an older design that incorporated a version of "Shorts" called "Snacks" that are popular currently with video social media such as Instagram and Youtube. It was ultimately nixed in the final design as the separate category split the content too heavily to be user friendly given that the two-tiered social system should be the focus of the information branches. The two tiered design is labelled as "Friends/Family" and "Regulars" to denote restaurant connotations which was simplified in the Hi Res Design as "Friends" and "Family."
This was the main architecture map derived from the previous redroute. It also utilized the "Snacks" short category as well as navigational elements split between top and bottom toolbars, as seen on other video social media. While these were both nixed in the process, the base architecture remained the same, with two main forking paths both ending at a video, which is its own self contained module.
These are the main screens from the initial wireframe sketches. I started out with a design convention pretty standard of popular video social apps, with scrolling rows or grids of suggested content. During scrolling, a hidden tab menu would appear, to toggle the content between grid squares or a list view with titles and descriptions. The navigational features were split among a top and bottom toolbar, with the the top bar content focusing on finding and browsing other creator's recipe videos, and the bottom toolbar oriented around personal tasks like recording a video, viewing saved content, and the user's profile.
A similar set of main screens from the lo-res wireframe iterations. These mostly stuck with the same design but also included suggested chef profiles of popular content creators or friends and family most regularly interacted with. The large semicircles on the social "Circle" main screen were an unorthodox design element I was experimenting with at this time. The idea was to evoke cookbook tabs, when leafing through friends and family lists.
Overall the sketches and lo-res wireframes were helpful in dictating the overall flow of information and screen functions throughout the hi-res mockups, although during the iterations between low and hi res wireframes and flows, I decided to change between these legacy social media designs and opt for more elements of modern vector design, informed by the accompanying vector logo and imagery I was designing at the time.
As Apicius is the name of the app, the theme initially had a light Greco-Roman aesthetic, Apicius being the name of one of the first cookbooks, from Ancient Rome. A kind of clay pot logo and brush calligraphy was used during early development. During dedicated iterations of the logo design, the goal was to create an Initial Logo combining the crested "a" and the pottery imagery. The "a" was worked into a pear shape and finally the teardrop initials "a.p." with a disk underneath suggesting a three dimensional vase or spouted container.
The final iteration was a huge jumping off point for rest of the app, as it was used to derive the font, the icons, the color family, and even the vector design style of the final Hi-Resolution wireframe.
Jumping off from the logo design, I chose a modern, sans-serif typeface that approximated the rounded off stroke and weight of the linework in the logo. I decided upon "Dongle Light" for most of the features, as its thin lines suggest the minimalism and cleanliness one would want in a cooking environment. The "Dongle Regular" weight looked too whimsical and Comic Sans-like for general use but I found it looked clean at lower sizes and provided a nice emphasis for things like names and titles of sub-categories.
For colors, a Peach Orange and a Slate Blue were chosen to evoke a motif of water and dough or salmon. Despite Orange being the dominant color in this binary scheme, just the Slate Blue was used to inform the highlights and greys to avoid clutter.
The icon design more or less fell into place following the logo and the typeface. The visual motif of a weighted, rounded stroke in both the typeface and the negative space of the main logo dictated that we scratch build a custom set of vector icons with a rounded stencil design. There were a few generic icon packs available with the odd logo that fit the bill but I opted for a complete custom set for visual congruency sake.
The emoji buttons for the "Palette" function were a bit of a challenge as the abstract concepts of flavor and other food descriptors we're much more tricky to convey visually than the usual imagery used in the standard navigation or task icons. I erred on the side of breaking the visual style in favor of more visually descriptive symbols.
Between the lo-res wireframe iterations and the visual design and styleguide work, I opted to change the visual layout of the site featuring a more vector design-based approach. Not only would that opt to simplify the visual hierarchy of the app for users of the older demographic, but it would incorporate the shape of the logo to create a unifying motif between the visuals and architecture of the pages. The final layout is based around the logo- informed spaces of teardrop shaped top and bottom cells, and a large, singular toolbar at the bottom. The site architecture was streamlined from previous iterations by removing the "Snacks" (shorts) category to focus on and reinforce the routes between the three main functionalities.
The Home and Social pages are the two main starting points of the design. The app logo that functions as a Home screen return on most sites and apps was given a toggle feature, to jump between the two main paths of the design flow, with corresponding color change in the visuals. This allows for a more fluid use of the design through a visual representation of the site's pathing, as well as a unifying motif throughout the app's use, architecture and visuals.
The Viewing Screen and its feedback overlays remained fairly similar to their sketch and lo-res iterations, mainly just incorporating rounded geometrical flourishes. It's main distinguishing features include a timer that the creator of the video "Piece" can implement for the viewer to pause and resume the video along with cooking instructions. Also included is the "Palette" feedback system suggesting videos for the user based on what flavors they appreciate in from various cuisines and styles. The user can traditionally "like" a video as well as vote with flavor emoji for a more curated experience.
The last functionality is the content creation of "Pieces," the recipe videos that populate the app for content creators, friends and family to share their own culinary stories. This element was designed to be self contained, to allow for users to quickly make a recipe "Piece" using just the app itself. A simple audio adjusting timeline allows for sound level adjustment or accompanying music clips. As typing out full video descriptions and ingredient lists on a phone keyboard would be discouraging to users, the app also pre-populates each with voice to text from the taken from the edited clips, recognizing phrases like numbers to note ingredients and instructions.
These are the major red routes animated in Figma. It is a basic animation with some of the features like scrolling and panoramic views left not mocked up, focusing on navigation and button functionality. Try the interactive prototype on Figma
This redroute starts with the tutorial disclaimer teaching the user how the Apicius icon can be used to toggle between the Home screen and the main Social screen. While it appears every visit the Home screen in the mockup, this would be limited to only the first time the user visits the app. The animation makes it's way to the user's Social page where a Friend is selected from a suggested list, however more profiles from dedicated lists could be selected from the "see more" style arrow leading to a Friends page and a Family page. The end of the route shows how a user would add or remove Friends or Family members from their profile screen.
This redroute fulfils the goal of watching a video Piece and engaging with its various interactivity overlays, such as comments and Palette feedback. Here a video is chosen from the suggested videos displayed on the Home screen, but any video from browsing profiles, searches, bookmarks or cuisine lists would take you to the View screen and have the same options for interactivity. The overlays on the video allow for the user to comment and engage while the video is playing, a feature similar to that of popular social media like Youtube. The Palette feedback overlay with the colorful buttons informs a social media algorithm to influence what the user sees at the beginning of the route on the Home screen.
The recording redroute can flow through the Add Content button on the toolbar, or alternatively, can be done through the user's personal profile. Saved or videos made outside the app can be uploaded from this flow. New videos can be published as a stack of a few clips, or each clip can be edited individually. The Description and Ingredients forms being pre populated with relevant keywords and phrases from the video's audio means that a fully made Piece with instructions and a ingredients list can be made natively on the app with just a few clicks and some proofreading.
