DESIGN SYSTEM
A toolbox for designing powerful apps, offering resources for both Designers and Developers.
Overview
Date: 2019.08 - 2020.03
Role: PTC UX Designer
Responsibilities: Lead design brainstorming and grooming session for web components. Create whiteboard, user flows, wireframes, interactions and behavior specifications. Comply with WCAG 2.0 and WAI-ARIA to meet accessibility standard. Conduct research and usability testing to iterate the design.
Challenges: I have the ownership of UX component library in Figma, web component including Left Navigation, Data Filter, Pagination, and Date Time Picker. The three components design must meet different product requirements and use case so the cross-team collaboration is the key.
Accomplishments: Within 6 months (1 product release), I delivered the full UX spec, worked with different team and developers, and made some common UX patterns for PTC. The design has been tested, and shipped on-time, based on usability testing results, this design greatly helped optimize the navigation user experience.
Design Process
As a UX designer working at a complex enterprise platform, making sure the user experience consistent across all of the designs and contributing to the Design System is important.
Until today, I've contributed to Design System several component and design patterns: Global Navigation, Data Filter, Pagination, Date Picker.
UX Design Deliverables Timing in a Scrum Team
UX Component Library
Since many UX designers need the wireframe style web component to build their wireframe, however, Design System don't have the component library on the Figma (Our Common Wireframing Tool) yet. So I helped Design System built the Figma UX component library which .includes 31 components.
Whiteboard & Workflow
White Boarding Session for Component Workflow
Navigation Menu Component
After meeting with other designers and collect all the use cases, I conducted several whiteboard sessions, and put together the initial wireframes.
Then I worked with UI to meet the WAI-ARIA 2.0 web accessibility compliance.
Data Filter
Data Filter - Anatomy
Data Filter - Prototype
In order to validate design, I conduct and facilitate usability testing with 15 participants. 90% of them are able to complete the task and differentiate the internal logic and rationale. (eg: AND & OR logic)
Pagination
For Pagination component, I quickly A/B tested with 15 users with 3 different design layout. Participants have the general preference on the simplified version and barely used the advanced feature such as customize how many records per page.
Date Time Picker
Atomic Design
Date Time Picker web component is able to customize.
When developer for the application add picker to the canvas, some properties like: Display Seconds, Primary action position can be turned on/off based on the needs.
