Wisetail LMS

Wisetail is a LMS platform primarily targeting retail, fitness, and service sectors. I managed the product design library, documentation, and contributed to feature designs. I spearheaded software localization and built the design system from scratch for a newly-formed team. I collaborated extensively with the engineering team to ensure the component library aligned with specs and guidelines.

Goals:

  • Create a scaleable scaleable system, starting with their admin tool

  • Provide designers with an evolving Sketch component library

  • Work with engineering to create coded version of component library and to fix discrepancies between production and design.

  • Provide extensive, ongoing documentation and education surrounding the system

  • Evangelize design system to create buy-in across the company

Role
Product Designer, Design System Lead

Platforms
Sketch, JIRA, Zeroheight

Deliverables
component library, documentation, education

UI design system including color palette, typography, buttons, and icons with different states.

Building a Design System from 0-1

The setup had two parts - one for users and one for the dashboard. We began by thoroughly checking the current UI to list differences, repeated parts, and ways to make things better. I researched and found the best tool for recording everything. We made the system following Atomic Design rules and making sure it met accessibility standards. We started with basic pieces and went on to bigger parts like components, patterns, and templates. I teamed up with engineers to create easy-to-use names for our new system.

Having everyone's input was important to me for the design system. So, the whole team came up with shared rules to help us make choices while creating everything.

Team Created and Owned

The process was deeply collaborative, drawing on the strengths of the full team. Designers would work on previously-agreed-upon components for a period of hours or days, then reconvene as a group to review and critique. After a component was finalized, it had to be documented in the design system tool (zeroheight) - a general description of the component and its states, design specs, and proper usage.

Screenshot of Wisetail Design System Sync Process webpage, detailing Dropbox Master and Staying Synced steps. Contains a sidebar menu with options like Overview, Elements, and Atoms. Instructions for using a master Sketch file with Dropbox for design system synchronization.
Comparison of two alert prompts for destructive actions. The 'Do' example uses a red background with a caution icon for a 'Delete Module' prompt, while the 'Don't' example uses a blue background with an alert icon for the same prompt.

Preparation for i18n and i10n

It was critical that our system included guidelines for internationalization (i18n) and localization (l10n). Since we had initially built our software with only stateside audiences in mind, when the decision was made to go international, this posed many problems. We had to audit all ends of the product and provide realistic solutions for how to mitigate problem areas, as well as provide visualization for how we handle right-to-left languages.

User interface in Greek with navigation menu and icons, featuring words such as "Ταμπλό," "Μονάδα μέτρησης," "Περιεχόμενο," and others.

Conclusion

This was the first time I created a design system from the ground up and not coming in on a pre-existing system. By implementing a solid team methodology, everyone involved was able to take ownership of different areas of the product. This dispersed model of knowledge helped us all to be deeply invested in the system and educated evangelists that would help ensure the company as a whole understood the importance of a system like this. Having a strong hands-on relationship with engineering meant that each part of the design system had their input and buy-in.