Sunrise Design System
Scalable patterns and practices for mobile health app product suite.
Overview
Background
Best Buy acquired Lively (formally Great Call), a company focused on improving the lives of seniors and their caregivers by helping seniors live more independently. Lively provides hardware and software solutions, including their signature wearables, fall detection platform, and 24-hour call center.
Problem
Product teams need to integrate new Lively service offerings into two existing apps. However, the apps are off-brand, look and feel outdated, and not designed with scalability in mind. Because the apps are hard to use, our users feel frustrated and this has contributed to poor app store reviews and ratings. As the service offerings grow, so does the problem, as designers and engineers add their design and code variations.
Goal
Reduce friction and bring delight to our users by creating a cohesive on-brand design system; improve efficiency and collaboration for designers with a published component library; reduce build time by supporting engineers to build a new React component library.
My design process
I use an iterative test-and-learn process for Sunrise. I embrace the idea of a "living system" that is informed by continuous learning and always evolving to best solve for the needs of immediate users (designers & engineers) and end app users (seniors & caregivers).
Though not always linear, my workflow involves moving between phases of ideation, research, documenting, component building, and publishing in Figma. I use insights from user research findings to help make informed decisions at every phase.
The ongoing support I provide involves coaching designers on using the design system and designing with research-driven best practices and accessibility in mind.
Applying the process
I often combine the ideation and research phases. I believe in trying lots of ideas in the beginning then narrowing as I synthesize accessibility, best practices, and brand needs.
Below are examples showing phases of the process for designing the Sunrise Button component:
To help narrow my color choice for Button, I explored ways color might be used across the user interface by doing several conceptual studies. I also gave thought to illustration needs and provided conceptual direction for a design partner working on illustrations.
I looked at other apps focused on fall detection and senior safety. This helped gain inspiration and explore ways to differentiate our products from competitors through color.
With purple and magenta being the leading Button choices that best encompassed brand, I still considered all accessible color choices within the Sunrise palette. I used a wireframe format to compare and build confidence for a decision.
Since Magenta competed with critical alert states, Purple was chosen for Button because it provided a strong connection to brand yet didn't compete with important interaction states. To ground color decisions based on this ideation and usability research, I created some Sunrise color principles.
Once color was decided, I looked at button size and shape. Usability research shows that rounded corners are perceived as more friendly and inviting. Since rounded corners require more padding, I used this study to show how I weighed that trade-off and picked leading directions for further prototyping.
Next, I built interactive Figma components to study interaction states that would work across other components.
I worked with UX designers to look further at Button in the context of feature work. I find this work the be the most rewarding!
Collaborative sessions allow us to further try things out and make final refinements before testing design system solutions with our users. During this phase, I also met with engineering and accessibility teams for input.
Build
During the build phase, I partner with engineering to help create a shared language for talking about our design system. This example shows some things we discussed for our Modal which includes Button as a core component.
I published the button component into our shared Sunrise Figma library, and updated documentation to include guidelines for usage and accessibility considerations.
