Leading a Corporate Design Strategy
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.
Company
Viewpoint / Trimble
Industry
Construction, Workflow Management, GovTech
Size
410 / 9.300
Role
Sr. Visual Interaction Designer
Target Audience
Construction worker, Manager, Planning, Civil engineering
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.
-
Designed a new service help portal for Viewpoint products
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.
-
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:
-
Analyze the current state
-
Involve relevant people
-
Evaluate all resources
-
Collaborate on corporate level
-
Test on scale and adaptivity
-
Test on Experience and Roll out
 Quick mind map to identify style overlap between: Pattern Library, Style Guide and Brand Guide |
|---|
 A logo mapping chart helped ux designers and frontend developers to quickly exchange redesigned icons on a global scale. |
 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. |
Starting with a holistic product audit
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...
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.
Brand flows were also an easy tool to negotiate and introduce the product color palette across the whole ecosystem. The main purpose is to provide a rough guidance of brand color - to product color ratio when diving deeper into the product. While landing pages are built around strong brand identity and recognition, the color palette shifts more towards a clean and functional
#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.
 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. |  This breakdown guide helped a lot to negotiate our product - brand integration. |  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:
I successfully led the first three design adaptations for our main products. We created prototypes and wireframes to communicate the scale of changes and conducted feasibility meetings with engineering to assess the effort required.
Each design was carefully adjusted to meet technical requirements. These three pilots provided enough adaptation and learning opportunities to develop a global design direction for the entire portfolio.
Here is the initial dashboard draft based on the newly developed styles:
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.
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