HOME | BACK

The Design System

But First, UX Goals
When I first started at eFlex, the VP of Engineering tasked me to, as a UX Designer, set my operational goals. After an initial evaluation of the application, I reported some basic style guides first needed to be set to start getting everyone on the same page, to start establishing some consistencies, and fix inconsistencies. Personas Personas needed to be devised so we knew who we were developing for. It ain’t us. Pattern, and controls libraries needed to established, as well as, a custom icon library.

I am NOT a fan of Font Awesome or any public library. It’s a lot of time looking for something that kinda fits and then is simply a contrived representation. Or worse yet, thousands of designers use the same icons, but often with differing meanings. Thus, there is little visual distinction in appearance between apps. I believe an icon should be as specific a representation as can be. It doesn’t take much time to craft an icon once designed or imagined. Over 300 custom icons I designed or adapted and crafted for the eFlex application.
Custom Icons
Custom Icon Library

In addition, I reported I would like to do as much user surveying and interviewing as I could. Also, the application really could use content-driven Help. Its current Help did little than to offer an out-dated PDF of the user manual. A user would then have to search through the PDF to find the needed section… if it was even there or up-to-date. What is needed is if you are on a configuration screen and hit the Help icon—that section of Help is displayed.

And lastly, develop an innovation culture. I was turned on by Thomson Reuters' innovation culture, when I worked there, who even offered 20% of one's time spent on pushing for innovative ideas and changes. At eFlex, I came to find they were already there, allowing me the opportunity to present a lot of unsolicited ideas.

Goals Sticky Notes

Styling
I certainly needed to set some style guidelines, and eventually a design system. There were no set styles whatsoever. I surmised that one developer would create a function or screen with the libraries they knew, whereas another developer another library that they know. Being that Jira and Confluence were used at eFlex, I first created style guides in Confluence accessible by anyone—defining purpose and what elements should look like and how they should be used. This initially included a consolidation of colors and a defined color palette.
Color Palette To expedite fixing a large chunk of "low-hanging fruit" issues immediately, I create a Quick Fix document to quickly fix obvious issues and instantly give the application a more cohesive look. Design and Styling

These style guides would then serve as the foundation for an atomic design-based design system—of which the developers then fashioned to create a Living Style Guide built right into the application. Everyone, new and old would be working from the same blueprint now.
Style Guides