SPICE

UX/UI

Desktop

Fall 2024-Present

Design by Jackson Vaughan and Fangyu Zhou, Development by Varsha C L

SPICE Healthcare is an online platform that seeks to streamline nutritional assessment while making it easier to adapt to the palates and preferences of a culturally diverse patient population.

Stepping into the development process to take over as the UIX designer towards the end of the first phase, I was responsible for refining existing work, and building the remaining user flows in an extension of the Material UI (MUI) -based design system already in use. While the first phase focused on building an assessment tool for nutritionists and caretakers, I am now in the process of phase three, which consists of an online educational hub to serve as a resource for spice & herb facts / substitutions, healthy recipes, and information about medicinal interactions of food.

Context

Problem Space

Food Is Personal

Nutritionists often face the challenge of working with patients from diverse cultural backgrounds, where understanding and navigating unfamiliar cuisines becomes an essential part of the job. For many nutritionists, identifying suitable substitutes for unfamiliar foods and spices commonly used in a patient’s preferred cuisine can be a tricky balancing act. This requires both knowledge of nutrition and an understanding of how to respectfully adapt traditional meals to meet health goals. Phase 1 of SPICE-Healthcare aims to streamline this process by offering a comprehensive platform that highlights a wide range of food preferences, making it easier for nutritionists to find culturally relevant alternatives and create personalized, effective dietary plans.

Intervention

My Responsibilities

I joined phase 1 of the SPICE project at a relatively advanced stage, where most of the overall flow for the nutrition assessment tool was already decided. Other than a few odd cosmetic touch-ups elsewhere in the software, I was primarily responsible for completing two key stages of the pipeline:

Food Preferences

A space for users or their caretakers to document favored, disliked, and impermissible foods (due to allergy, diet, or ethics).

24 Hour Timeline

A stage where users can construct a graphic depiction of a typical day in their lives to provide more data for the practitioner to make recommendations.

Benchmarks

Online Grocery Shopping

Kroger/Marianos Online Shopping

When thinking about models for food selection, I drew inspiration from the intuitive flow found in grocery store websites. These sites excel at helping users easily add items to their cart and see real-time updates. I wanted to bring some of that same clarity and organization to the design, focusing on making the process of selecting food preferences feel simple and efficient. One key principle I wanted to borrow was a “running tally” of eliminations, allowing users to instantly see their selections and stay oriented as they customize their dietary plans. The goal was to create a system that felt just as natural as adding groceries to an online cart.

Audio Editing Software

Logic Pro X

For the 24 Hr. Timeline tool, music editing software seemed like an excellent visual analog. Logic Pro X, for example organizes complex data in a clear, visually engaging way. It does an excellent job of presenting layered information—like tracks and effects—on a timeline, allowing users to easily manipulate elements and understand the flow of their project. I wanted to bring that same power to the timeline tool, ensuring that users could map out their daily and overlapping routines with a simple, intuitive interface. Meanwhile it would provide a clear snapshot of their activities for the practitioner to use in making recommendations.

Process + Iteration

Food Preferences

The food preferences tool organizes the entire database of foods into appropriate categories selectable on the left-hand side. In the main panel the foods of that category are arranged alphabetically. Each food has its own card that the user can interact with to make a designation if they so choose. Once a user is satisfied that they have documented all notable items they are prompted with a confirmation modal that gives them a chance to review their selections before moving on.

24 Hour Timeline

The 24 Hr. Timeline tool organizes broad activity types into "tracks," where users can add specific time blocks to represent when and for how long they engaged in each activity.

For more specific time blocking and a larger format text editor for their notes, users can open a modal to achieve these goals.

Improving Cultural Inclusivity in Nutrition