Web Component

Web Component Library contributes to the Mashup on the Industrial Internet of Things (IIoT) platform ThingWorx, which helps clients' engineers to build data-driven enterprise applications for themselves and their customers.

Challenges

  • Support four smart products for scalability, configurability, and interoperability.
  • Have backward compatibility to work with old technology.
  • Follow WAI-ARIA authoring practices for accessibility.

Responsibility

I played as a lead UX researcher and lead UX designer to conduct user research; define and scope components' functionality and capability. Also, I guided other product teams' design process to ensure consistency across all web components.

Accomplishment

In ten months, five complex web components were developed that met user needs and accessibility requirements.

Tools: Sketch, UXPin.

Design Process

This was a high-level design process, based on that, I created a design template to detail each step's documentation and educational needs.

Example Case Background

Schedule Chart was one of the data visualization components I designed:
As a manager, I want to check the machine productivity with different time frames and to see the nine standardized status details.
As a worker, I want to know when my shift is and the duration form the Schedule Chart.

Step 1. Research

I collected data for design directions, the inputs helped me to make design decisions. The research outcomes were discussed with the DS team technical product manager (TPM), and engineers for design establishment evaluation.

Step 2. UX Design

I applied the research outcomes into UX design, discussed the design solutions, technical feasibility, and accessibility with the TPM, and the engineers. In the UX part, the design criteria usually including:

  • User Flow
  • Anatomy
  • Behavior Design
    1. Design variation: Default, Second entry, and different paths entry.
    2. Micro interaction: Content localization, error handling, feature constraints and rules, state formatting, and animation.
    3. Responsiveness: Component container's min and max size on a page or in a container. Feature container's min and max size in the component container.
    4. Interoperation: how it works with other components or dependencies.
    5. Keyboard, mouse, and touch screen gestures.
    6. Best practice of building the component: guidance for the Builder users.
    7. Design backlog: nice to have the design but descoped.
  • Property list

Depending on the component's characteristics, not all criteria are required.

2.1 Anatomy - Parent Structure

I applied the Atomic Design methodology to establish a parent structure that layout the content and features' containers, which are the outcomes of the research.

The goal was to visualize the content, and features placement and implementation effort, each of them were detailed in the behavior design.

2.1 Anatomy - Child Structure and Dependency list

After detailing each feature's structural needs, I created a list to share with the development team, including new development needs, existing built update needs, and related existing elements.

Furthermore, it helps the TPM and engineer to estimate the effort and corresponding work in-between components.

Available Dependencies Expand Needs New Dependencies
Button X-Axis: Timeline
Check Box Pop-up tip
List Add on a Check Box on a list item.
Date Picker Add on a time picker
Text Input
Tooltips Work with Slider's values display placement
Toggle Real-time Toggle
Label
Slider

2.2 Behavior Design - Design Variation

Display the single dependencies and designated combination options for the engineers to implement. More importantly, to build a reusable, configurable component, which provides the flexibility for the builders to create the application that tailored for their customers needs.

2.2 Behavior Design - Micro Interaction

One of the user needs is the full capacity of time formats. The pain point for the user is duplicated time display. The end-user complained:

"I do not want to keep reading the same information on a chart and think it is an important data, especially the time!"

So the design provided all the time formats with truncated detail to resolve the redundancy problem. Also, the end-user was unable to find a specific time by using Slider only when managing rich data. As a solution, I combined the use of Date and Time Picker and Slider to fix the accuracy problem.




2.2 Behavior Design - Responsiveness

Sometimes, the workers just want to check their shift time quickly with their phones. Or, the floor manager carries a tablet and wants to check the machine's status while walking around the floor. I provided a responsive and adaptive design to meet their device and situational needs.

On the other hand, the Builder user wants to place the component into different size of containers, I also considered the content localization and overflow situation to meet their application building needs.

The example (legend in a small container) displays one of many dependencies' responsiveness.

2.2 Behavior Design - Components Interoperability

I demonstrated how components work together in a parent container, for the component reusability and interoperability. The example shows how to leverage Tooltip component usage in the Data Visualization.

Ideally, I would like to use the Pop-tip component to carry rich content. And provide a click event for the end-user to see the data point detail. Tooltip was the alternative design solution, and the Pop-up component was put in the design backlog due to the development effort and the release deadline.

2.3 Property list

Properties allow the builders (user 1) to customize and style the elements. By considering the builders' (engineer) nature, I worked closely with a technical expert to identify the sometimes lengthy list of user-configurable properties for the engineers' implementation. It was fun, time-consuming and sometimes painful :D

Overview