Siemens - Active Workspace Pattern Library | Liang Zhao (2022)


Siemens - Active Workspace Pattern Library


(ongoing project)

Siemens - Active Workspace Pattern Library | Liang Zhao (1)

*To comply with my confidentiality agreement,I have omitted and appropriated confidential information.


Active Workspace (AW) is an innovative interface for Teamcenter that provides users with a streamlined and intuitive product lifecycle management (PLM) user experience. In order to let users build customized AW that is consistent with its core features, I spent 6 months working on creating a pattern library to centralize and standardize the UX Standard of AW, and code snippets.

Project Overview


I communicated with 7 team members weekly to make sure the project move by the plan accordingly and to receive feedback for iteration.

Project Management


Project Overview

Active Workspace (AW) is an application that provides users withproduct lifecycle management (PLM) capabilities. To help team members build AW features that are consistent with our UX Standards, I spent 6 months working on creating a pattern library to centralize and standardize the standards and code snippets used across AW interface.


Project Management

I communicated with 7 team members weekly to track project progress and to receive feedback for iteration.

Define project vision and deliverinsights

I worked with 4 project stakeholders to define project vision, deliver insights from marketing research, and determined critical features for building a minimum viable product (MVP).

Buildinformation architecture

I re-organized existing UX Standards and created a new information architecture for the pattern library.

Create high-fidelity mockups

I first created a proof of concept to demonstrate the feasibility of the design, then modified the mockup to communicate with the development team.

Usability Testing

Till now, I conducted 3 rounds of usability testing for iterating the design of the pattern library.

Due to the fact that we are in an agile development environment, our team divided the development of the pattern library into four phases. Below, I discussed the problemsand my solutions by phases.



Discovery Phase

In this phase, our team determined the scope of the project, the steps whereby the pattern library features will be individually designed, developed, tested, and deployed.


Understand "Pattern Library"

For years, the UX team of AW uses PowerPoint as itsprimary platform to store UX standards, however, maintaining and updating the content through PowerPoint require a lot of effort and time.

Our challenge was to figure out what is a pattern library, and what kind of pattern library allows the UX team to deliver updated UX standards to the AW team.


Marketing Research

I decided to look into existing pattern libraries. By doing so, I not only gained a better understanding of what a pattern library is, but also discovered the advantages and disadvantages of different pattern libraries.

Siemens - Active Workspace Pattern Library | Liang Zhao (2)
Siemens - Active Workspace Pattern Library | Liang Zhao (3)
Siemens - Active Workspace Pattern Library | Liang Zhao (4)
Siemens - Active Workspace Pattern Library | Liang Zhao (5)
Siemens - Active Workspace Pattern Library | Liang Zhao (6)


Decision on Critical Features for MVP

By summarizing common features/sections and theiradvantages/disadvantages, we determined on what platform we would build our pattern library on, what sections would be covered in the pattern library, and what features we would develop in order to improve the user experience of the pattern library.

Siemens - Active Workspace Pattern Library | Liang Zhao (7)

A summary of existing pattern library. Using this sheet, our team determined on the most important deliverables.


Build a Proof of Concept within 3 weeks

Due to the limitation of the time and the uncertainty of the technical support the team would get, our team decided to spend this first 3 weeks on creating a proof of concept for the purpose of demonstrating the feasibility of the design and communicating the idea with executives for an accurate cost estimate. Since I was working on 3 other tasks at the same time, how to prioritize tasks was challenging.


Get familiar with the content

It's challenging to design auseful pattern library without knowing the product and its correspondingpattern. I spent a large amount of time on readingexisting documentations, using AW, and connecting the UX Standards with the actual product. This process helped me quickly understand what AW is, why UX Standards are designed in certain ways, and what their connections are. I then create an information architecture for the pattern library.

Less Sketching, More Prototyping

Instead of following all design process, I proposed an informed recommendation of the pattern library interface andstarted to build a mockup in Axure immediately. To make sure that all the critical features have been covered in the mockup, I walked through the updated mockup with my mentor during the daily discussion.


High-fidelity Interactive Prototype with Real Content

The proof of concept was completed on time. After a few rounds of iterations, our team successfully communicated with external Siemens employees


Propose One Set of Tools for Development Phase

Due tothe uncertainty of the technical support our team would get, I took the responsibility to proposeappropriate tools and technologies that can be used to implementthe project. Since I haven't had much experience with programming, my challenge was how to determine the most efficient and appropriate tools with limited knowledge.


Communicate, Communicate, Communicate

I took three approaches: online searching, interview, and small talks.

For online searching, I searched for existing technologies and summarized the advantages and disadvantages of each tool.

For the interview, I conducted 6 interviews with Siemens employees who are working on similar projects. This approach allowed me to gainan in-depth understanding of what tools are being used within our environmentand what the advantages/disadvantages are.

Meanwhile, I actively talked to the development team to understand how AW is being structured, as well as what are the tools that are being used.

Three approaches help me select a list of tools that can be adopted into the implement of the project.

Design Metric for Comparing Tool Candidates

Since it's not realistic to adopt all the tools on the list, I worked with my mentor to create a metric for comparing tool candidates and making recommendations.


Selected A Tool and Received Technical Support

The recommendation helped the team to determine on which tool to use fordevelopment and which team we should reach out to. We quickly discussed with anexternal development team about future collaboration. The result was that two teams agreed on working collaboratively. The next step was to create detailed project plan.

Siemens - Active Workspace Pattern Library | Liang Zhao (8)

Comparison analysis among different tools


Design Phase

In this phase, I worked on modifying the proof of concept, organizing existing content, and creating an information architecture for the pattern library.


Build A Meaningful Information Architecture

AW is an application with powerful but complex functions. The UX team uses a set of unique terminologies. Meanwhile, the development team uses another set of definitions. How to design an information architecture system that is meaningful for both teams is challenging.

The Limitation of Card Sorting

Card sorting is a common method for building information architecture, however, this method can't provide useful data if the participants are not familiar with the topics. In our case, a lotof the terminologies used in the UX Standards documentations are new to the developers. Moreover, since most of the UX designers have only worked in specific domains, they are not familiar with all the UX standards. Thus, it's not appropriate to use cardsorting for this project.


Use Plain Language & Common Terminologies

I usedplain language and common terminologies for organizing the content so that casual users and new team members canunderstand the content intuitively.

Tree Testing

I first created the information architecture alone, then conducted 3 rounds of tree testing using an online tool called Optimal workshop. The results showed that, besides a few wordings, the architecture made sense to the participants in general.

Siemens - Active Workspace Pattern Library | Liang Zhao (9)

A view of the information architecture



The project is currently in development phase, where I helped with modifying the JSON files and CSS code.

More progress and lesson learned will be updated in the future.

Previous Project

Purdue - Web Template

Next Project

DIA2 - Website Design

Promoting a website template to Purdue Graduate Programs

A websitefor introducing DIA2 and explaining design philosophy

Top Articles

You might also like

Latest Posts

Article information

Author: Gregorio Kreiger

Last Updated: 07/25/2022

Views: 6053

Rating: 4.7 / 5 (77 voted)

Reviews: 84% of readers found this page helpful

Author information

Name: Gregorio Kreiger

Birthday: 1994-12-18

Address: 89212 Tracey Ramp, Sunside, MT 08453-0951

Phone: +9014805370218

Job: Customer Designer

Hobby: Mountain biking, Orienteering, Hiking, Sewing, Backpacking, Mushroom hunting, Backpacking

Introduction: My name is Gregorio Kreiger, I am a tender, brainy, enthusiastic, combative, agreeable, gentle, gentle person who loves writing and wants to share my knowledge and understanding with you.