FRANKIE4 Design system

Project overview

Coming into the business as their first UX/UI designer. I immediately noticed that there is no structure being followed throughout their website. The physical brand had a brand guide however this was also not applied online.

The challenge

Creating a design system that is simple to follow, scalable and versatile to various situations online. But it also needed to be easy for the digital & web stakeholders to understand and agree on using a cohesive design system rather than adjusting designs manually per page or per project.

The solution

• Working with the developer, I created a primary level design system to ensure headings and paragraph styles are assigned to the correct style.

• Then created a base level design system where any designs will follow. However, in the back end we can allow a scale selector to adjust body copy to a selection of sizes.

• This format helped stakeholders feel that they still had control over the font size however in the code.

• This is actually following paragraph and heading styles set in the CSS.