DESIGN SYSTEM IMPLEMENTATION

 HEURISTIC EVALUATION/ INTERACTION DESIGN / UI / VISUAL DESIGN

Western Psychological Services is a leading independant publisher of educational and psychological assessments for professionals in psychology and related fields. My role as the first UX hire was designing printed assessments online and improving their existing website.

The website is a platform that gives practitioners the option to conduct and score assessments online. It was built without any guidelines or with the user in mind, resulting in a high number of customer support calls. There were additional challenges to the site which included severe usability issues, outdated design, not mobile friendly, and accessibility violations.

Heuristic Evaluation

I decided to conduct a heuristic evaluation of the entire site and document my findings. I then created an inventory identifying common patterns with usability and accessibility and shared my findings to the Product Manager and relevant stakeholders as a first step to get buy in to update the issues.

Design System

I knew the site needed an entire UX overhaul and decided to create a scalable Design System for both existing and future products. It would be a team effort where both designers, product, and engineers could collaborate to ensure product consistency. I was working on another higher priority project at the time and the design system was created in parallel for a total duration of 4 months.

Stakeholder Alignment

Before starting on the design system, I wanted to get alignment from stakeholders and endorse the importance of scalability, consistency across branding and other products, and saving time on build. I invited the Product Manager, Engineering team, and the R&D team to a presentation on the benefits of a design system and the concept of Atomic Design.

The Process

I started by looking at different design systems such as Material Design and Polaris as well as CSS frameworks such as Chakra and Bootstrap to get an idea of how to structure all the information.

I first started with the existing color palette and noticed many of the colors were not high in contrast to meet accessibility standards. Working with the Art Director in the marketing department, we invented a new set up colors to comply with WCAG.

I also collaborated with the art director and chose the Roboto typeface to complement other fonts used in print. Creating typography rules to map to functional roles and use cases was a challenge for me because I started thinking about the various screen sizes and how it would accommodate the type. I utilized a site called typescale.com to use as a foundation for sizing and adjusted the type accordingly to the product we were building.

I then designed on a 12 column grid system that worked across all screen sizes.

Using the principals of Atomic Design, I broke down existing interfaces into smaller components which worked as building blocks for other components and forms. I also made sure to document various states as well as provide detailed specifications for developers to ensure accuracy in the code.

Link to the full design system can be accessed here: WPS Design System

New Design

Once the main components were built, it was implemented into a multiple choice assessment product for kids called the Test of Dyslexia (TOD). The multiple choice interactions and designs were much simpler, allowing users to focus on one question at a time. This was more intuitive for users and allowed room for less errors compared to the previous version.

Results after the release:

• The new design received a high score of 7 in the Ease of Use Rating compared to the previous score of 2

• Inspired other departments to think about improving accessibility across all platforms and print

• Enabled designers and engineers to collaborate effectively with a sustainable process to ensure consistency for future products

Lessons I’ve throughout the process

1. Design systems don’t need to have everything from the start
   When getting started, I thought it was necessary to build everything first before releasing a product. I came to realize that I could work with product managers and other stakeholders to look at what’s next on the roadmap. By doing this, I was able to build specifically for an upcoming product, rather than trying to design for everything that is on the platform.

2. Start small and don’t take the one size fits all approach
   I didn’t take the time to determine what components would directly impact the product to be released. For example, I was building out a grid system to determine different screen sizes, but that could have waited since TOD assessment is not used on mobile.

3. Log changes in the component library
   When TOD was released, I noticed small inconsistencies in some of the components. I had previously made minor tweaks and assumed the engineer would update since he was already working off the document. Since then, I made sure to communicate every revision to ensure it is implemented.