User Interface Style Guide
Creating a user interface style guide
With a cloud storage product only 2 years old, and a major update 2 months old, the only 2 UX designers on the team had been working so fast, they never had a chance to create any form of a style guide for this software product delivered over html web (java), and native mobile (iOS and Android). Developers based in the US, Singapore, and the Ukraine had still images to look at, with the occasional pice of information being added in Jira, and the rest was all guess work, which created many inconsistencies and bugs in the product.
This was a great opportunity to leverage my years of creating brand and visual guidelines as a graphic designer and apply it to the user experience and user interface of a product.
Project Details
Client Accellion
Product kiteworks
Tools Illustrator, Confluence
As Confluence is a major tool used by the developers creating this SAAS product, I decided to create the style guide in confluence, and went through each piece of the product and created specification documents and interaction rules based on what was existing in the product combined with asking the other designers what their goals and intentions were for each piece.
Icon audit to provide better assets
The project also included a complete audit of all the icons, as well as a cleanup, renaming, and redelivery of the icons optimized in various sizes ready for mobile deployment. Doing so dropped the deployment size of the product by about 50%, by creating optimized PNGs, and removing redundant files.
Improving the workflow by creating a usable template
Another piece of the puzzle was creating a fresh, clean template for the various digital platforms that linked current assets and was build on a grid, so that the designers could just pick up the file and go, rather than working from old files that may be outdate and have elements that cause more confusion that help. Shown here, the template was created in InDesign to utilize it’s master pages, style sheets, snap to grid, and interactive tools.
