Case: Forcepoint Felix Design System
Challenge
-
Forcepoint is a purpose build company with a product portfolio made out of products from 5 companies.
-
Each product originally had their own design teams, product strategies and branding. All at different levels of maturity.
Approach
Broad cross organizational collaboration driven by the UX team
Role:
Director of Global UA and UX.
Setting the Expectations
The Felix design system was at first tied to the platform strategy, aligning the pillar designs to platform deliverables.
Plan was to roll out the design system as the platform features were integrated into the products.
Illustration from internal presentation to stakeholders. This shows the initial platform dependency of rolling out the design system.
Adjusting the Approach
As the platform strategy changed, the design system could not rely on platform development. Instead we adopted a product by product approach.
Felix V1
Laying a Foundation
The first version of the design system was launched together with a product called Dynamic Edge (later renamed to Private Access).
-
Initial design was purposeful simplistic and worked as a first step to both unifying the product UIs as well as making the UX team work on a global scale
-
Color choices played off the corporate branding guidelines but with respect to UI needs and accessibility compliance (contrast)
Felix V1 was based on one product (Dynamic Edge/Private Access). The V1 could bethe test bed from which the other products could learn.
Felix V2
Adding Details
Finding the right level of detail for documentation, even what needed to be documented, was an ongoing discussion within the UX team and with our main stakeholders in development and product management organizations.
With the V2, the design system we expanded and made several structural changes to the UI frame, such as moving the main navigation to the left side for a more modern feel.
The work on the design system was also expanded with a more rigorous project plan, more defined development and review process.
We started rolling it out to more legacy products.
V2 was more structural changes as the color scheme was a gradual evolution from V1.
Felix V3
Maturing & Executing
With the V3 we consolidated our content both in terms of documentation level as well as how we executed as a design team.
We aligned to new corporate branding ("translated" into UI requirements where needed).
As a team we moved from the Sketch/InVision/Abstract combo and consolidated on Figma, including ensuring a true global component library.
With V3 of the design system the focus changed to using a new V1, Dynamic User Protection (DUP).
Maturing & Executing
With the V3 we consolidated our content both in terms of documentation level as well as how we executed as a design team.
We aligned to new corporate branding ("translated" into UI requirements where needed).
As a team we moved from the Sketch/InVision/Abstract combo and consolidated on Figma, including ensuring a true global component library.
Terminology and Inclusive Language
Prospero Language Guidelines
By end of 2019 I took leadership of User Assistance for Forcepoint. Similar to UX, I made it a true global team, similar to how I transitioned the UX team to a global mindset.
The two practices got closer to each other enabling more collaboration.
As we had seen with the design efforts, a global mindset helped move legacy products towards a common platform approach. Having consistent terminology across products, was a challenge.
In 2019 we also saw a shift in the tech industry towards more open and inclusive ways of working, designing and writing.
With the learnings from Felix, we came up with a similar approach to all aspects of our documentation, aligning in-product help, UI text and documentation.
Key Insights
The design system was developed by a virtual design team with focus on design elements with highest impact vs. development cost.
We delivered a unified shell, color scheme with atoms, molecules, organisms, templates and pages.
We used approximations for legacy products, while new products adopted the designs as specified.
To operationalize the design system we looked at:
-
Cost of administration
-
Operationalize, roll out to designers and developers
-
Communication and stakeholder management
-
Governance across products
-
Alignment with UI development (creation of UI components and common practices)
Global platform thinking vs. individual product delivery schedules were an ongoing challenge.
UI was developed in multiple frameworks, that we as had to support. This meant replication of work and additional work for us to ensure implemented quality.
While the User Assistance team couldn't adopt everything from the design approach, they greatly benefitted from having more end to end ownership of their deliverables, making it easier to push out the needed updates and having a company wide impact.