In order to unify a cross-platform product suite, we created a shared set of tools for designers and developers. Automation was leveraged to generate assets for multiple platforms and increased design and development efficiency and consistency across multiple products.
User & Technology Research
The Design System needed to accommodate ~70 different products across a variety of different web technologies and native mobile application platforms. Interviews were conducted with various developers and product owners for products that represented the core technologies and keystone products in our suite. The interviews gave insight into the technology stacks to find commonalities, differences, and any restrictions they have to using a common design system.
The interviews allowed us to create proto-personas of our internal users. This revealed to us the key motivators and hurdles that existed for our development teams.
The Design System needed to use a common language for both designers and developers. Our design team used an atomic design approach to their work, but we needed to verify a familiar taxonomy for everyone.
There was no clear set of strict naming conventions or architecture for CSS, and we recognized the impact that standards have on a unified design system. We adopted and incorporated a BEM naming convention, SMACSS property ordering, and ITCSS architecture to all our stylesheets. The system was built with SCSS to utilize variables and Mixins, as well as to modularize our stylesheets for easy maintenance and organization. These and other standards were researched and tested prior to implementation. The result was a scannable, searchable, intuitive set of SCSS stylesheets.
The Design System & Style Guide
The design system was built using SCSS, Gulp, and Node (to name a few resources). Each UI pattern was built using an I functional HTML shell in order do render the CSS in browser. These shells would later become the beginning code for developing a core set of shared, fully functional components. The UI patterns were developed to match the standard designs from the Sketch Symbol Library.
Iconography was implemented using an inline SVG Sprite, which is generated using Gulp. This allowed for highly customizable icons that are easy to use and have great browser support.
The design system is governed by a core group from the UX team and a development team. This group was assembled to ensure every asset was production-ready and future-forward.
The design system needed extensive documentation. The documentation was written to be straightforward and clear, with a touch of familiarity. The Style Guide also serves as a platform for displaying all of the latest standard UI Patterns in a live environment, with additional notes regarding implementation as well as code snippets for reference. The patterns are also documented with additional notes regarding internationalization, localization, and accessibility. For UI patterns that have complex interactions, or subtle animated transitions documented in the specifications, animated prototypes are displayed alongside the patterns. This allows developers to see the final implementation of the UI patterns and their behaviors.
The style guide website was developed using Bootstrap, SCSS, Gulp, and Pug. It’s stylesheet are dependent upon the Ellucian Design System, making the resource adapt and evolve as the Design System scales and changes.
Credit also to Chaz George (UX Developer), Brian Ruscio (Product Manager), Venu Kathavate (UX Developer), and Vaikunt Naik (UX Developer). Their advice, assistance, and constant support made this possible.