Lead UX/UI Designer
Led the end-to-end UX and systems design of the recipe-building workflow within our CMS, redesigning a legacy editorial tool into an intuitive, scalable, and automation-driven system. By rethinking core interaction patterns and underlying workflows, I transformed a high-friction process into an efficient experience that reduced task time by 40%.
Overview
In this project, I led the end-to-end UX and systems design effort to modernize and streamline the CMS workflow editors use to build recipes. The existing process was highly manual, error-prone, and constrained by outdated tooling—requiring editors to memorize formatting rules, retype ingredient lists from scratch, and navigate a rigid workflow that offered no flexibility or automation.
Through user research, workflow mapping, and iterative design, I redesigned the recipe-building experience into a scalable, intuitive system that dramatically reduced complexity and empowered editors to work faster with fewer errors.
Problem
User interviews revealed that editors faced significant friction when building recipes within the CMS. Basic tasks—such as adding, formatting, or rearranging ingredients—were slow, error-prone, and required manual workarounds. Editors spent excessive time searching for ingredients, rewriting lists, and reformatting entries due to rigid system rules and lack of automation. What should have been a simple workflow became a high-effort, high-frustration process.
Solution
I redesigned the entire recipe-building experience, focusing on usability, automation, and error reduction. Key improvements included:
Introducing a structured ingredient table to remove manual formatting.
Enabling search, insertion, and reordering capabilities within ingredient lists.
Designing a modal for more flexible ingredient search, editing, and selection.
Adding automated formatting and smart defaults to reduce cognitive load.
Collectively, these enhancements streamlined the workflow and significantly reduced the time required to build a recipe.
User Research
During discovery, I conducted interviews alongside a UX researcher to understand editor pain points. We developed an interview script centered on open-ended prompts and task-based observations, allowing editors to articulate frustrations and demonstrate friction points in real time.
Key insights included:
Editors manually formatted ingredients, and minor errors (such as incorrect unicode) caused publishing failures.
Ingredient entry was rigid; inserting new items required rebuilding entire lists.
Reordering ingredients was impossible without deleting and recreating the sequence.
No search function existed within the ingredient builder, forcing editors to rely on memory or work in separate tabs.
The overall process lacked automation and required unnecessary repetition.
To deepen my understanding, I attempted to build a recipe myself. Experiencing these issues firsthand sharpened my empathy and shaped critical design decisions throughout the project.
Sketching & Workflows
I began with low-fidelity sketches and user flows to map the end-to-end journey of creating a recipe. This allowed me to isolate pain points, explore alternate patterns, and quickly validate design hypotheses. Early sketches were anchored in user insights, business requirements, and heuristic evaluation, and I revisited them throughout the project to ensure alignment with core goals.
Prototyping & UI Design
Guided by insights from research and workflow mapping, I focused on addressing the highest-impact tasks:
Key areas targeted for improvement:
Adding new ingredients without worrying about formatting rules.
Inserting ingredients at any point in a list.
Rearranging ingredients easily with intuitive controls.
Searching for ingredients within the workflow—surfacing matches and alternatives.
Quickly selecting frequently used ingredients via smart suggestions.
Working closely with the design manager, we aligned on a table-based layout as the foundation for solving multiple usability issues at once. This structure enabled clearer hierarchy, simpler editing, and more scalable interaction patterns.
I created interactive prototypes to test with editors, validating ease of use, clarity of controls, and the intuitiveness of the redesigned workflow.
Final Designs
The final UI emphasized simplicity, clarity, and predictable interaction patterns. Key components included:
Ingredient Table: A structured interface for adding and editing ingredients without manual formatting.
Information Tooltip: Providing contextual details about each ingredient.
Insert & Rearrange Controls: Allowing editors to place items anywhere in the list and reorder them with ease.
Edit/Search Icon: Offering a streamlined way to update ingredients or search for alternatives.
Ingredient Modal: Enabling quick ingredient search, selection, and editing in a focused workspace.
Beyond the ingredient tool, I also redesigned additional components of the broader recipe workflow—media, nutrition, servings, timing, and more—applying the same UX methodology across the ecosystem.
Add an Ingredient Modal Design
In addition to improving how editors added an ingredient into a list for a recipe, I designed a modal that enabled editors to quickly edit and search for (alternative) ingredients, and also edit the naming/selection of an alternative ingredient name while building their recipes.
Recipe Page
Improving how an editor adds an ingredient to a recipe was one part of a larger process and initiative of improving the usability of building a recipe at each stage. I would go on to improve and re-design each component of the 'build a recipe' workflow (primary media, nutrition, servings, time etc.) and followed a similar design process that I took when re-designing the ingredients tool.
Unfilled recipe state
Replace UGC asset states
Filled recipe state
Replace UGC asset
Learnings
This project reinforced the outsized impact that thoughtful, systems-driven UX improvements can have on complex editorial workflows. By reducing friction, introducing automation, and enabling in-context editing, small but intentional design changes meaningfully improved usability and efficiency. These enhancements streamlined the recipe-creation experience and ultimately reduced the average time required for editors to build a recipe by approximately 40%, demonstrating how well-designed tools can directly influence both user satisfaction and operational performance.