7 March 2019

Here’s Why Branding Plays Such an Important Role in UI

We’ve worked with clients across the board and we’ve learnt a lot from our experiences. We’ve branded businesses from scratch, we’ve helped brands transition into the digital arena. And we’ve loved every minute of it.

Today’s sharing economy means that we as an agency have an unmatched opportunity to share what we know with the world. So we’re doing just that. In this post, we’re going to demystify UX and UI and show you why branding is at the centre of it all.

 

Let’s Start By Defining UX

UX, or User Experience is a term used to describe how users interact and engage with your brand. A website with good UX for example, will be able to tick off most or all of the below boxes:

– Website loads easily within two seconds or less
– User can find what they’re looking for in two clicks or less
– The site’s navigation is easy to understand and use
– The content is valuable and relevant
– Call-to-actions are clear and concise
– Help bots are visible and available
– Website is a credible source of information
– Queries and comments are responded to quickly and professionally

UX encompasses all the factors that describe the human-computer interaction. Do users leave your website feeling satisfied that they will visit it again and recommend it to their peers? Or do they leave feeling disgruntled that it was difficult to navigate and operates like something out of the MS-DOS era? A good UX designer will always ensure that the former is true.

 

Now Let’s Look at UI

UI, or User Interface can be described as the presentation or the look and feel of a brand, particularly its digital appearance. Its what you see when you first load a site – the colours, the fonts, the logos and the animation.

In layman’s terms, UI describes the creative design of a website. UI designers ask themselves questions like, “when a user visits this site, are their senses bombarded by confusing and invasive colours and typefaces? Or is the site easy on the eye? Does the layout of the homepage make creative sense in terms of how users read and understanding language? Or is it a migraine in the making?”

We have broken it down with an infographic (see infographic on the left)

 

What’s branding got to do with it?

Imagine a storefront – a window filled with a lit-up display with a large-scale, paper maché installation, glistening with diamond jewellery.

Now imagine another store window – a generic display of diamond jewellery on black velvet.

What we’re going to lengths to explain here, is that (we hope) you’ll feel more inclined to visit the first kind of store. And that’s what good UI does – it showcases a company’s brand identity in a way that is eye-catching and inviting. It welcomes you in.

One of the first exercises any UI designer will tackle when designing a website is the branding. He/she will ask important questions about what the brand’s colours are, what fonts it uses, what its logo looks like, and what kind of visual language the brand has used to communicate its messaging to the world. Without these factors, a real, meaningful brand experience cannot be created.

Branding and UI need to work together harmoniously in order to make a good first impression. Because (and excuse the cliché), first impressions last.

Let’s talk about one of the world’s most ubiquitous brands – Coca-Cola. When you think about the brand, you think red and white, the iconic Spencerian script and images of people sharing special moments.

Enter cola-colacompany.com and there is it is: the red and white, the Spencerian script and the trademark emotive images of people drinking Coke and having a good time. It’s a strong brand, with strong UI.

Now let’s look at an example that’s a bit closer to home. Introducing, ARLAX.

 

The Challenge:

ARLAX is a new digital product designed to better service the logistics industry that links transporters to suppliers. It is a digital solution that takes the administrative hassle- and time-intensive process out of distribution. As an industry newcomer, the challenge was to develop a new brand identity and marketing communications plan to stand out in a highly competitive industry. Given that ARLAX is a digital platform, the design of the logo, branding and UI kits needed to work seamlessly across a complex software solution across digital devices, while presenting a professional and established image.

 

The Pure Solution:

We created a brand identity that would represent the coming together of suppliers and transporters at a professional, online marketplace. This coming together was denoted in the Arlax logo, which consists of a two arrows intersecting to create an ‘X.’

The brand identity consists of a blue, grey and black colour palette, a modern, European-style sans-serif font and graphic elements taken from the logo. Our team strategically chose graphics, a colour palette, typography and a tagline to ensure that the brand language was consistent throughout all elements of the brand.

 

Results:

– A Relationship Beyond the First Brief: Due to the effective and strategic execution of the initial brief, Arlax extended its requirements to include the development of their website and their Explainer Video. We are confident that what we are building is a long-lasting business relationship with Arlax.

– High Online Rankings: Arlax has achieved high online rankings due to strong brand awareness and a new client base. They are well on their way to achieving their first quarter objectives.

– New Business Connections: Alrax’s high-end marketing materials and strategic sales decks have garnered interest from key decision-makers who have invited their proposals

 

Client Testimonial:

“PURE Creative managed to exceed my expectations with the design of our logo, brand identity and website.  Additionally, they wrote and produced an exceptional company marketing video for ARLAX using high-end animation and voice-over. I highly recommend PURE to any company requiring a new brand identity and content marketing.”

CEO of Arlax – Sahil Maharaj

 

Here’s What Pure CEO, Andrew Burke Has to Say on the Topic

Q: What makes good UI?

A: Great UI design should improve people’s lives and help meet business goals by:

– Always being visually appealing to the target market. Good design can be the make-or-break factor when it comes to bounce rate.

– Always having high responsiveness. Great UI design should have a natural relationship with the user’s onsite journey and be consistent with the brand identity. This can be achieved through the use of bespoke iconography, shapes, colour, typography and grid systems that inform and facilitate how a user engages with the platform.

Q: In your opinion, is there a natural synchronicity between UI and branding?

A: Absolutely! Your UI design system should be a natural reflection of your brand identity design. It’s simple – don’t swop font or header sizes across pages, or make icons different colours – doing so will frustrate the user.

P.S. Remember that different platforms (like iOS vs Android) have different specs, so your design solutions need to be responsive to each platform.

Q: How has PURE’s experience with branding equipped you to perform well in the UI space as you’ve transitioned into the digital arena?

A: PURE has thrived in the design, branding and communications sector for around 15 years now, working with a range of clients, from SME tech brands to large global corporations. Our creative team is made up of a mix of traditional “print” designers as well as the “new kids” –digital designers. Surprisingly many of our more traditional editorial designers for instance, come up with better solutions than the UI-trained designers, which has shown us that the big idea remains key to best business solutions. In this new realm, our blend of years of experience in traditional media, combined with new talent, truly sets us apart.

 

Want to chat to us about how to improve your UI? We would love to get to know more about what you need. Contact us on accounts@purecreative.co.za or give us a ring on (021) 4242 6918.

How Design Can Influence Your Business