Quest Nutrition is one of the leading protein bar manufacturers in the country and in 2016 they launched a new online product that connected Quest’s research and marketing teams with athletes and bodybuilders. As the UI developer on the project I paired with a designer to iterate, prototype, and build a robust pattern library for the first version of Quest Labs.
We worked with the software architect to break down functional requirements into UI components. During early design explorations, I created a boilerplate SCSS system for typography, buttons, forms, and a grid. We then collaborated using the Fabricator tool to build out the UI library and prototype large interface pieces that could be combined to create entire pages and refined as necessary.
When writing the styles I used the BEM methodology to structure my component styles, keeping class names readable and concise. After my work had been thoroughly QAed, I partnered with two fullstack developers to implement the design system onto the finished product. This naming convention coupled with clear documentation made the implementation seamless and required little oversight from me during the process. The end result of this project was a quicker design phase, well-performant CSS, and a system that was easy for their team to reuse.Back