This website uses cookies to ensure you get the best experience on our website. Learn More.

Maintaining Branding Attributes in UI

There are different types of design jobs that are difficult to maintain at a higher level in one person. When you start out in design, there’s a choice to make. Do you go with a creative side and grow as a brand designer or get deeper into the engineering part and interfaces gradually driving into the UX realm? With that said, these are all jobs required within one single project and serving one common goal – helping the client do good. 

Maintaining Branding Attributes in UI

In this piece, we’ll take a look at how the two different processes branding and UI design can morph and show traces of each other at every stage of production. How the discoveries made during the identity creating phase can be observed later on at the purely technical areas. In general, this is about how to make a consistent and clear product with a distinct voice throughout its entire package.

Brand construction

One of the biggest drivers of the design industry is the ability to create powerful identities for businesses. Identity is often perceived as a visual representation of the name. So if the name has anything to do with the Viking culture, it draws a set of certain visual anchors which we get from our background knowledge.

A common trap young designers fall into is they start designing before they do the research.

This is how a big portion of companies in the business work. They take the superficial meaning and squeeze metaphors out of it. As a result, companies end up with weak identities and beat-up logos. Then those logos are taken to web design and slapped on the interfaces with no connection to the original story because it was skipped because it was too obvious.
What sets great design agencies apart is the ability to make a story out of everything. If people are paying attention, it’s always worth it. What do we think a Viking analogy represents? Usually, it’s something hardcore, helmets, beards, the glyph V is different variations. However, it’s a totally made-up image. Vikings were farming most of the time despite the fact that were skilled seamen. They did not wear horned helmets and had a very profound hygiene routine. This does not necessarily mean you have to abandon the cultural image of a Viking but it’s good to know more about the subject before you design it.  

Settling on the style

Before the design of a project gets its direction, it has to go through a solid discovery phase where the first thing to address is who we are designing for and why. It’s critical that we do not start designing identity before we know who will use the product. The most effective way to do that is writing a story about a character, give them a name, define their demographic and psychographic and come up with a story as if you are tapping into their life. 
This will give us a clear perspective of what they like, don’t like, need, and want. Then we figure out whether the product we are building is capable to be useful for all of those contexts. This is a fun stage that allows designers to flex their empathy muscle and imagination.

Creating a user persona is like creating a video game character that you’ll be responsible for in the future.

Branding Attributes in UI

H+ by SHIMUR

Sometimes all the information you need may come from a client but it doesn’t mean designers don’t have to do the research. If there are real stats and data, there is always space for more. In UX research, they call in quantitative and qualitative research. Quantitative data is what a client gives you and qualitative data is what you dig out yourself by asking questions, analyzing the existing data, and filtering what’s important. Essentially, you are getting inside the customer’s head instead.
Once you know what your target customer is doing, thinking, feeling, saying, seeing, and hearing, you’ll not only know about their income and their social characteristics, you’ll be able to speak to them on a deeper level. The style developed at this stage has to be applicable both for branding and the further functionality of the product.

Components

A brand is not an identity. The visual style is only one of the brand implications. Before the visual part gets going, a brand falls into the following components:

  • The culture
  • The customer
  • The voice
  • The feel
  • The impact 

Each one of those has to have a clear definition from which the brand positioning will assemble. We took this from Chris Do who learned this from Marty Neumeier.
Branding Attributes
Each sentence brings us closer to defining a positioning that will be taken for a ride to the logo creation process and then, the interface.
logo creation process
So far, the exploration has not done any attempt to put it all into a visual form. At the beginning of the exploration, there only a couple of facts popping out and it’d be a mistake to jump on them right away. By the end of the discovery, we know not only the specifics of the product but also the people it has to speak to, and most importantly, we know whether people want it or not. What this stage gives us is a set of abstract and specific keywords to guide us through the design process.

The logo

A traditional design practice would be to come up with an idea and try to sell it. Where do the ideas come from though? They come from all the previous work and by the time you start creating visual anchors, you have a non-material feeling of the brand which is an indication that it’s time to design a logo.
A logo is not a brand. It’s a symbol representing the brand. The brand is the knowledge and the feeling we have about a product or service we are designing. This feeling narrows down the logo exploration to just depicting the things you already know rather than seeing what it would look like in different styles.

Attributes in UI

BossCat wordmark exploration by Insigniada – Branding Agency

A solid discovery and brand component study takes the load off a client and does not let personal preferences lead them away from the goal of reaching their customer. Novice designers try to secure themselves by tapping into all the available metaphors, for example presenting hi-tech, artistic, and vintage logo versions in the same file. This kind of work represents zero research behind the project. 

It’s better to present two logo options which are 90% “it” than nine options and 10% “it”.

It’s difficult for a lot of clients to come to terms with the fact that a logo is not the way the brand conveys its message. What the logo is, is a trademark that allows companies to indicate the source of their products or services and tell them from other things on the market.
 So a perfect logo is not a story. It’s a memorable and appealing piece of graphic at its best. 

Letting the brand live

Before the client even gets to see the logo, we need to make sure it is going in the right direction. Sometimes it’s enough to live test it within the lab to realize the direction is wrong. Remember, we have all the insights from the discovery phase. This is what you call “let the brand live”.
Folks at Blind call it stylescaping and we like to call it mood boards on steroids. The style scapes have to be different at a closer look but similar in the approach and the subtle feel.

style scapes have to be different

Turbocharger Website Stylescapes by Rob Robertson

What they do is they allow us to see whether the logo, the style, and the direction align with the feel of the brand we’ve developed. The style scapes might not even feature the product because a brand is not a product. A brand is feeling about the company, it’s products, service, and culture. 

A brand is not conveyed through words but it exists in the hearts and minds of people ❤️ 

Any product produced under a powerful brand inherits its fame and its flaws. Because of that, it’s super important to gain full control over the brand and not allow accidental dependencies come into play. 
A company does not own its brand, customers do because for each one of them, it represents a different value. The more values you produce, the bigger the chance of becoming a household name. 

A product’s apex is the sell. A brand’s apex is a sense of belonging.

A client’s input into the style scaping is priceless. They mix and match things, deliver even more insight, share their concerns. And it’s done before the actual design starts. Even if you are building a website or an app, the style scape does not need to look like them because remember, we are building a brand, not a product. And the brand is everywhere – in colors, typography, shapes, everything.
This context lets the designers slide into branding and messaging and ultimately, the interface.

The message

At this stage, the brand will start getting its voice. We will settle on the wording, the tone, and how the brand should sound. The statements that will appear at this stage will become valuable assets for the UI at the next stage. We might not know where we could apply a certain phrase, but it has to be written down and saved.

UI at the next stage

You Can’t Teach Heart. by Hyperfly

The messaging of a brand is the extension of the values it provides. The messaging is not a selling tool. But if the message is right, honest, and useful, it will sell.  

The interface

If we accept the fact that a product is not a brand, where do we put the digital representation of the brand like a website? On one hand, it should be a go-to place for everything brand-related, on the other, it has to function as a separate space. If you do come up with a strong identity, how to translate that into something structural like a website?
structural like a website
A discovery phase culture can help here as well. The first thing we need is a site map. The site map is based on the information structure we point out based on the client’s input. At the same time, the map is a part of a bigger customer journey that we want to happen. From our personas, we know what they like, need, and want. We used it to figure out the feel of the brand. Now we can use it to structure pages in a meaningful way.
Wireframe and prototype are the extensions of the style scapes we created to pick the client’s brain about the direction of visual design. That’s where we settled on typography, visual metaphors, and the look. If the brand’s value is bigger than selling a product, it has to be a genuine design effort for the better.

Wireframe and prototype

Environment Protection Community Website by tubik

The copy comes directly from the message we attributed the brand to. That’s why we don’t outsource copywriting and introduce a writer as early to project as we can. The copy can use a lot of the keywords provided during the kick-off meeting and all the later ones. Branding opens a huge window of opportunities for a writer to drag the useful meaning out.

This should not even be a question. A design firm has to be able to create a brand that is consistent throughout all its assets. However, when a client only hires you to make a logo or redesign a website, we get into a precarious position where our work will be evaluated based on the criteria we did not have a chance to do some work with.
A logo is just a mark and you can always design a beautiful isolated mark that will be accepted. At the same time, if you are not allowed to get into branding, the logo alone won’t work. The same with a website. Rebuilding a website has to follow a massive discovery, not just the template refresh. Digging deeper into the brand allows designers to upgrade the entire company. 
Recently, a client approached us with a marketing website redesign. We studied the case and realized this redesign won’t work without a full rebrand. After that, we made a website that started outshining the physical product, so we suggested a product redesign, which lead to a facility redesign as well. Now we are in the middle of our first industrial design project which started with a branding discovery phase.

*  *  *

Written by Moses Kim

July 07, 2019

Subscribe to Our Blog

Once a month we will send you blog updates