Leading a Corporate Design Strategy

2019 | Viewpoint/Trimble

In Spring 2018, Trimble acquired Viewpoint to create the industry's most complete construction management solution. With the acquisition came a request to create a design strategy for brand & product alignment.

Goal

Develop a holistic design strategy that visually embeds all Viewpoint products into the Trimble ecosystem.

 

Work on the foundation for a company wide design system solution.

Challenges

Big design diversity across the whole portfolio (user experience, visual design and tech stack).

Communication barrier between marketing (Brand) and production (Style guide). Align with Trimble brand guidelines.

What I've achieved
  • Helped building the foundation of a corporate-wide design system. Now rolled out as Trimble Modus.

  • Introduced several new design deliverables

    • Design briefs

    • Design Manifesto

    • Global component sticker sheets (Sketch)

    • Unified design token documents (Sketch)

  • Successfully restyled three pilot projects based on new design directions.

  • Reignited the communication flow between marketing and product.

What I've learned
  • Synchronizing brand and product design is an exciting opportunity that also enables optimizing the way departments collaborate.

  • Patternized design integrations with global tokens are not a luxury item anymore. A dramatic decrease of front-end work and shorter feedback loops are only one side of the benefits. Functional living design systems are the proof of a successful design - engineering integration.

  • Goal-oriented workshops and proactive communication are crucial for the success and quick approvals across the board.

  • During this project I had the opportunity to take a LUMA practitioner training to become a LUMA practitioner for design thinking and ideation workshop facilitation. ✨

Building a Design Foundation

In order to achieve that high staked goal, a lot of moving parts needed to be taken care of:
 

  1. Analyze the current state

  2. Involve relevant people

  3. Evaluate all resources

  4. Collaborate on corporate level

  5. Test on scale and adaptivity

  6. Test on Experience and Roll out

Analyzing What We Have

Good design starts with a good documentation. To get a better understanding of our 'design maturity', I started to to take a deep dive into each product and gathered information about:

  • Ux patterns

  • Visual language

  • Basic components

  • Technical requirements
     

I spoke to engineering teams, made hundreds of screenshots to get a holistic picture of our product ecosystem. We knew that the transition will be a long term project...

In our case we had three sources of truth that were not aligned at all:

  • Pattern Library (codified components)

  • Style Guide (Sketch libraries)

  • Brand Guide

Mindmap_-_Style_Guide_inventory

Quick mind map to identify style overlap between: Pattern Library, Style Guide and Brand Guide

Icon mapping

A logo mapping chart helped ux designers and frontend developers to quickly exchange redesigned icons on a global scale.

UX Ecosystem - Viewpoint

Tooling alignment is crucial if you want your design team to collaborate with more efficiency. This chart was a base for discussions about how we want to work together.

Three examples of new deliverables
#1 - The brand flow experience

One very helpful deliverable was the "Brand Flow Sequence" (BFS) which visualizes the amount of "branding" throughout every touch-point of the user experience from an ad / landing page to the actual working environment / product. Highly adaptive and scalable.

You can create a BFS for every product experience to identify deviations easily. The Viewpoint brand flow was based off Tekla's smart design alignment approach from 2017

BrandFlow.png

Brand flows were also an easy tool to negotiate and introduce the product color palette across the whole ecosystem.

#2 - The Design Manifesto

A design manifesto describes the holistic experience in a purely written excerpt. It outlines personality and the promise to the user. I never worked in a company with an actual design manifesto, so I had to build one. I conducted two main workshops (in addition I gathered more information in smaller interviews with stakeholders).
 

1. Workshop - Product Manager / Directors Interviews / Sales

  • Gather expectation / promises

  • Collect feedback from core customers around their expectations

 

2. Marketing Feedback

  • Brand guidelines

  • Evaluation of proposal


Based on the gathered information I could outline a first draft for our design manifesto which had about 7 minimal pages in total.

The manifesto was a very helpful tool to maintain and deepen a chosen basic design direction without hitting expectation walls. It could easily be shared with new designers and product owners.

#3 - The Color Analysis Table

I want to show you a little breakdown of my color research including WCAG 2.1 compliance check. I did this for colors, fonts, iconography as well as illustrations & visualizations.
 

I believe that a good brand personality must not necessarily be the result of a preference test. Knowing the target audience, the product and it's intended experience will be a good baseline for experienced designers to come up with a characterized interface. Those characteristics should always maintain the highest usability possible.

Color_Spectrum_analysis

I want to show you a little breakdown of my color research including WCAG 2.1 compliance check. I did this for colors, fonts, iconography as well as illustrations & visualizations.

Color_Spectrum_analysis_Accessibility_Co

This breakdown guide helped a lot to negotiate our product - brand integration.

Color_Spectrum_analysis_Accessibility

This breakdown guide helped a lot to negotiate our product - brand integration.

Evaluation and Early Test Runs

The evaluation was a sequence of presentations, workshops and first prototypes. After I got the approval for the proposal, we picked three projects with different technical restrictions for the pilot run.

The following animation gives you a quick rundown of a first design strategy presentation:

2019-08-14 16.04.39.gif

I lead the first three design adaptions for our main products successfully and . We've created prototypes and wireframes to communicate the scale of changes and also conduct fesability meetings with engineering to weight of efforts. Every Design was carefully adjusted to their technical requirements. These three pilots were enough adaption and learning opportunity to come up with a global design direction that caters for the whole portfolio.

One first dashboard draft based on the newly developed styles:

Untitled.png
Collaboration on scale - a global design system

After our successful redesign pilots we had to make sure to sync up with Trimble. The global coverage could only be solved with a design system on corporation level like IBM's Carbon or Lighting DS from Salesforce.
 

In mid 2019 I joined the Trimble UX council to start working on the global design system with a small specialist team for about 3 months before I signed up for another adventure 🙂.

Conclusion

I learned a lot through this project. It was pretty demanding but everybody became instantly supportive because the benefits were just so impactful. A proper design documentation / process is an upwards spiral if build carefully.

  • Easily adapt to any brand changes / images

  • Create a vivid and authentic experience that transport brand values in a personal and nonartificial way

  • Easily expand your product portfolio and safe efforts by reusing constantly evolving components

  • Faster default design pipelines

  • More time to improve actual user experiences through constant iterations of all patterns