Click the image to see the WTW Software Design System live on Zeroheight
When applied properly, WTW Software Design System creates application designs that are usable, efficient, responsive, and accessible. Click the image to see design principles on the live WTW Software Design System Site.
Project Overview
Client: Willis Towers Watson (WTW)
Goal
The aim of the WTW software design system project was to establish a cohesive and consistent set of guidelines, principles, components, and patterns governing the design and development of digital products and experiences within the WTW organization. This initiative sought to streamline the design and development process, enhance efficiency, maintain brand consistency, improve user experience, and foster collaboration among various stakeholders. Additionally, the project aimed to introduce Digital Design Systems as a comprehensive offering for Monigle's Digital Creative Team, elevating brand expression and professionalism.
Intended Outcome
The project aimed to achieve several key objectives contributing to the success of digital product development within WTW and the broader Monigle agency. These objectives included:
Consistency: Ensuring uniformity across all digital touchpoints.
Efficiency: Streamlining design and development workflows through reusable components and guidelines.
Scalability: Enabling seamless adaptation to future changes and expansions.
Collaboration: Facilitating alignment and communication among diverse stakeholders.
User Experience: Prioritizing usability, accessibility, and clarity in design.
Brand Integrity: Maintaining consistency with the organization's brand identity and values.
Innovation: Encouraging creativity and adaptability to evolving user needs and preferences.
Furthermore, the creation of digital design systems positioned Monigle as a strategic partner capable of providing comprehensive branding services tailored to both traditional and digital channels. This offering addressed evolving client needs, differentiated Monigle from competitors, provided value-added services, and contributed to revenue growth by meeting clients' demand for comprehensive branding solutions.
Layout provides a visual structure for components on a page. Click on the image to see layout grid details on the live WTW Software Design System site.
Unlock the building blocks of seamless digital experiences with the comprehensive list of components in the WTW software design system. From navigation to input fields, we've got you covered.
Color distinguishes the WTW brand and helps create consistent experiences for the user across our software products, marketing collateral and digital presence. Click the image to see colors on the live WTW Software Design System Site.
Users & Audience
Who Had This Problem
The primary users facing the challenges addressed by the digital design system were designers and developers working within Willis Towers Watson (WTW).
Understanding Users
Our team gained insights into these users through stakeholder interviews, allowing us to understand their roles, workflows, pain points, and specific needs related to digital product design and development.
Uniqueness of Users
These designers and developers are specialized professionals within WTW, working with unique tools and solutions tailored to their specific areas of expertise within the company. Their work involves solving complex problems and implementing solutions that align with the organization's brand identity and guidelines.
A Day in Their Life
These professionals rely heavily on digital tools and systems to execute their daily tasks efficiently. They would use the software design system provided by WTW to ensure consistency with the company's brand identity and guidelines, streamlining their workflow and enabling them to deliver high-quality digital products effectively. Using a competitor's product would not align with the company's standards and branding requirements, potentially leading to inconsistencies and inefficiencies in their work.
Demographic Information
The users of the software design system include American and European digital designers and developers, reflecting the diverse talent pool within WTW's workforce. However, the focus goes beyond demographics to understand the specific challenges and requirements unique to their roles and responsibilities within the organization.
Dynamic and adaptable typography system in action! Witness the responsive magic within the WTW software design system, ensuring clear communication across all devices. Click the image to see typography on the live WTW Software Design System Site.
Icons are strong visual elements we can use while communicating a message. They are primarily used when creating infographics and providing visual symbols for concepts and ideas.
Roles & Responsibilities:
Team Composition:
The project involved a team of 6 individuals working collaboratively to deliver the WTW Software Design System. The team consisted of:
Nicole Boysen: Associate Director of Digital Experience Design at Monigle, who served as the primary designer responsible for creating the bulk of the Software Design System. Nicole managed the day-to-day design relationship with the client and stakeholders.
Duncan Robertson: Senior Director of Digital Experience Design at Monigle, who played a pivotal role in conceptualizing the project, scoping and contracting, and providing guidance to the team throughout the process. Duncan also stepped in to oversee the project and ensure its completion when Nicole went on maternity leave.
Chelsey Emmelhainz: Content Strategist at Monigle.
Katie Cisto: WTW User Experience Lead.
Lindsey Slutz: WTW UX Designer.
Amanda Connelly: Associate Director of Digital Client Experience at Monigle, who, along with Nicole, conducted client meetings and provided oversight.
External Help
Overlap, a development agency, was hired by WTW to code all the components of the Software Design System to align with the designed system and documentation.
Team Collaboration
The team was distributed across the United States, with some stakeholders located in Europe, highlighting the project's global nature. Despite the geographical dispersion, the team collaborated effectively throughout the project's lifecycle.
Project Duration
The project spanned 9 months, during which the team worked diligently to achieve the project goals.
Roles and Responsibilities
Research Planning, Conducting, and Synthesis: Duncan and Amanda were responsible for planning the research, while Duncan and Nicole conducted the research. Duncan and Nicole collaborated to synthesize the research findings.Stakeholder or Client Meetings: Amanda and Nicole led client meetings, with oversight from Duncan.
Design Deliverables: While the project did not involve user flows, wireframes, or storyboards, it required meticulous documentation outlining the pieces to be created and the accompanying documentation needed for each component of the system.
Visual Design: Nicole led the visual design efforts with support from Duncan, who assumed responsibility when Nicole went on maternity leave.
Collaboration with Development Team: The design team collaborated closely with the development team at Overlap to ensure seamless alignment between the visual designs and the coded components.
Buttons trigger events and initialize actions. Button labels let the user know what will happen next. Buttons can be used to submit a decision, start a task or move the user through steps to complete a process. Click the image to see buttons on the live WTW Software Design System Site.
Elevation uses shadows to add depth to design elements and establish a visual hierarchy for the user. Click the image to see elevation on the live WTW Software Design System Site.
Scope & Constraints
Unexpected Events and Scope Changes
As this was our first endeavor in delivering a digital design system, we encountered unforeseen challenges that prompted adjustments to the project scope and process. Despite these surprises, effective communication and collaboration with our client ensured that none of these hurdles led to project delays. While some adjustments were needed, we worked closely with our client partners to ensure their needs and timeline were still met satisfactorily.
New Stakeholders and Scope Alterations
Fortunately, we did not experience the introduction of new stakeholders midway through the project, maintaining consistency in our client interactions and project scope.
Dealing with Stubborn Stakeholders
While our main client stakeholder occasionally exhibited stubbornness, it was always grounded in valid reasons, such as seeking deeper understanding or ensuring equitable workloads for all involved parties.
Technical Constraints
Special technical constraints primarily pertained to the development team responsible for implementing the final design system. To address this, we designed the system with various options and compliance levels specified, enabling users on platforms with limited support to align their expressions with the master brand as closely as possible.
Sensitive Information and Access Constraints
While the project did not involve sensitive information requiring access restrictions, we encountered constraints related to file access and permissions within Zeroheight. However, through effective collaboration with the WTW team, we established working processes to ensure access to all necessary areas and maintained file alignment throughout the project.
Mitigation Strategies
To address these constraints, we prioritized clear communication, proactive collaboration, and adaptable processes. By maintaining open channels of communication with our client, addressing challenges promptly, and implementing flexible workflows, we navigated through the project's constraints while delivering high-quality results.
Seamless user interactions start here! Explore the meticulously crafted text inputs for forms within the WTW software design system. Simplify data entry and enhance user experiences effortlessly. Click the image to see forms on the live WTW Software Design System Site.
Checkbox is an input control that allows users to select any number of items from a set. They are used to present users with multiple options. Click the image to see selectors on the live WTW Software Design System Site.
Process & What We Did
Project Initiation
The project originated during Monigle's engagement with WTW's rebranding efforts. While developing a digital toolkit and establishing a Beam platform for WTW, we identified the need for a Software Design System (SDS) through stakeholder discussions.
Understanding the Problem
Stakeholder interviews across WTW teams helped us grasp their challenges with the previous brand and UX work. This insight ensured our solution addressed their specific needs comprehensively.
Early Planning and Conceptualization
Rather than creating wireframes or prototypes, we outlined the project's scope, detailing all required elements, states, and sizes for the final deliverable.
Stakeholder Collaboration
Close collaboration with stakeholders, led by our client liaison, provided critical feedback and direction throughout the project. While at times demanding, their insights proved invaluable in shaping the solution effectively.
Iterative Development
With stakeholder feedback as our guide, we iteratively developed the SDS components and documentation, relying on Figma files for design elements and Zeroheight for storing and sharing guidelines globally.
Final Deliverables and Validation
The project culminated in a comprehensive set of Figma files and a Zeroheight website housing the SDS. Positive feedback during stakeholder rollouts and ongoing endorsements from end users confirmed the solution's efficacy in addressing the identified problem.
Lessons Learned and Future Considerations
In future projects, we would consider breaking down the work into smaller phases to manage resource allocation more effectively over time.
Continuing collaborative partnerships with stakeholders would be prioritized to navigate challenges seamlessly.
Anticipating and allocating resources for additional design and writing support would enhance project efficiency and quality.
Seamless navigation at your fingertips! Explore the intuitive dropdowns within the WTW software design system for effortless user journeys. Click the image to see navigation on the live WTW Software Design System Site.
Search enables users to input keywords into a text field to view related results. Click the image to see search on the live WTW Software Design System Site.
Outcome & Lessons
Project Performance
The project was completed on time and within budget, although scope adjustments were necessary to maintain this.
Some originally planned work was transitioned to the WTW team to complete internally, contributing to cost savings.
Final Deliverables
The final deliverable comprised Figma files, guidelines, documentation in Zeroheight, and code stored in GitHub.
Team Dynamics
Initially positive and optimistic, the team's mood shifted to a mix of positivity and fatigue by the project's end, indicative of the challenges and intensity experienced throughout.
Stakeholder and User Reception
Stakeholders and users reacted positively to the delivered system, expressing gratitude for its comprehensiveness and effectiveness in meeting their needs.
Success Metrics
Success was measured by meeting deadlines and receiving positive feedback from clients and stakeholders, both of which were achieved satisfactorily.
Lessons Learned
Attention to scoping details is critical, particularly in large projects, to ensure clarity and alignment from the outset.
Flexibility in scoping, coupled with ongoing communication with clients and stakeholders, enables projects to evolve and adapt without compromising quality or exceeding scope boundaries. This fosters successful outcomes and minimizes potential frustrations or shortcomings.
Elevating the WTW brand journey with dynamic page heroes from our meticulously curated software design system.
