Siemens - Active Workspace Pattern Library 

(ongoing project)

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

 

01

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

MY ROLE

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

01

Project Overview

Active Workspace (AW) is an application that provides users with product 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.

  MY ROLE  

Project Management

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

Define project vision and deliver insights

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).

Build information 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 problems and my solutions by phases.

02

02

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.

  THE FIRST CHALLENGE  

Understand "Pattern Library"

For years, the UX team of AW uses PowerPoint as its primary 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.

  THE APPROACH  

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. 

  THE OUTCOME  

Decision on Critical Features for MVP

By summarizing common features/sections and their advantages/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.

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

 

  THE SECOND CHALLENGE  

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.

  THE APPROACH  

Get familiar with the content

It's challenging to design a useful pattern library without knowing the product and its corresponding pattern. I spent a large amount of time on reading existing 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 and started 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.

  THE OUTCOME  

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 

  THE THIRD CHALLENGE  

Propose One Set of Tools for Development Phase

Due to the uncertainty of the technical support our team would get, I took the responsibility to propose appropriate tools and technologies that can be used to implement the 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.

  THE APPROACH  

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 gain an in-depth understanding of what tools are being used within our environment and 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.

  THE OUTCOME  

Selected A Tool and Received Technical Support

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

Comparison analysis among different tools

 

03

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.

  THE CHALLENGE  

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 lot of 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 card sorting for this project.

  THE APPROACH  

Use Plain Language & Common Terminologies

I used plain language and common terminologies for organizing the content so that casual users and new team members can understand 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.

A view of the information architecture

 

04

Progress

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.

© 2019 built by Liang Zhao with LOOOOOVE

  • LinkedIn - White Circle
  • Twitter - White Circle
  • Instagram - White Circle