Dos and Don’ts of Branding and UX
A little louder for those in the back: your brand is what makes you stand out from your competition and be memorable to your customers. We heard from G5 designers and marketers — April O’Rourke, Caitlin Moriarty, and Christie Taylor — to get a crash course in building a UX-backed brand.
Let’s get to the point. The worst thing you want to do is try to please everyone. Think of your brand like a magnet: attract and repel. Follow these seven brand and UX (user experience) dos and don’ts to draw in more renters and residents and make them think “YES! This is the place.”
- Do keep your digital presence in mind when developing brand colors, your colors need to work well both in print and online. Nope, print isn’t dead, it’s just digital’s baby sister now.
- Do research color theory when developing your brand colors.
- Don’t. go. overboard. i.e. don’t think ROY G. BIV counts as a brand palette. Pick 3-5 brand colors and have clear ideas how you’ll implement them.
- Don’t be afraid to make bold choices, for example, Airbnb’s bright pink, and Tiffany’s iconic, you guessed it, Tiffany blue.
- Do pay attention to page speed, users are impatient and will likely think your website is broken if it doesn’t load quickly.
- Do use video in place of large heavy GIFs, as GIFs can bog down the page speed. The math-ish version: similar aesthetic result + better performance = UX Win.
- Don’t have missing links or information.
- Don’t sacrifice performance for design. Too many heavy elements — highly interactive widgets, large images, or too many videos on a page — will hurt your page speed score.
- Do make it easy to find. This isn’t a fifth-grade scavenger hunt, it’s a web session that if you’re lucky will last more than 30 seconds.
- Do use terminology that is clear, concise, and makes sense to your user. Renters and residents won’t understand your marketing jargon if they aren’t familiar with your brand.
- Don’t have repetitive pages, it confuses the website visitor.
- Don’t place too many items in your navigation. Make sure your website is clear, for example, Airbnb has three items in their navigation.
4. Calls-to-Action (CTA)
- Do minimize the number of choices to avoid decision paralysis. At G5, we recommend one call-to-action. Learn more about this in our Performance-Centric Design Case Study.
- Do use action oriented language. Make sure it’s clear that you’re communicating what will happen if a user clicks on the CTA button. Instead of “click here” for your virtual tour scheduling CTA, cut to the chase and say “schedule a tour.”
- Don’t let them blend in, CTAs need to be easy to find.
- Don’t use a text color that doesn’t contrast well with the color of the button, for readability, and accessibility. There’s a reason newspapers were black and white, readability…okay, and cost too.
- Do use photos that represent your product or service.
- Do resize your images to screen resolution in order to optimize for the web. No one wants the billboard sized staff photo to load when they’re just looking for your phone number to ask about vacancies.
- Don’t forget to apply alt text, it allows screen readers to communicate what is in the photo to users.
- Don’t forget inclusion when selecting your lifestyle images. Make sure to represent anyone who might be visiting your website in the images you choose.
- Do size interactive elements on your site according to the screen size. For example, on mobile, you want things to be easily accessible to your thumb. Which isn’t exactly the layout you’d be looking for on a large desktop monitor.
- Do look at your site on an actual device, don’t just rely on a smart-phone sized website simulator.
- Don’t forget to check the design of your website on all screen sizes. It might look b-e-a-utiful on your desktop, but maybe the font is too light or too small on a mobile or 13 inch laptop.
- Don’t use the word “click” on your responsive website. Since there’s no mouse involved with mobile devices, “click” doesn’t translate well to mobile experiences.
- Do make your copy scannable. Less is more.
- Do use headings and subheadings to break up the copy, it allows the user to find the information they need faster.
- Don’t forget about SEO. You don’t want it to read like you threw keywords in a blender and poured them into the page, but if you don’t include relevant keywords you won’t be found in a Google search.
- Don’t let your brand get watered down in your copy. Tone and voice are very important for brand recognition. Remember the point is to build a relationship with your customer, and be memorable. Average is not memorable.
Brand = Memorable and UX = Smooth
When brand and UX meet in the middle you get this effortless, memorable (in a good way) experience. Watch our last Women In MarTech Summit Webinar to learn more, or download our Brand + UX report and workbook.