The Brand Redesign

Since joining Unabridged Software, I’ve wanted to update the company’s brand to reflect who we are as a team and the strengths we bring to our work. We’ve completed the process, and I wanted to walk you through what we did and what we learned. I’ll cover our thought process for the design, the technology, as well as the completely handmade business cards that serve as our team’s membership cards.

Laying the groundwork

On Tuesdays, we have an all-company meeting called “Talk-o Tuesday” where we share updates and ideas. It ends with someone giving a talk about something they care about. In July 2023, I used my slot to give an open design critique of our old logo mark.

Visual clutter in the original mark—the kind of thing that could make people pause when encountering our brand.

Exploring a New Visual Identity

I gave a few more talks over the year as I iterated on the brand, showing my thought process and the progress and collecting feedback and ideas from the team, slowly building momentum around the redesign. I dug into the over 15 year history of the Unabridged wordmark/logo. I tested typography options. I developed some iconography. I continuously refined the mark. All within a 5 hour budget per week while focusing on my primary client work.

Testing different typeface directions

Exploring different iconography systems

We explored keeping the U nested within the book, leaning deep into that metaphor - even testing ways to “open” the book to different services.

Ultimately, we moved the “U” outside the mark to create something cleaner and more readable. (Feedback directly from brand analysis - I was surprised to find how often people misread the logo as “nabridged” instead of “UN-abridged”!) We also refined the mark to look more like a literal spiral notebook. The iconography of the notebook reinforces the metaphor that Unabridged produces the purest form of authorial intent, which in our case is authoring code.

Final decisions: the spine design and color system.

With Geologica as our primary typeface, icons adapted from an iconography and illustration service called Streamline. I then created our color system - I used our original blue as the base, then built out a complete set.

Crafting our own color system for our brand.

Finally, I rallied around some simple linear gradients that blend the paper texture. We apply different blend modes depending on luminosity of the gradient.

The New Mark

In it’s simplified glory!

At the very beginning of this article, I shared an image of a design breakdown of the previous mark. Before I show you a full suite of the final product with different colors and variants, I want to justify the decisions I made by displaying these guidelines on the logo. The goal to display these was to identify visual harmony and work toward improving it.

This new mark uses the guidelines to anchor elements to work together. It’s not about the amount of guideline, little or none or many could work too, rather, it’s about how they are being used. These lines now help the many elements of the form work together to create a visual balance.

1. How I address Position

1. Vertical guidelines brought down from 12 to 8
2. Horizontal guidelines brought down from 7 to 5
3. These lines are now used deliberately together with the form.

2. How I address Form

1. The icon no longer needs tight spacing with the word mark to read as a single word.
2. The command prompt icon is aligned precisely within the cover of the notebook.
3. Unified, singular typeface.

3. How I address Style

1. “Software” is set using properties of the two D’s within the available space as an homage to the previous iteration. Usually we refer to our company as “Unabridged” rather than the full name, and this emphasizes that nickname.
2. Colors are now accommodating to the switch between dark/light context.
3. Geologica has a variable axis called “Sharp” which we use to help become more visually distinct from default uses of Geologica, since it's a generally available and free to use font from Google Fonts.

To celebrate the conclusion of this phase, we printed the below page as a sticker sheet for the team.

The coolest sticker sheet gifted to the coolest group of people.

Expanding the Brand to the Website

First pass of the redesigned site.

The natural next step was to apply the new branding to the website itself. First, I captured the existing site in Figma using a plugin by Builder.io. Once the current site was in Figma, it quickly allowed me to translate the old design to the new direction. I was able to give our partner team quick links, to compare the old site to the new, and collect feedback. It was also useful to give stakeholders the old site next to the new site to illustrate how much of an improvement we were creating.

That’s all for the design process. Thank you for reading through to end on this first part of our redesign series. Stay tuned for Part 2, where we’ll talk about the technology choices that made it all possible.

Thanks again, and see you in the next one!