How might we allow design systems to take flight within the pioneer group of UX team and devs?

For the purpose of the online portfolio, confidential information had been obfuscated. The full case study for this project will not be disclosed due to confidentiality.

Our Impact and Reach (20+ Devs and 1000+ Users)

An optimal experience lies beyond the end users. We can't take our internal users for granted to ensure sustained scalability.

In 2021, the internal pioneer group of UX team in ST Engineering went through a revamp of manpower timesheet tracking tool used within the company. Prior to the introduction of any UX initiative, the core processes within the internal team lies in adoption of online UI framework libraries for design and development of in-house digital products.

Unique Challenges

1. Pioneer group of UX team
2. Prior design was done by developers
3. Developer's knowledge gap in design system and UX practices
4. Ingrained mindset of legacy way of work

‍

Build, scale and enterprise design systems within the internal team

‍

As the pioneer UX team, we began to investigate ways to piece the fragmented experience with the eventual goal of providing consistency and efficiency to our internal team and end users.

‍

Prior to design system development, we seek to identify core users' needs with usability testing and surveys

Major UI accessibility issues pose challenge to users' recognition

Error messages were ambiguous and not specific to assist diagnosis and recovery

8/12 users were unsure of how to navigate back to home page after task completion

Labels and legends were not clearly communicating the calendar events to users

‍

Sneak peek into the previous UI which was tested during usability testing

Note: Image is intentionally blurred to keep confidentiality.

‍

Laying the foundations and atomic building blocks of design

Setting foundations to the design system is key to educate UX designers and developers on the core principles of the product.

Cards were designed with the intent as building pieces of reusable components which could be easily customised for different use case scenarios and screen designs.

‍

Develop the atomic components to screen design while addressing users' pain points

In the previous design, users had to navigate from home page > timesheet page > before selecting on a specific project to perform their task.

8/12 users were unsure of how to navigate back to home page after task completion

In the new design, users will be directly brought to the timesheet to perform their tasks as required, reducing the number of taps (mobile app) and clicks (web).

Direct access to task is supported to avoid potential navigation pitfalls

The modular components were crafted with the intent to be individual "lego variant" allowing UX designers and developers alike to adapt to the different use case scenarios efficiently.

‍

Refine the clarity of copywriting to communicate intent

In the previous design, error messages were ambiguous and did not communicate the exact problem to users. This resulted in task failures and drop offs.

Error messages were ambiguous and not specific to assist diagnosis and recovery

In the new designs, we have added a library of potential error scenarios for UX designers and developers alike to plug and use as required. Clarity of communication was the core of our focus with clear articulation of problems and proposed solutions if available.

The scenarios were developed together with the development team

‍

Scale responsively with guidance

Aside from mobile platform, this design was implemented on the web platform as well. As the development team is new to grid layouts and responsive design, we invested in efforts to provide supportive introductory sessions to bridge the knowledge gap.

Note that web platform is not included here to keep the online case study concise

‍

Manage developers and UX designers hesitance to design system adoption

The hesitant to change is clearly evident as internal teams embark in an unfamiliar territory

We thus seek to examine the internal development team's intent and context of use. We also considered how we could empower future UX designers to effectively use this design system to expedtie their workflows.

• Training workshops for application
• Clear access points to different sections
• Visual storytelling of key user flows
• Clear signposts for enquiry and action

‍

Beyond design system towards increasing UX team's impact

I seek to establish deeper understanding of current status quo to institute change within the department. To further advance UX team's presence, various self-directed activities has been initiated.

Snippets are shown below, full disclosure will not be revealed to maintain confidentiality

‍

Reflections on spearheading effective adoption of design system and UX initiatives

I'm a strong believer of an advocate for change despite resistance and ingrained mindset in legacy way of work. In considerations of design system, we wish to move beyond modular components to sync design and codes simultaneously. Development library could be generated to setup the production infrastructure for more efficient frontend development. Besides, application workshop with a clear learning agenda will be the key to championing design system usage.

‍