At Grey '24-25
A cover tucked here
At Grey '24-25We talk a lot about building on the go in a fast paced environment, but how do you keep a brand cohesive in values, visuals and experience while building as fast as it gets? How do you ensure that every little units created ties up together to form a cohesive system at some point? A brand Bible.
Grey has been building for a little over X years and for a product led company, what is most important is building a product, finding a perfect market fit, becoming a enterprise then ultimately defining your brand. Some will disagree and say brand building should come first, but if we’re being honest, business perception building always comes first but an intentional building of perception always comes later when it’s understood that the business is going to survive its early days. A scalable product equals a scalable brand and as we’ve always defined a brand an aligning a business service offerings with customers expectations. I like to think of it as aligning business offerings with stakeholders expectations and that involves employees, customers and even affiliates or partners.
Coming back to the key of this write up, how did we design a functional brand guideline for Grey while they’ve built years of work on the go?
The story started from when I joined the team as a Senior brand designer and I vividly remember while discussing in my technical interview call, I made a point about how brand design is quite a dicey role in this part of the world where you many times do everything but actual brand design and that made me ask BP(the design lead) what are the expectations he has for this role, in other words, what defines success. He responded with, “we have short term goals and the long term goals. For short term we want to achieve brand cohesiveness and for the long term, we want to create beautiful experiences with design”. That response painted a clearly picture of where to get started if I get employed as part of the team.
Fortunately, I got employed and my first line of action was to create a high level six months roadmap, we’ll talk about this is another article. In about a week or two of joining, after my onboarding was done, Femi(the COO) sent us a message on the design team about how email signatures haven’t been consistent and he’s seen more than four different formats in different emails—that felt like a good action point or say a starting point. We got samples of what he’s seen from him because you don’t solve a problem(or change things) without knowing what currently exists, remember the first principles of thinking?
We took some days to research on how best to design and launch an email signature to the company and we made it happen. We had the layout figured out and implementation started. I’ll tell you for a fact that I thought you could do so much with an email signature, especially when you’re tied to the limitations of Gmail client, I wasn’t prepared for the limitations and experienced but in my research, I found out that HTML is one of the best ways to break through those barriers. I dusted my HTML and CSS knowledge and got to work. When I figured out the signature layout, I hit up ChatGPT to make the code better and clean it up of any unnecessary decisions and it did. I updated my teamlead about the progress and we got all image assets uploaded to our cloud storage, then we just linked everything up and started testing. The design team helped so much with this because we were able to get a feedback on how it looks on different displays and we kept iterating till we found that sweet spot where it all worked out. We then launched it to the entire company. I remember that was around the 4th week I joined.
After that, the design team created a brand consistency channel where we had people who use different brand assets reach out to us to verify if it’s on brand to use—case in point, letterheads, email signatures, contracts, documents covers and some more. This helped us create a necessary but limited bottle neck around designed assets used within and going out of the company. That channel was slow burn, because people only make requests when it’s needed but in less than a year, we had corrected 90% of the company documents. This channel was the beginning of our brand audit.
About 6 weeks in, our approach then became picking each brand elements and drilling down into it and obviously, we started with the logo. I have always, even before joining the team noticed a slight kerning issue with the Grey lockup and I took my precious time to do some type treatment to ensure it was corrected. There were some almost-there mathematical calculation that my engineering hardwired brain had to properly fix also. The grey wordmark now became 3x of the icon and the spacing between these also was well calculated while ensuring visual balance. When this was done, it was updated in the brand resource library, and we started using it in all the assets we created from there on out.
Two things you’ll notice from this earlier stage is that we aren’t waiting till we have the complete updated system before pushing it out, a user isn’t specifically bothered about that alignment but it makes things look more put together, and we weren’t wasting anymore time in doing that. We also ensure to document this properly by uploading it to the drive where brand assets are, then pushing to working files. Remember, fast paced environments.
The next thing was the typeface. Upon joining and working on few day to day tasks here and there, I’ve always noticed the jump between medium and bold, we needed a weight inbetween them but that doesn’t seem to exist in the font file package. I then went on to the design foundry to take another look at the typeface, read about its history and how it was made as that helps me document types better when writing a brand guideline and by chance, I found the semibold weight—I was pleasantly surprised and super excited that I had to call the teamlead to tell him how miracles do truly happen, lol. That, was the major update we made on the type. We then proceeded in documenting what our document typeface was going to be and at the risk of joining the already large Inter family, we went for Inter Tight, which felt a bit different and still serves the versatility purpose we needed.
As anyone who’s a brand designer would expect, the next thing is colours. You see, when working in a fast paced environment, especially in a marketing intensive one, there’s little time for QA and so many things can be missed when sending things for production. My job as the identity designer is to ensure that the system we’re building is one where even when things are missed with the use of the element, they won’t standout like a sore thumb to the general viewers. Colours are one thing that easily stands out to people when it’s off. Before talking about technicalities, let look into how it was thought of within the company. A lot of people knew Grey was mostly white and black, I mean the logo would only show in those two colourways. However, how do we use the blue and purple, which is secondary or even part of the primary, no one really knows—except maybe the product designers that used it in the product. However, it needs to be said, what ratio every colour should be used because white, black, blue and purple were the most commonly used colour as at then. My first line of action while working on the colour system was to define what the primary colours were, then secondary colours and accents. However, they changed. When we had the primary and secondary colours locked in, we new we needed more colours to in expressing our very versatile communication and I decided to create a palette called “bravechrome”, it featured colours that needed pure expertise to pair with the primary and secondary colour and it gave the colour system a new life. I remember sharing this with the team and everyone was really excited about the possibilities of having this extensive colour system but BP was the most excited and later tracked back a bit to say, what if we made them colours of country flags. I think world cup happened around that time and since Grey was going to be expanding to multiple countries and he’s seen how the world cup colour system included colours that took care of every country present, we could do the same and that was when we came up with new set of accent colours that then served as the “CountryChrome”, this gave our colour system even more versatility than we’d imagined. Collaboration exposes us to a greater world view, beyond our purview.
Every designer has gone through the phase where they have access to a lot of resources but kept regurgitating the same assets they’ve been using for quite some time and this was the case with our patterns. The designers had favorite sets and it’s very justifiable as those sets always come out banging, however, everyone used them in the way that fits/suites the design, not exactly in a methodological manner. During my audit, I saw all the patterns that existed and took my time to deconstruct the patterns I found in one exploration file BP had sent me in my first week of joining. When I finally understood how the patterns were built out, I started rebuilding everything to follow the same procedure and even added new set, then created a documentation that’ll allow us expand the pattern library on specific cases where we need a type for a campaign or a launch but never for long term use. All the primary patterns were then named after their look or feel like audience, waterfall, accession and the likes. This helped us refer to patterns easily and we categorized which should be used for what. An example is, there are patterns used some way in official documents that helps an internal person verify it’s an official document, not everyone knows or even sees them, but they’re their and serve their security purpose, which is needed by a fintech. This pattern style was also later one used for our stamp as it helped lock in those security features even better.
Then 3D icons and illustrations. TBC