Figma

In this project, we delivered a full design system for the existing website of Temple University. The goal of this design system was to provide the client with a set of reusable components and styles that they could apply to new pages in their website.

Building a full design system for an existing website was a challenging task. We had to follow very strict brand rules to recreate existing components in Figma. Specifically, we explored Best Practices to create complex components in an easy to use, reuse, responsive, and extensible way. We tried to enable the client to design for all screen sizes, but kept the library at a manageable size for simplicity of use. 

To achieve our goals, we decided to use the Atomic Design methodology. We designed the system from the smallest part to the largest component and put a strong focus on documentation to aid the client’s usage. 

This was the largest design system our agency has delivered. I was responsible for the design of all the components, and with feedback from the lead designer and a project manager, we built the full design system over three months. Throughout the process we kept in close collaboration with the client and their feedback was very positive. The project is currently in the training phase and we expect it will be fully launched in the next few months.