Task
I took on this project to create a design system in order to streamline the design process and simplify the existing assets. The results of this project allowed designs to be created quicker while keeping a more cohesive look and feel throughout the website.
Process
Starting this project, there were no consistent assets or components used on the website and they strayed away from the brand guidelines. One of my goals was to consolidate and update these components to follow the brand guidelines and look more uniform throughout the site.
I divided the system into atoms, or specific details or assets that should be consistent throughout the site, and molecules, or designs that often times included atoms and were more complex components for the site.
Atoms
Molecules
Header & Footer
Final Product
I built this system in Figma, where I created most of the designs for Roti. This meant that any changes that were made to the design system automatically updated the project designs so I could see the changes immediately.
Implementing this design system improved the feel of the site drastically so that no matter what page you land on, they all match Roti's brand and look like a family.