Stanford H&S

We kicked off the design process by collaborating with Stanford H&S on element collages to explore visual direction. Early conversations helped align everyone on key theme qualities, such as whether the look should lean bold and colorful or remain more traditional. Three themes were presented, but H&S chose to move forward with two parent themes: Colorful and Bold, and Traditional.

With the visual direction in place, we moved into setting up our design foundations in Figma. This step laid the groundwork for efficient and consistent component creation across themes. We defined key styles, such as color palettes, typography scales, spacing systems, and grids that would serve as the building blocks for every component to come. Establishing these foundations early ensured visual consistency and streamlined the design process as we moved into more detailed UI work.

As we moved into the design phase, we adopted a vertical slicing approach, focusing on individual components like news blocks and hero images instead of entire pages. Each component was carefully designed and reviewed with the H&S team to gather feedback and ensure alignment. Multiple states were created for each component to cover different scenarios.

Our iterative process focused on enhancing how each component supported a clear, accessible, and enjoyable user experience. Prioritizing the most valuable and frequently used components allowed us to deliver key design solutions early. Throughout the process, we closely partnered with developers to align design and development efforts, enabling the H&S team to provide thorough feedback during every stage.

At the core of the project, we created a scalable design system that provided maximum flexibility for the H&S team. We developed a unified system of themes grounded in a shared design foundation, allowing for easy customization while maintaining visual consistency. Using these established foundations, we demonstrated how the team could craft new color pairings and palettes to give each department a distinct yet cohesive look. Our goal was to deliver a design system that acts as a toolkit, empowering the H&S team to create diverse design combinations and scale digital experiences that meet the unique needs of various departments, all while preserving a consistent brand presence.