With validation from user research and persona creation, I met with the stakeholders to conduct a brand audit where we determined specificities of the brand personality and visual identity. I compiled all of these into a brand guideline presentation that could be shared with the stakeholders.

Screenshot of the resulting brand guideline. This was discussed heavily and iterated upon to ensure a satisfying result for the client.

The logo served as the backbone for the rest of the visual elements on the webpage. First I took the logo and redesigned it to a form that would work for both print and web. The colors from the logo helped me create a color palette that would guide the design of the webpages.

I began creating the design system by following the general Atomic Design System process. I utilized Figma’s Design Library in many ways, the first being for creating and organizing the variety of color palettes, typography, and grid styles.

To promote design unity, I created a complete color palettes for all the colors selected in the Brand Guideline. This made iteration and scalability so much easier for later on.

From there, I moved onto adding functionality and creating more complex elements, such as Clickable elements and Header content.

I created a preliminary map of the Information Architecture by organizing the potential functionalities of each page I planned to design, which helped me identify the sections needed on each page for proper functionality. Then I was able to create very basic prototypes, which would guide the rest of my design process.

Once I started creating the sections each page needed, I used Figma’s Variant features to create the screen responsive versions of those sections.

After I had completed all the sections, I went back and determined which sections could use more visual customization, and thus created a matrix of Variants.

In this section, I am giving the website owner the ability to change the background color based on the collection that is being highlighted, while keeping them aligned with the established brand guidelines. This strategy streamlines the implementation process for developers.