Revitalizing Tripwire: A Ground-Up Redesign with a Powerful New Design System

To start this project, I worked directly with my manager to identify a collection of fonts and colors that would be the baseline for the new design system. We chose a versatile typeface that provided plenty of different weights for us to choose from.

For colors, it was vital that we chose a variety that we could use to identify each of the products in Tripwire's suite of tools. Each one ended up using a unique gradient that was used to identify it across the website. Tripwire Enterprise was the first product to get such a treatment. It proudly displays a bold red to yellow gradient that matches the elements across the product page.

In order to implement the design system in code, I needed to work with a brand-new set of web technologies. The Tripwire site revamp was my first exposure to React in a work environment, and I quickly saw the usefulness of React as a library. I began work by componentizing each part of the Tripwire product pages. This resulted in a set of building blocks that we could use to quickly and easily build other pages. For styling, I used Sass to help with style reuse and code organization.

In order to allow content editors within the marketing team to be able to edit content, the next step in the process of creating components was to convert them into .cshtml (Razor) files so that Sitecore - a popular content management system (CMS) - could read them. This process proved to be a bit tricky, as there is a lot less documentation online for Razor than there is for React. Thankfully, we worked with a team of developers at a local design agency who were able to help get me up to speed with .cshtml and implementing Sitecore.

Once I had a few product pages working in React and Sitecore, I got to work on converting the remaining pages over to the new CMS. Thankfully, many of the pages on the website had already been built in Sitecore with the help of an outside agency. My role was to go through each page and make sure the styles were updated to the new look and feel.

Overall, this project was extremely important in my growth as both a developer and a designer. I learned about what elements of a design system are needed in order to make implementation as smooth as possible. I also learned how to integrate with a CMS, which was daunting at first. To this day, I still use some of this knowledge in my work on this portfolio (which uses Contentful, a similar CMS).