Background

At Roofer, we started to create a draft for our first version of the style guide to put every team member on the same page. It also made visual decisions much quicker and easier for a design team and for our customers, resulting in an overall consistent experience. In this case study, I’ll share the process and tips that I learned in this exciting journey!

💼 Company: Roofter.com (ex: Remote Roofing) A real estate startup in the US, provides customers with inspections for their roofs with the help of artificial intelligence & image processing

🎭 Roles: Head of design, Visual design, User interface design.

📆 Time Box: 2 sprints, 1 week: Research & Wireframe + 1 week: Design & Documentation

👥 Project Type: Teamwork ( 2 Designers, Product Manager, and CEO)

The Process Phases

1. 🔎 Research

2. 📝 Wireframe ideas

3. 🎈 Visual Design

4. 📓 Document

🔎 01 Research

After our weekly kick-off meeting, our Product Manager asked us to start working on a simple style guide for our brand. He asked me to brainstorm and look at some style guides for inspiration.

Research Goal

How might we can organize and document our style guide to have consistent experience?

I just created a new FigJam, and I drew a mind map to brainstorm and organize my findings for the design team. After researching with meticulous eyes and figuring out the structure (as you can see in the image below) for our style guide.

Mindmap: Explore and organize lots of ideas

📝 02 Wireframe

After getting some feedback from the team, I started wireframing for the style of end result (online document) on the web. However, our Dev team was busy with other high-priority tasks. So we decided to design it in Figma to document all the stuff in the Notion app.

Information Architecture

I ideated about how we might organize all of the content that we have for our navigation in a hi-fi wireframe. We have a higher-level Style Guide (Brand Guidelines). Then, as you can see in the Mind Ma,p I decided to have two high-level sections for the Style Guide:

💎 Brand Identity — All writing documents about why we exist and our goals

👀 Visual Identity — All visual stuff related to the brand (logo, color, etc.)

Here is the detailed structure I’ve figured out for the first version of our Style Guide:

Brand Style Guide

— 💎 Brand Identity

— — 🚞 Mission & Vision

— — 🔊 Tone Of Voice

— 👀 Visual Identity

— — 🎨 Color

— — 💠 Logo

— — ⌨️ Typography

— — 🖼 Images & Illustrations

— — 🏃🏻‍♂️ Motion

Wireframing The Solution

After identifying the information architecture of our content. I started going a little bit deeper inside the solution. I created a simple wireframe with rectangles and text in the FigJam file. As I mentioned, we decided to use Notion as a documentation tool for our first version. I put some sticky notes to describe what I had in my mind to consider in the documentation phase.

Wireframe of style guide documents in FigJam

🎈 03 Visual Design

I’ve designed a template for each section of the visual identity. Then, with the help of other team members, we started to design all of the sections in Figma. I’ll explain how we designed the Color, Logo, and Typography section

Color

In our Figma design system file, we had some colors with lots of color variants. For example, we had 10 shades of blue. I just inspect all designs to find where we use colors. I reduce colors to 4 accessible shades in 4 different categories:

1. Brand Colors: used for CTAs

2. State Colors: Error, warning, info, success

3. Dark Colors: used for body copy

4. Light Colors: used for background colors

In Notion documentation, I put a rule that our color contrast must be at least 4.5 to pass the AA level. For example, we can use subtle blue with a darker version of it, with acceptable color contrast.

Style guide/Colors

• I’ve chosen the main color from the logo as our brand color

• All darker shades are accessible to use with subtle shades

• I’ve tried to have the minimum possible shades of colors

Logo

We remember each brand with its Logo. In the style guide document, we provide all logo variations with safe area margins, super simple! We can make it better in the future based on team's needs. This section was created by one of the talented design team members. I just gave her some feedback on it.

Typography

Content is king! Therefore, we try to present our content in a nice way with a robust approach to the text hierarchy. I’ve chosen 16px (1 rem) as a base font size for our typography, which is the default font size of browsers. Also, we use the “Airbnb Cereal App” typeface. To have a consistent scale, I used 1.25 as our type scale ratio for the desktop, based on what I’ve tested for previous text hierarchy for the website.

The rest is simple math! As I mentioned, we chose,16px font size for the body copy. The next font size would be 16 * 1.2,5 and the next one would be 16 * 1.25 * 1.2,5 and so on and so forth.

In the last step, we normalized numbers to even numbers based on 4x (4, 8, 12, 16, 20, 24, 32,…). I’ve repeated this process for small (mobile) screens with the same base font size (16px) but with a smaller type scale ratio of 1.125 to have smaller jumps in each step.

Style guide / Typography in Figma

📓 04 Documentation

The ultimate goal of having a style guide is to make everybody on the team on the same page, so it’s necessary to have accessible documentation to share with all team members in the company. In Remote Roofing, we use the Notion app for managing tasks, so we decided to create a page for a style guide with the same structure that I mentioned in the information architecture section.

The product manager and founders (CTO & CEO) started collaborating with us to document the mission, vision, and tone of voice of the company.

After that, we document the Visual Identity section of the style guide. Let’s explore some sections of our style guide doc in Notion as we talk about them in the Design section here.

Color Doc

Simple Notion documentation for the style guide

I have a background in front-end engineering, too, so in the documentation, I care about code and how we are going to implement this cool stuff in reality. I provide recommended variable names for developers to use in the code same naming convention as in the Figma design style, like $blue-1.

Figma styles documentation to make it more findable

In Figma, we use the slash naming convention to organize styles. For example, we have Blue/Blue-1 categorized each color with a toggle list in a nice way. Also, we used the description field for the role of color and provided more details about it, so it makes life a little bit easier when you search for background color, icon color, etc.

Typography

The notion has a lot of great components to make your documentation shine! I used a table for this section to show all of the data about typography in a clean and neat way.

Lessons I learned

1. You should consider all stockholders (founders, developers, designers & all people in your team) when you design a style guide to come up with a solution that works because it involves who should feel they belong to this brand and you pay attention to them and their needs.

2. It’s better to have a minimal and usable style guide at first in order to have the perfect one someday! It’s better to start simple and make it better and better in each iteration.

3. In future work, we can have online documentation like catalog tool.