Logo for Cheffy Online Baking Academy with a chef's hat outline.

Created an online learning experience for a niche culinary academy that prioritized user-friendly access to courses, and comprehensive learning management tools.

Homepage of Cheffy online baking academy featuring baking lessons, module recommendations, instructor highlights, and a close-up image of a pastry with a cherry on top.
A pink gradient background with the words 'Cheffy Online Baking Academy' and an image of a small, round, yellow dessert topped with a red cherry, a cookie, white decorative elements, and white sauce.

SUMMARY

Utilizing competitive research insights, I embarked on crafting a vibrant and user-centric responsive UI/UX design for an online baking academy. This endeavor aimed to empower users to manage their learning journey seamlessly across both mobile app and desktop platforms.

Drawing inspiration from industry benchmarks, I infused the design with elements of fun and accessibility, ensuring that users could easily navigate through course materials, establish project galleries, and track their progress towards culinary mastery.

ROLES

User Experience

UI Design

Research

TOOLS

Figma

HeyCollab

RESPONSIBILITIES

Competitive Research

Style Guide

Moodboards

High Fidelity Wireframes

Responsive Design

Prototype

Person using a laptop with digital icons overlayed, including a trophy, open book, graduation cap, magnifying glass, and video play button.

CHALLENGE

With the complexity of culinary education, the challenge lies in balancing the need for a user-friendly interface that caters to diverse learning styles. Crafting an online learning app for culinary entails not only presenting engaging content but also integrating features that simulate hands-on experiences and foster community engagement within a digital environment.

SOLUTION

Creating a user-centric e-learning app for an online baking academy involves understanding the unique needs of culinary learners and tailoring the interface accordingly. Incorporating features such as interactive recipe demonstrations, personalized progress tracking, and live events as well as recommendations, fosters engagement for the users. Furthermore, offering seamless access across multiple devices ensures flexibility and convenience, enhancing the overall learning experience for aspiring bakers.

THE PROCESS

1

COMPETITIVE RESEARCH

Conducting competitive research for an online baking academy involves analyzing existing platforms, identifying their strengths and weaknesses, and leveraging insights to design a more compelling and effective learning experience.

2

MOODBOARD

Creating a moodboard to select a color palette that exudes luxury, elegance, and evokes positive feelings involves a deliberate and thoughtful process.

• Curate Visual Elements

• Color Selection

• Foster Creativity

• Evaluate and Refine

Design mockup of a mobile restaurant app and color palette. The left side displays a food menu with two dishes, their prices, ratings, and images. The middle shows a map with a route from a restaurant to a destination. The right side features color swatches labeled with hex codes.
Three mobile app screens displaying an online learning platform with courses, user profile, and course progress, set against a pink background.
An app screen showing healthy food options, including pancakes with toppings, and detailed nutrition information with an option to add to a card, featuring a yellow theme with a cartoon chef illustration.
Screenshot of Wecademy website homepage with a banner that reads "Take your career to the next level," and features options for courses, mentors, blog, and login. The page includes statistics about courses, security features, video support, and user reviews, along with an image of two men discussing in front of a laptop.
Mobile app interface displaying a donut ordering menu with images of donuts, ingredients, prices, and customization options in a pink theme.
Three mobile app screens featuring different food and drink options with colorful backgrounds and call-to-action buttons.
Cartoon illustrations of garlic, a pot of boiling water, a burger, a syringe, a cookie with chocolate chips, and two knives on a pink background.
Four circular logos featuring a bear baker wearing a chef's hat with 'BEV BAKES' text, and images of a whisk, rolling pin, or cake decoration in a pink or red color scheme.
A digital collage featuring a pink and purple pastel cake decoration app on a smartphone screen, displaying various cake options including a pink cake with a bunny topper, a purple cake with flowers, and a red cake with a design, with a large photo of a pink birthday cake topped with flowers on the right side.

3

STYLE GUIDE | UX COMPONENTS

Establishing a style guide and UX components involves creating a comprehensive set of design guidelines and reusable elements to maintain consistency and coherence across the user interface.

This includes defining typography, color schemes, iconography, spacing, and other visual elements. While the style guide is established after moodboarding, the UX components, from atom to page templates, are created during the UX and UI stage of design.

A digital design layout featuring various UI elements such as a sign-up form, logo options, typography styles, button styles, and content modules for a web or mobile app. The layout includes sections with text, icons, buttons, and images in a clean, modern style with pink, orange, blue, and gray accents.
Mobile app menu with icons of home, grid, chef hat, suitcase, house, grid, chef hat, suitcase in two rows.
A graphic showing five brand colors with their hex codes and descriptions: Dark Pink, Medium Pink, Light Pink, Yellow, and Blue Gray.

4

USER EXPERIENCE

Crafting UX wireframes for online learning entails envisioning the layout and strategically arranging elements to optimize user interaction, streamline navigation, and enhance functionality, thereby ensuring an engaging and seamless learning experience that adapts smoothly across various devices and platforms.

5

USER INTERFACE

Designing a captivating user interface for an online baking academy involves infusing every click with the joy of baking. With vibrant colors and friendly animations, navigating through recipes and tutorials feels like embarking on a culinary adventure. With intuitive tracking tools and personalized goal-setting features seamlessly integrated, learners can chart their progress with ease, celebrating each milestone on their journey towards mastering the art of baking.

A bakery-themed website homepage featuring a large image of a decorated pastry with a cherry and caramel on top, sections for baking lessons, featured courses, and chef profiles, with pink and white color accents.
An online cooking course webpage titled 'Cheffy' featuring lessons on chocolate, macarons, bread, and pastry, with images of chocolates, macarons, doughnuts, bread, and berries, along with related courses and navigation options.
A webpage from Cheffy, an online course platform for cake decorating. The main section features a video tutorial titled "Buttercream Flowers" with an image of decorated cakes and cupcakes with colorful buttercream flowers, instructor Sarah Poplin. The site also highlights recommended courses like wedding cakes, staging dessert tables, croissant dough, and transporting cakes.
Webpage screenshot of Cheffy online cooking school dashboard, displaying modules, courses, and enrollment options, with a sidebar and social media icons.