developing a brand.

During my time working with Trueform, I realized that the startup didn't have an established style guide or voice and tone guide. So I wanted to change that!

timeline

5 weeks

deliverables

Style Guide
Voice and Tone Guide

role

UX Design Intern

contributors

Scottie Lau
Director of Design at Trueform

Something's missing...

While working on Trueform's Analytical Redesign, I noticed that the company didn't have a Style Guide or a Voice and Tone Guide. I asked Trueform's Design Lead about it and he responded that the company only had one principal designer, and because of their time crunch, they never had time to establish one. For the Voice and Tone Guide, they never really ended up thinking about it.

I realized that this could be a very important thing for this company to have. By utilizing a style guide, it could help partners and future designers to onboard easier into Trueform's workflow, as well as unify everything Trueform creates and says.

A Change in Work

I pitched the idea to both the Director of Design and the CTO, and they gave me the go-ahead to start working on both alongside our Director of Design. This was both really exciting and really nerve-wracking. I was excited because I had the chance to help establish the design foundations for the company, I was nervous because I had never done this before. I had established one style guide during my Visual Information Design class, where we dissected infographics to develop a style guide that would help us create our own infographic, but this was going to be much different. Was that going to stop me? Oh, absolutely not. My excitement for the opportunity masked any hesitations I had about starting. I fired up google and reached out to my past Professors, Marilyn Ostergren, and Paula Land. Professor Ostergren was both my Visual Information Design Professor, as well as one of the Professors I eventually became a Teaching Assistant for. I reached out to her to talk about the fundamentals of developing a company's style guide and did independent research on how other companies did theirs.

Hey Siri, Google "How to Make a Brand Guide"

We started doing research. We looked at several brand guides to see what content they contained and how they presented it. I started researching articles on developing brand guides and what one should contain. Websites like https://brandingstyleguides.com/ were incredibly helpful in looking at what companies found successful (My favorite one I looked at was Reddit's, a close second was Virgin America's).

The basics needed to be established: logo and wordmark treatment, typography guidelines, color palette, graphical elements, logo and wordmark misuse. So long as we established these, we could continue to refine and add elements as they came along.

Typography, Typography, Typography

We initially started with typography, it was the first aesthetic choice I realized we needed to make while I was wireframing in Adobe XD. I copied out my current wireframes and changed out the font to several different options. Trueform originally used Montserrat, but the font didn't handle well as a body text due to its large character width. As a tech startup focused on having a solid online interaction with customers, we wanted the font to be clean, easily viewable, and feel modern. I also wanted the font to have several weight options so Trueform had more flexibility with typography. 

After staring at different fonts on the same wireframe for a few hours, we eventually decided on Proxima Nova. A font designed by Mark Simonson, it was a great, flexible, middle ground between fonts like Futura and Akzidenz Grotesk, which were both fonts we were looking at. 

Side note, when I was researching fonts I learned that Grotesk (or Grotesque) signified san-serif fonts that were developed back around the 1800s, and Gothic fonts were blackletter fonts that were developed in the middle ages. I always wondered what those suffixes meant. You learn something new every day.

Giving Some Space

Once fonts were established, I started focusing on logo and wordmark treatment. When researching what other companies did, I noticed they utilized elements of their logo/wordmark, like spacing between two words or part of the logo itself, to determine the correct spacing it should have around other elements. That made a lot of sense to do so, it ensured that the proper level of spacing was always easily able to to be determined based off of the element itself, not an external factor.

I looked at Trueform's logo and noticed the space between the "f" and right edge provided a square that provided enough space for the logo to breath around other elements, so, we utilized that as our spacer for the logo. For the wordmark, which was the logo and company name next to each other, I took the fixed spaced between those two elements and established that as the required amount of space around the logo. We did testing around other elements to see if that was sufficient and we deemed it successful. Woo!

Spinning the Color Wheel

The next step was color, luckily, we had something to go off of. The Design Lead had looked at updating Trueform's color palette but never had time to finalize it, so he passed it onto me and I started reviewing and adjusting colors. We discussed and talked about what we want Trueform to visually represent. We wanted the colors to be bright and engaging, playful but still professional. I started tweaking the initial color palette to reflect those goals, trying to brighten up each individual color without making them look like default highlighter option on Microsoft Word.

We settled on a primarily blue color and three secondary colors, two were analogous and one was complimentary. This gave us plenty of flexibility to add different levels of nuances to different projects and design (fun fact, one of the new projects that Trueform is currently working on utilizes Trueform's purple as their main color, which was something I recommended to the lead designer to help provide a level of continuity between all of the products!). We utilized Google's Material UI System colors for our System controls.

Using What We Got and Using it Right

We started playing with the logo as a graphical element, blowing it up so that part of it was visible and became an abstracted design. We loved how it looked, but very quickly realized that there are only a few ways to do it right, so we needed to establish improper usage. We worked together to figure out what the acceptable uses were. Then, the fun part was establishing what not to do. Basically, we would play around with it and take note of any ways we didn't like. It was weird, in a way, we were trying to displease ourselves. Guess it's better to do that in the office than out in public.

Once we finished that up, I realized we needed to do the same for the logo and wordmark!

The Design Lead handled some of the more graphical elements, like utilizing the Golden Ration in our designs. The organic nature of it intrigued him and thought it could be woven into Trueform's story. We looked at a few academic books on the Golden Ratio and it's offshoots to see how we could implement it into our style guide.

Once we were done, we had a working style guide! But, we weren't completely done yet.

Speaking Easy

When I was talking to the CTO about developing these foundational documents, I made the analogy to Trueform being a person. 

"The Style Guide would be how they dressed, the Voice and Tone Guide would be how they talked". 

So we just figured out how Trueform dresses. Nice threads, dude. Now, we needed to figure out how Trueform would talk.

This proved to be much more challenging than I thought because Trueform talked to both customers and creators who made products. So there was a need to make sure that it was casual and engaging enough that customers felt like they were talking to a modern, friendly, tech startup, but professional enough that the companies we were talking to didn't feel like we were talking down to them or not taking them seriously. 

Ok Google, How Do I Make a Voice Guide?

I felt out of my element here, I needed more insight into how Trueform worked. So, I started a few meetings: one with the sales team, one with the people who have been at Trueform the longest, and one with the head of the flagship store. The sales team meeting was so I could better understand how they reach out to clients, who those clients were, how they interacted and how that client's usually interacted back. This was vital for establishing a strong Business-to-Business (B2B) tone. The meeting with the most time under their belt was to learn about the overall motivations of what Trueform does and what that initial "soul" of the company was. I think that one of the most vital parts of a startup is their soul, that initial energy, that dream the founds and senior employees had. The last meeting was with the store manager because he helps to establish the training for the store associates and can provide vital insight into what the intended experience was for customer-employee interaction, I wanted that to translate throughout the content Trueform provided.

This is where I started looking at how to develop a voice and tone guide and saw what other companies were doing. I also reached out to my Content Strategy Professor, Paula Land, to see what the best approach was because the documentation on starting a Voice and Tone guide wasn't as fleshed out on the internet. She provided me with some pointers and a few resources, so I went on my merry way to figure out what values encompassed Trueform's voice.

The voice of a company is constant, but the tone is always changing. Just like how you, dear portfolio viewer, change your tone depending on the context of who and what you're talking about. However, the overall values you talk with stay constant.

I started each meeting off by asking what each person felt Trueform embodied as a value. Eventually, after a lot of discussions, we arrived at these main values for the voice of Trueform, pictured above. From there, I workshopped how it would be best to embody those specific values.

Watching our Tone

The voice was more or less set, but the tone needed to be established. Because of Trueform's nature of multiple different communication fronts and audiences, it was difficult to isolate all the necessary tones. The salespeople know how to communicate with their clients, the people working social media knew what tone to talk to their audience in, and the storefront associates knew how to engage with their customers. I realized everyone was talking to their area of expertise, and instead of assuming that a 20-year-old college student who accidentally called his supervisor "bro" once on the phone (I was horrified right after, but we got close at the end and he called me bro back), I realized that the tone could come organically. So for tone, I asked the reader two questions, "What is the content?" and "Who is the content for?". Those questions should help establish what was the proper tone for the given situation.

When all of this was done, my supervisor and I presented this to the rest of the company, and I'm happy to say it went well. All the team members were excited for the new foundation that Trueform would sit on.

Wrapping Up

This was a side tangent to the main project I was working on, but I was really proud of the work I was able to do with my supervisor here. Sometimes design and the process for it can get overlooked during periods where the focus should be on production, but I was thankful and happy to be able to help establish these frameworks for the future designers that will take over my desk in the years to come. The last few things I did at Trueform were looking at the copy on the website and updating it to fit Trueform's new voice.

The Style guide is a working Adobe XD file that has all the guidelines for graphical elements and usage, as well as excerpts from the Voice and Tone guide for easy access. The Voice and Tone guide is a word document that explains the thought process and need for having a document like that.