When we decided to kick off a rebranding project for Bitrise, I was as excited as a child. Although I have been working with developers for more than 10 years I have never had the chance to design directly for them.
The reason I love to work on a DevOps service is that I have never seen this amount of useful feedback from the community. At Bitrise one of our core values is that we listen and talk to our users. From a design point of view, this is something incredibly useful both for UX and graphic design researches. I really love that bullshitting hogwashing is never an option, you get honest feedback, and our users expect the same honesty from you as well... and that's a great deal if you consider yourself a designer.
I was also faced with the rare advantage of being a one-man-show: I could use my independence to focus on the consistency of the rebranding and the soon-coming UI updates.
So as you’ll see, this whole redesign was a whole lot of fun, learning and growing for me. Let me show you some interesting findings and processes that you might find interesting or - if you are a full stack designer - even useful.
Since both our team and product are growing fast I knew that creating a brand guide and design system for the upcoming product development is inevitable. On the other hand as someone who created and maintained many design systems before, I also knew that limiting flexibility can be a burden on the long run when improving the existing system or creating new assets, both for one person or a team. Sounds controversial, but design systems should not just be about strict rules but also plasticity.
Focus on usability & make a developer smile
There are already some discussions about developer experience (DX), which is primarily not about visual design, but I believe that it is really connected to UX that contains both the coding and the visual side of a developer’s daily job. Fortunately, many existing products have proven that engineers appreciate great UX and nice visual design, but usability should always be the primary aspect.
This was clear from a very early stage: we’re gonna stick to our existing brand universe with space, sci-fi & robot stuff. Bitbot was something that both the team and the users love.
Illustrations 🐱 🤖
It might sound weird to start a rebranding with the illustrations, but what we were quite sure about is that this is such an essential part of the Bitrise brand that it defines and represents the brand's tone of voice, our core values, and company culture. We knew that Bitbot will keep coming with us, so I have started to sketch him on hundreds of iterations. I believed that this is the right way to find the tone and key visuals of the brand and the logo itself.
While I was doodling I always had a bad feeling that Bitbot is quite alone in this automation journey, and if we want him to have a voice, he needs someone to talk to. So this is when Purr Request came into the picture because everything is better with a cat, right? Sorry, fellow dog persons! 🐶
For reusability’s sake I prepared the original figures in a way to be able to change their posture easily, so later I can depict them while doing other activities too. As most of the one-man-armies, I am dealing with many teams' design requests so it was essential to provide a lot of design assets in an easy way.
I have also prepared some secondary illustrations only for the landing page, in all the other cases I tried to solve it with our unique icon kit.
Bitbot got a heavy facelift, taking his wide range of appearances into consideration, aligned with the new typographic style and it got some air too.
We were testing many sans serif fonts to give a bit more brightness and soul to the external pages and the product as well. In the end, our choice was TT Norms by TypeType which has proven that it has good readability and works fine as small texts as well in spite of its smaller x-height.
I made a research on the current website and we hardly reached accessibility baselines, which affected the new color refinements as well. After brightening the two main colors I decided to swap the ratio of turquoise and purple (from now called "eggplant" thanks to Zeplin.io) since purple has a much better performance with light texts and it works well for primary actions. Turquoise was moved back as a sidekick secondary color.
UI Icon kit
From the beginning we wanted to keep the icons in house, to make our brand a whole, so all the components can strengthen each other. I created a grid as a guideline, which helps to keep the icons close to the style of typography, and TT Norm's appearance.
Hints for the new UI
During the rebranding process, I always kept an eye on the existing product UI components. Although I believe that in many ways it is better to keep the brand and UI close to each other, they should let some room for experimenting. You have to use different tools and visual gags, spacing, typography etc to create an engaging brand from what you need to create a UI component library with great usability. And these two goals have to be aligned somehow.
On the other hand, creating brand guidelines helps to improve the UI components as well. For example, this is how we have started to update our step library icons. These icons are used for the integrations (aka Steps) for the Workflows. That is a set of building blocks that can be varied easily to get an app from the end of coding to the app stores, so they need to be identified at a glance and they often have to incorporate other services’ logos.
Beside the external pages’ new look we updated the internal pages with a condensed navigation bar and footer, to put more focus on the most used functionalities.
Since we have many contributors and apps built on our API, we created a Presskit where you can find the Bitrise brands essentials, logo versions, and colors at one place. We also added a short guide to help maintain the brand consistency.
Tooling Side Note: Sketch love 💎💜
For me, this rebranding was also an experiment to leave Adobe products behind. I am in love with some indie products, especially with Sketch and Zeplin. Although I had to find alternate solutions, Sketch's vector handling is in many ways smoother without any overwhelming feature set. Frankly, 80% of the rebrand was done in Sketch, some of the early stage iterations of the illustrations and logo design were made in Illustrator and Affinity Designer and the stationaries in InDesign.
For more details and easter eggs check our website
P.S.: Stay tuned - these accessibility changes come to our lovely app soon
P.P.S: If you are interested in our design team's (muhaha) journey, you’ll find more posts about our learnings of Developer Experience on the Bitrise Blog!