Phil

Personalized Type 2 Diabetes Companion

Phil is a mobile app that helps people with Type 2 diabetes manage daily life through personalized recipes, meal planning, grocery integration, product scanning, activity motivation, blood glucose tracking and health reporting.

I led UI/UX design across the entire app experience from onboarding and recipe flows to scanner, glucose tracking, Diabetes Journal, and report export. I collaborated with Roche PMs, clinicians and engineers, translating complex health requirements into a clear, patient-friendly design system.

Design Approach

Research & Insights
Through interviews with patients, dietitians and healthcare providers, we uncovered consistent themes: people wanted a tool that was easy to understand, trustworthy in tone and able to guide them through the small decisions of daily life.

Design Principles
From those findings we shaped four principles that guided every decision: make the experience accessible, keep interactions simple, ensure clinical alignment and design in a way that empowers rather than overwhelms.

Process
I mapped flows, built and tested prototypes directly with patients, and iterated toward a modular design system that could flex across nutrition, activity and health tracking while remaining cohesive and easy to use.

Key Design Decisions

Personalized Onboarding

Problem: Health apps often overwhelm users upfront with forms.
Decision: Designed onboarding as a card-based sequence with conversational style copy.

Details:

  • Progress indicators reduced anxiety and gave users a sense of completion.
  • Questions captured health goals, dietary restrictions, allergies, age, gender.
  • Tone was empathetic, avoiding medical jargon.

Outcome: Users reached a personalized feed within 2 minutes.

Recipes & Meal Planning

The recipe library uses a modular system where ingredients, portions, and nutrition values adapt to each user’s health profile. Nutritional scoring is built into every card, paired with clear typography and photography for quick assessment. Filters remain visible at the top of the screen for fast refinement by meal type, prep time, skill-set or cost.

Meals are added to a weekly or monthly planner with a single tap. Scheduled meals appear in context while empty slots prompt completion. From the planner, a shopping list generates automatically and groups items by store category. Integration with Intermarché connects the list directly to a digital basket for easy ordering.

play-rounded-fill

Glucose Logging & Journal

This was the most sensitive area of the app:
  • Device pairing: one-time Bluetooth setup with Roche Accu-Chek Mobile/Guide devices. Designed setup with large illustrations and step-by-step guidance.
  • Manual entry: numeric keypad with large targets, optimized for older users.
  • Journal view: meals, activity, and glucose values combined in one timeline.
  • Design decision: Instead of tabs (Nutrition / Glucose / Activity), integrated into one scrolling view so users could see patterns directly.
  • Reports: exportable PDF with clear charts + summaries. Designed two layers:
    • Simple overview for patients (color-coded averages, trends).
    • Detailed logs for doctors (timestamped entries, numeric tables).

Activity Tracking

To encourage daily movement, a lightweight pedometer was integrated. Instead of dense charts, the UI used simple progress rings and micro-interactions (glow effects, small bursts of animation) when goals were met. The intent was motivational without being overwhelming, particularly for older users.

Companion Art & Iterations

A visual companion was designed for Phil to make the experience warmer and less clinical. Early iterations explored abstract icons, character-like figures, and minimal illustration styles. The art was used in onboarding, empty states, and reports, giving guidance and personality without distracting from core tasks.

Impact

Phil unified recipes, shopping, activity, and glucose tracking into one consistent experience. By designing modular recipes that adapted to individual health profiles, a simple nutrition score at the shelf and a journal that connected daily choices to glucose data, we made complex management feel straightforward. The result was an app that patients could use with confidence and clinicians could trust, strengthening Roche’s digital health offering and creating a foundation for future growth.

”What sets Scott apart is his deep expertise in UI design. He is one of the most talented UI designers I’ve ever worked with, and this dual strength—product leadership combined with design excellence—makes him uniquely effective in his role. At Innit, Scott was instrumental in defining product strategy and leading UI design for critical, high-visibility projects, including those for Roche and HEB. In addition, Scott mentored and guided UI designers on the team, helping them grow in their careers and perform at a high level.

Vikram NatarajanDirector/Head of PMO at Innit