case study: creating a minimal style guide for a startup
In this case study, I’ll share the process of creating a minimal style guide for a tech startup and 3 lessons that I learned in this exciting journey!
Background
At Remote Roofing we started to create a draft for our first version of the style guide to putting every team member on the same page, also it made visual decisions much quicker and easier for a design team and for our customers would have overall experience consistent. In this case study, I’ll share the process and tips that I learned in this exciting journey!
- 💼 Company: Remote Roofing (A real estate startup in the US, provides customers inspection for their roofs with help of artificial intelligence & image processing)
- 🎭 Roles: Head of design, Visual design, User interface design.
- 📆 Time Box: 2 sprint, 1 week: Research & Wireframe + 1 week: Design & Documentation
- 👥 Project Type: Teamwork ( 2 Designers, Product Manager, and CEO)
The Process Phases
- 🔎 Research
- 📝 Wireframe ideas
- 🎈 Visual Design
- 📓 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 that we have on the internet, like Firefox.
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 do brainstorming and organizing my findings for the design team. After researching with meticulous eyes and figuring out the structure (as you can see in the below image) for our style guide.
📝 02 Wireframe
After getting some feedback from the team, I started wireframing for the style of end result (online document) on the web. But our Dev team was busy with other high-priority tasks. So we decided to design it in Figma document all stuff in the Notion app.
Information Architecture
I ideated about how might we can 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 Mind Map I decided to have two high-level sections for 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.)
And 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 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.
🎈 03 Visual Design
I’ve designed a template for each section of visual identity. Then with 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 color. I just inspect all designs to find where we use colors. I reduce colors to 4 accessible shades in 4 different categories:
- Brand Colors: used for CTAs
- State Colors: Error, warning, info, success
- Dark Colors: used for body copy
- 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 the darker version of it, with acceptable color contrast.
- 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 minim 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 needs. this section was created by one of the talented design team members. I just give her some feedback on it.
Typography
Content is king! therefore we try to present our content in a nice way with a robust approach in the text hierarchy. I’ve chosen 16px (1rm) 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 desktop, based on what I’ve tested for previous text hierarchy for the website.
The rest is simple math! as I mentioned we choose,16px font size for body copy. the next font size would be 16 * 1.25 and the next one would be 16 * 1.25 * 1.25 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.
📓 04 Documentation
The ultimate goal of having a style guide is to make everybody in 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 decide 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 the Notion as we talk about them in the Design section here.
Color Doc
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 recommend variable names for developers to use them in the code same naming convention in the Figma design style, like $bule-1.
In Figma, we use 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
- You should consider, all stockholders (founders, developers, designers & all people in your team) when you design an 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.
- It’s better to have a minimal and useable 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.
- As future work, we can have online documentation like catalog tool.
Check out 🏀 DRIBBBLE SHOT!
Let’s be friends
on LinkedIn, YouTube, and Dribbble.
I just republished my portfolio blog post: https://mohammadsharifi.com/portfolio/creating-a-minimal-style-guide-for-a-startup/
