"Mineral UI" design system for Enterprise software
It's no secret that Enterprise software can be archaic. Our team was brought together to build a design system to adapt across the many products that exist at CA. Our challenge was to build a design system and educate teams on why their user experience should be re-thought.
CA Technologies has a very diverse portfolio from project management and chat applications, to heavy data analytics software. Creating a design system that communicates a cohesive design and easily implemented by every team can be a daunting task. During my time there I wrote up an article explaining how we planned to distribute our design system and open-source it. At the time there wasn't a great option to do this, our work around was a hybrid of Github, Abstract and of course, Sketch.
Our other challenge was color ramping. Everything needs to be accessible, there wasn't any room for using trendy two toned layers of color (for example dark blue on light blue background). We also tried our best to accomodate color blindness as much as possible; this meant the gray value in each color ramp was equal to their counterpart from another theme. One of my teammates Jeeyoung Jung wrote up an awesome article on all of our research to get the perfect color ramps.
Industry standards require Accessibility, that's a fact. Due to the age of the software we had to deal with, many products contained little to no accessibility. This forced us to document all standards, including to create new ones that we didn't find consistent through our research.
One of the biggest issues I had to deal with was multi-select input fields. Browsing through the research and multiple tagging fields, there wasn't really a consistent way of managing this input. Some approaches called for tabbing to cycle through the tags, which meant pressing tab x amount of times to move on to the next field. We built what you could say is an abomination of multiple practices, taking the best of each and creating a simple approach. For example when the field is in focus, using left or right arrow keys will cycle through selected tags, and tabbing will move the user to the next field.
Building any product requires a design plan that can easily adapt to it's growing needs. There are also limitations that should be set within a product. Our decision was to make tertiary as the maximum level for navigation. Anyone who has used or developed complex enterprise software would know this limitation may seem quite restricting. However, with this limitation we added the option to add horizontal tabs as a fourth level, and anything beyound that should be navigated through the content of the current page.
Consequence of limitations
With this limitation (and others inacted through our work), we found many products within CA both disgruntled as well as embracing the idea. Those that embraced it came to us to further test navigation paradigms, create and evolve our design system navigation documentation. This is exactly what we had hoped for. Design systems work best when the entire team and company are involved. As my direct manager Aaron Sagray from CA always stated: Design systems are a living and evolving product. What is in the documentation today may change tomorrow, next week, or a year later.
Distribution to other designers
I mentioned in the beginning our challenge to distribute our designs across teams or to the open-source community. Although all of our elements are also available and built in ReactJS, obviously designers will need access as well. We not only created a huge symbol library that enables users to quickly switch states of different elements, edit content, or even change the type of element if related (for example an input field to a date picker), but we put every possible combination into a stickersheet.
Displayed below is a fraction of the stickers we created, and any one sticker in a category can easily be changed to another in the same category through the Sketch symbol management tools.