Grove by Sutter Health
Learning platform to train physicians, social workers, and caregivers in The Grove healthcare model, focused on supporting older adults with complex health challenges. The platform required brand definition, a searchable resource library and an updatable course syllabus for senior staff.
Designed by me, developed by Alex Nitta at Woodshed.
Information architecture
The early stages of this product focused on curating and auditing content, the goal being to make it as accessible as possible. To achieve that, I spent significant time designing an information strategy in close collaboration with both development and the course director.
Navigation
The information architecture heavily influenced the navigation design. Following the content audit and then a user survey, we chose to keep navigation visible—making the experience more approachable and reducing cognitive load.
Wireframes
To address questions from investors and the course director about content interaction, I developed previews across device breakpoints of key site areas to provide clarity and align expectations.
Knowing to keep the navigation visible helped simplify the wireframing process. The layout followed a three-part structure: navigation on the left, content in the center, and a flexible details panel on the right. Starting with the course page set the foundation for organizing the site’s most content-heavy area.
Design language
This project was guided by Grove’s core mission: 'a community that cares for a community'. Drawing on internal presentations, I crafted a simple, symbolic, and geometric design language to reflect the natural, interconnected care that Grove stands for. The visual system ties back into Sutter Health’s broader brand strategy, while also carving out a distinct identity for Grove’s specialized services. Recreating components from the Shoelace design system ensured design consistency and streamlined development.
Focus
To enhance readability and support sustained focus, lesson text was constrained to an optimal line length of 45–75 characters on desktops and large tablets. A custom 'Focus Mode' toggle was implemented to collapse all secondary navigation and peripheral UI, helping reduce cognitive load during learning sessions.
Search
Grove learning cohorts spend much of their time onsite with patients. In consideration of this, I carefully refined the user experience on mobile and tablet devices. In a patient environment, access to the resource library takes precedence, either through the search function or with a direct lookup.
Learnings
Simplicity
In complex health/learning environments, simplicity is clarity. I learned to really cut anything that didn’t serve the user’s goal, and to respect their limited time and cognitive load.
Cross-disciplinary collaboration
Working alongside medical professionals, educators, and developers showed me the power of shared language and iteration. I learned to facilitate alignment between teams with very different perspectives and priorities.
Accessibilty
Designing for a diverse audience across multiple disciplines emphasized the importance of typography, contrast, and information density. I gained a deeper appreciation for accessibility as a core part of design quality.
Let's chat!