Case StudyDigital Pulse: Redefining CVS's User Experience with a Unified Design System
Intro
As the Design and Content Lead, I was responsible for both designing and curating content within the Digital Pulse design system. This involved the creation of reusable components with the overarching objective of facilitating their utilization across CVS teams and Aetna, ensuring consistency and efficiency in design practices
Design Process
01 Empathize: User Workshop
Objective: The primary goal of the user workshops was to collaborate closely with the Aetna team and the CVS eCommerce online shop team to identify missing components and areas for enhancement within the existing design system. Through interactive engagement, we aimed to capture the unique requirements of each team, ensuring the design system evolves to support their specific project needs and workflows effectively.
During the workshop, participants, comprising both designers and developers from the Aetna team and the CVS eCommerce online shop team, were allocated a focused time slot of 6 minutes to contribute their insights. Within this period, they were tasked with adding sticky notes to two distinct sections: 'Existing Components' and 'Identifying Gaps'. For the 'Existing Components' section, individuals were encouraged to reflect on the current design system and note down components they frequently use, including any thoughts on their effectiveness or suggestions for improvement. Conversely, in the 'Identifying Gaps' section, the participants identified and noted any components they felt were missing from the design system, which could support or enhance their projects if included. This time-constrained activity was designed to encourage rapid thought generation, ensuring a wide array of immediate, candid feedback that could be instrumental for the iterative development of the design system.
02 Define: User Personas
Based on the research I created User personas which helped to synthesize the research data into actionable insights about the users’ goals, needs, and limitations.
03 Competitive Analysis
After gaining a comprehensive understanding of our users' needs through user research, we shifted our focus to conducting a competitive analysis. This phase was crucial for understanding the landscape of existing design systems and for gathering insights that could inform the structure and layout of our own design system, as well as the formulation of our guidelines.
04 Ideate: User Journey
In the ideation phase for the Digital Pulse Design System, we're conceptualizing a dual-structured documentation that caters to both Aetna and CVS, differentiated by their brand colors—purple for Aetna and red for CVS. In this scenario, we will follow Emily journey to using the design system.
05 MVP: Style/Brand Color Guidelines
CVS
The CVS color palette is anchored by a strong, primary red, signaling action and attention, complemented by a versatile grayscale for balance. The palette is designed to meet accessibility standards, providing a range of contrast ratios for optimal legibility across digital applications.
Aetna
The Aetna color palette is thoughtfully composed to enhance the digital experience with a primary violet that signifies sophistication and innovation, paired with a calming secondary teal. Each color has been meticulously selected to comply with WCAG guidelines, ensuring clear readability and optimal contrast for all users. This ensures that our suite of health products is not only visually appealing but also fully accessible.
06 MVP: Styles/BrandTypography Guidelines
CVS
The CVS design system employs 'Domaine Display' and 'Open Sans' as its web typefaces, offering a range of weights from regular to bold. This combination is chosen for its high readability and versatility across digital platforms. The typography scales provide varied sizes for different screen resolutions, ensuring clear hierarchy and legibility in CVS's digital products.
Aetna
For Aetna, 'Helvetica' is the selected web typeface, available in regular and bold weights. Known for its neutrality and clarity, Helvetica is used to maintain a clean and professional appearance in Aetna's digital interfaces. The provided type styles and sizes cater to a wide array of devices, prioritizing consistency and accessibility in Aetna's digital communications.
07 Result: The CVS Health Design System
The final result is a dynamic CVS Health Design System, embodying a fusion of functionality and aesthetics tailored for the CVS and Aetna brands. It is a testament to collaborative design, providing expansive guidelines and resources to maintain uniformity and enhance usability across digital platforms. The system is a live entity, continuously evolving and now accessible, serving as the foundational framework for all our digital creations. To explore the design system, please visit the live link: