Design System
To help with visual consistency across applications, I produced a design system and an intranet resource site to provide education, documentation, and usage of the new design system. This made it easier to focus on user experience with each updated application.

US Job Corps Standards - Overview Page

Documentation
I needed a way to provide both an explanation of how various components should be used, as well as a how to code them. The definition pages consist of a description, a working example, and a code snippet of how the component should be coded using HTML in the application's view. This makes it easier for developers to copy and paste the snippets into a view, and still maintain design consistency.

US Job Corps Standards - Component Page

Implementation
In order to implement the site quickly so I could maintain focus on documenting the design standards, I used a static site framework based on Node.js, that used Handlebars as its template language, and Markdown for easy formatting within the documentation.

An example of a component partial.

Development
Not only was branding and documentation important, but also the site's own user experience. The framework used Gulp as a task runner, which made it easy to add enhancements to the build process, such as extending the framework's navigation generator to three levels (from its initial one level), and producing archives from the distribution files for developers to easily download the kit.

Tasks added to extend the generated navigation, and produce and distribute archive packages for developers.

Source Control
I used source control to record an accurate history of changes to the project, initially using Git, and then migrating to Team Foundation Server so that the project could be kept with the rest of the organizations products.

A log of updates to the project. Some lines have been masked to protect sensitive information.

Back to Top