This project was a full-scale rebranding effort for our web-based applications and interfaces. We took existing website designs (creaked by Sukle Advertising) and expanded upon them in order to create a systematic visual language. The goal was to facilitate rapid design, rapid development, consistency across interfaces, increased usability, and a solid consistent user experience across multiple applications.
The UI Kits and Templates were built while development of the pattern library began. Design decisions were solidified and adjusted in-browser, in order to ensure our designs were rendering as we desired them to be. The UI Kits and Templates were built in Sketch and Adobe Photoshop in order to accommodate the needs of vendors and freelance designers. This made it possible for external designers and creative teams the ability to keep our user experience consistent.
Following atomic design principles, each pattern was built from the ground-up with usability, accessibility, and best practices top-of-mind. The pattern library itself is a repository of design elements and code for developers to access, including a bootstrap theme based upon the designs. Bootstrap was selected as the base CSS framework to facilitate rapid development and ease of use by external vendors developing for our applications.
The goal was to create a Bootstrap child-theme that could be easily adopted by all development teams. Based on the technology landscape for all their applications, Bootstrap and jQuery were the best solution for easy adoption.
Unifying all of our applications was a powerful direction for our products and user experience. Disparate applications built by siloed development teams were now able to follow a guiding light. New products and features could be rapidly prototyped in HTML, and production development was sped up considerably. The framework itself laid the path for future evolution of the user experience for the entire product suite.