NUcleus feature image

NUcleus

Design System and Documentation Site

Features | Design Systems, Information Architecture, Design & Developer Documentation, UX & UI
Project Type | Documentation
Client | University of Nebraska
Tools | VSCode, SCSS, HTML, Handlebars, Foundation, Microsoft Apps, Agile Methodology, Scrum

Description

NUcleus* is a design system and family of development frameworks that were created by the NeDDS team. It includes a wide range of components for use in developing applications (NUucleus for Apps) and websites (NUcleus for Sites).

While there are two separate divisions of NUcleus (Apps and Sites), all the pages within the documentation site are written, organized, and built utilizing the same structure.

*Please note that this site is currently still under a VPN. Some pages do not load when off of it, or will take a long time to load as we reach out to the server team to get this resolved. For this reason, images are included below. Development of this site is ongoing, as we are working on the last outstanding component pages, getting the live preview feature functioning appropriately, and planning the the design side of the site. Right now, the majority of work done reflects only the code side as it was the most immediate need for our developers.

Objectives

  1. Develop a comprehensive site that organizes all design and development information for NUcleus components, making it so we no longer rely solely on the use of and maintainence of internal OneNote files.
  2. Make the site functional for use both internally—for implementation purposes, and externally—for prospective users and/or teams who would want to utilize NUcleus for their projects.

My Work

When I was brought on to the NEDDS team in April of 2020, the team was well into the development of a web application called Theorem. Because of the amount of design and development that was done before I was brought on, PLUS the amount of new work that was completed upon my joining, this meant that there was a lot of technical debt when it came to the documentation of these components.

I have worked with two other front end developers to determine:

  • The best way to organize large amounts of both technical and design details in a way that works across the tiniest AND the most complex of components
  • The best combination of existing and new design that would allow the site to maintain brand requirements but be flexible enough to work for this very different use case
  • New standards for our written content to ensure that the entire site used cohesive verbiage

I was responsible for:

  • Helping to define standards and best practices for front-end development architecture and UI patterns
  • Writing content for component pages (always writing content for components that I myself designed and built, but occasionally writing content for others)
  • Assisting in the design, development, and maintainence, of reusable sections used for placing content
  • Assisting in the development of component pages and introductory pages onto the site
  • Defining, documenting, and following detailed technical design and code specifications
  • Performing internal code and design reviews in pull requests
There are currently more than 50 different components in NUcleus for Apps, with about 30 of those implemented on to the documentation site.

NUcleus landing NUcleus guidelines

Home and Guidelines

  • Utilized front-end components and layouts to build pages
  • Wrote, collected, and refined copy before placing into respective pages
NUcleus component page

Component Pages

  • Worked with designers to develop the overall design and information architecture of component pages
  • Assisted in any new designs or development required in order to add variations of components for documentation site use cases (a new hollow variant of collapsibles, for example)
  • Wrote all documentation in OneNote during design and development phase of component
  • Implemented more than 15 component pages utilizing the newly established patterns