Working with Brightspot
Nitro used Brightspot to rebuild the GoNitro.com website. The Brightspot CMS would allow Marketing to more effectively manage the website, giving them a tool to make changes without requiring new coding or heavy design time.
Brightspot provided its own template modules and content types, so our task was to make the necessary adjustments to represent Nitro’s brand.
Brightspot Display Site
Brightspot had its own naming and patterns which were different from Nitro’s existing system, so documentation helped decrease any confusion. While I was the primary designer for the website library, any designer or collaborator should be able to enter the file with ease.
Typography Documentation
Atomic Design
I started at the base elements of typography, color, and atomic components, which set the foundation to build larger, more complex components. I also created many local components that were essential to the structure of the library and would allow me to design more efficiently and consistently.
Components were nested until full modules were formed. These module components had properties that matched what existed in the actual CMS, and by nesting components it allowed for the exponential creation of variants. Once the website library was published, these modules could be combined to form web page designs, and the user would get a realistic idea of what they could create in the CMS.
Keeping the website library manageable in its amount of components and organization was as important as having it reflect what was possible to create in the CMS.
Module Component
Production & QA
The rebrand project had a demanding timeline, and I understood that there was a lot of ground to cover for one developer. To ensure the developer could extract the necessary information and that details weren’t missed, I communicated designs in many ways including detailed specifications.
Component Specifications Example
To QA, we decided to create a set of pages in dev as well as in Figma so we could track progress clearly. Communicating frequently helped decrease any miscommunication and kept the process moving. We did not have a dedicated QA, so I handled checking details along with the developer.
Design Debug
