Common — Brand & UX/UI Design
Last year, a new problem-solving collective called Common approached me to help design a Brand Identity and Website. For me, this is the perfect end-to-end project as I can own every stage of the process.
Common’s mission is to find long-lasting solutions to today’s increasingly complex social issues. They have skills in many disciplines, including service design, behavioural science, psychology, statistics, market strategy, programming and communications.
My process for this project was guided by the Double Diamond process, more on that in this great article on how to apply Design Thinking. One thing to remember for these frameworks is that they can be used as a guidebook, not a rulebook.
In a nutshell, it’s — Discover → Define → Design → Deliver
Discover
For this phase, there were two stages — the first one was gaining deeper insights from the stakeholders about Common’s Mission, Purpose and Values. The next phase was researching the competitor landscape. Common are not alone in their mission to do great work so as well as being tasked with making the brand stand out, it was important to see what we were up against.
The initial research was divided into 2 areas:
• Competitors that you admire/dislike (and why)
• Unrelated brands that you admire/dislike (and why) — this is key as the target audience will not just be people in the same industry. I pointed out it was important to appeal to various audiences also outside of their industry.
Also, we did some research with existing clients to ask what they expect to see on the Common Site so that we could align this with our assumptions when it came to site structure (or information architecture).
Define
Summarising findings and sharing insights from the research, to define how the brief could be shaped up. Without the questions from the Discover stage, it would not have been possible to unearth the valuable insights that led me on to the Develop stage through the process of Defining the brief.
Design
With the knowledge gained from the first 2 stages, this allowed me to explore design ideas equipped with insights from the key stakeholders and their target audiences. When designing a logo, even though many audiences won’t make a connection with your rationale (does the average user even know the rationale behind the Airbnb, Slack or FedEx logo?), it will still help you form a visual representation based on a narrative.
For Common, there were 3 three initial ideas:
1. Common is one team formed of many multi-disciplined members
2. We view problems through various lenses
3. We have a common purpose to create solutions
The final logo (with a concept website home page)
The final logo uses IBM Plex Sans (which I tweaked slightly). One of the reasons was that it’s just such a beautiful grotesque typeface which has such a clean and modern aesthetic without being too fussy. It was designed by Mike Abbink and Bold Monday.
Given the context in which logos appear these days, I felt it was important to create a “logo system” where it could be responsive depending on the context, hence the different versions you see above.
(Still) Designing stage — now for the website.
When it comes to websites, it’s a tricky one to show the entire process as I’ve got (creative) ideas in my head, research notes, and visual references from the stakeholders, fellow creatives and the wider industry, in general, all flowing through my mind at the same time.
It’s not a linear thought process by any means. When I’m cooking one of my favourite dishes (let’s say a mushroom risotto for example), I’m thinking about the stock, the different types of mushrooms, how to peel shallots and stirring the rice all at the same time.
Nevertheless, here’s a rough outline of my process:
Site Map → page content → (paper) sketches → (iPad) sketches → Low Fi Wireframes → Basic Prototypes → Final Hi-Fidelity designs
All throughout the above process, I’m constantly thinking about the visual elements, — what does this button look like? What does the hover state do? How will a page animate in?
When it comes to sketching sites, my tool of choice is my iPad Pro on the Notability app coupled with my Pencil. I can freely sketch all my ideas out, and if something looks good, I can easily copy/paste onto the next screen instead of wasting time redrawing elements like a logo or a menu.
Things started to get really interesting when it came to Mobile. Inspired by the sliding page nav in Slack on iOS (the tool of choice by the Common people) I wanted to show a variation of this on the website. Even though Common won’t use the site, the users on the site would get some kind of sense of how Common operate. It’s a tenuous link, but for every design decision I make, it’s got a rationale behind it. To demonstrate how this worked, I created a very simple animated prototype showing how this would be put into action.
Once this stage was approved, I then moved on to final hi-fidelity designs which were accompanied with some animated prototypes built in Principle which served 2 purposes — to help the stakeholders see how the site would look, and also for the developer. No secrets here, I taught myself Principle and had so much fun in this stage, it’s a pretty great tool.
I’m a massive advocate of minimal and functional design)see the NN Group’s 10 Usability Heuristics) along with good rationale for every design decision, and when it comes to interactivity, I believe having an element of “surprise and delight” is key for a pleasing and memorable user experience.
Deliver
Then came the final site design. Bringing everything together. The identity, colour scheme, typography, interaction design, information architecture, copy and a wonderful collaborative process!
One of the challenges I came across on the desktop design was to show the page title, and change this accordingly after a new page is selected.
← This animation demonstrates my simple solution — When the menu pulls in, the current title is covered, and when you select a new page, the title is revealed underneath as it slides away 💡
And here is what the client said…
Working with Tabrez on developing the Common branding and website was fantastic.
He spent time getting to know what we were hoping the brand could communicate about us and what we wanted our company to be. Tabrez then walked us through a series of iterative design options — starting with a wide range of choices for the brand and narrowing down to a smaller number that were refined as we went. We have a large team and Tabrez was good at listening to everyone’s instinctive responses to the ideas, which were often quite different, and helping us create a brand that would help turn the early foundations of the company into something with a live personality that felt truly unique to us.
Once we had the branding set (logo, font, some style elements), Tabrez moved onto our website, introducing us to design patterns that helped it feel modern, dynamic and easy to navigate.
Thanks for reading, and I hope this case study gives you a deeper insight into my process. You can visit the live site here: www.common-collective.org
If you would like to work together, feel free to drop me a line at hello@tabrez.cc or you can visit www.tabrez.cc to see my other projects.
📝 Read this story later in Journal.
👩💻 Wake up every Sunday morning to the week’s most noteworthy stories in Tech waiting in your inbox. Read the Noteworthy in Tech newsletter.
