Designing for Brand Interaction
Finding inspiration, developing a point of view, and looking ahead at the ever-changing role of the UX designer
A few years ago, I started to evaluate the topic of motion design. It was at a point in time where UX designers were stuck designing in static comps, drowning in annotations, and the primary tool we had on hand only offered us simple, clickable transitions. I knew that motion design was important to our role, but wasn’t quite sure how to approach it. After immersing myself in dozens of examples of how motion was being used in digital, I began to see a pattern in the ways it could be used in distinct moments. I started to better understand how motion can help us better communicate in a UI, help with cognitive load, make a UI feel tangible and realistic, and overall create a more polished experience. I formed the Principles of UX Choreography with the goal of coming up with some sort a reference that designers could use to help us know when, why, and how to use motion.
UX designers have made tremendous progress in the past year or two. There are dozens of prototyping tools at our disposal which are far more integrated and easy to pick up, and therefor easier to integrate into workflow. It’s been amazingly helpful to see many other designers sharing advice and best practices on the topic of motion design, and now there are so many more best-in-class examples to learn from. All in all, I feel like designers have established a better sense of awareness for designing for motion and interaction. So keep doing what you’re doing! 👌🏻
The need for identity
With this progress forward in prototyping with motion comes one con: the lack of a distinct brand identity across interactions. There are so many out-of-the-box transitions now at our disposal and we often get stuck referencing the same great examples over and over…it’s easy to just mimic what’s already out there and working for others. It is becoming increasingly important for designers and brands to give closer consideration to the branded interaction we are creating in order to create distinction and identity.
Personally, this same theme also started to emerge after spending time integrating the Principles of UX Choreography into my workflow and continuing to evaluate any experience I interact with. I started to see a bit of hierarchy to the principles, mainly the importance of beginning with Brand Tone of Voice and establishing a point of view on a “character’s” behavior and tone upfront. Doing so helps establish cohesion, rationale, and communication among teams (more on this later). Similar to how creative teams establish tone of voice for copy and visual guidelines for color, typography, imagery, and iconography, the same level of thought is needed behind interaction.
In this article, the topics I’ll cover include:
- Why you need a point of view on your brand’s behavior and when in the creative process to think about it
- Establishing Motion Pillars that all interaction should latter up to
- Creating overarching motion guidelines in order to apply cohesive behavior
- Finding ownable moments in the experience that go above and beyond
- Editing back, and looking forward to what’s next
If a brand were to speak to us, what would it say? If a brand were to move, what would it feel like?
Making motion & interaction ownable
What makes one service better than the next? And what even makes one feel unique from the rest? In addition to making the products and services we design intuitive, simple, and enjoyable, we have to evaluate what is relevant, authentic, and true for brands.
Branded motion and interaction are extra levels of detail that can influence an experience and a user’s perception of your brand and product. Though this article is primarily focusing on motion, now more than ever, users are able to engage with brands across dozens of different touch-points that didn’t exist before: bots, VR, voice-controlled experiences, Slack extensions… the list will only continue to go on. Motion, and screens in general, are just one part of the equation. Users expect to have the same level of service no matter where they are. They’ll expect a brand to stay consistent too. In order to ensure consistency and authenticity, teams must develop a grounded point of view for how their brands should behave, what unique value their service or product brings, and the feelings they want their users to have while they engage.
When should we be thinking about a brand’s motion and how do we start?
The quick answer: right at the beginning. The longer answer: you’ll be iterating upon it all throughout the creative process. It’s true that you may not be able to have a good grasp on how to apply motion until you’ve started loosely designing some flows and better start to identify opportunity areas, but in terms of coming up with a point of view on your brand’s behavior, it’s never too early.
I’ve found that the best way to begin is at the start of the creative process when you have all creative disciplines working together immersing themselves in the brand, philosophy, and goals. The easiest place to start is with any existing brand guidelines. How does a brand position itself now? What are its values? How do they want users to feel when they interact with their brand? And more importantly, is this brand looking to your team to help them evolve into something new? After we have a good grasp on this, we step back and get more inspiration from the brand’s surrounding experiences. We start to think wide and look at tangents. Is there anything else that inspires you from things like: retail experiences, physical products, historical influence, their tone of voice, and larger philosophy? Start to capture the keywords that come to mind.
Defining Motion Pillars
Now, as other creative disciplines begin to form their point of views on tone of voice, color, typography, imagery, and iconography, this is your chance to begin forming a point of view on behavior. Get inspired from the keywords your teammates might be using and the other brand inspiration you pulled. These keywords can be a little different from your overall brand guidelines, and they should be — mainly because they should be adjectives that are actionable (i.e. a brand’s movement can’t be described with something like “sustainable”). The goal is to narrow down this list to about 3 unique keywords which will become your Motion Pillars. Which ones feel most authentic and ownable? These might change as you continue your creative process, but you at least have a solid start.
While working on a project for UFC.TV at R/GA, our team began by immersing ourselves in the brand’s guidelines and philosophy. Themes of discipline, athleticism, training, and respect were important to evoke. When speaking about the fighters and events, it was important for our copywriters to position events as epic in nature, develop compelling narratives by highlighting the fighters and their backgrounds, and to emphasize that fights are a culmination of years of training and dedication. We wanted our visual direction to feel precise and innovative; fighters should feel heroic and larger than life. In order to make the design feel dynamic, the team explored linear graphic elements to enhance select moments. The end result felt crisp, innovative, and immersive. All of these keywords and descriptions helped inform our 3 Motion Pillars: Strong, Swift, and Clean.
Strong: Movement is inspired by athleticism. You can imagine some movement feeling like a quick jab or punch.
Swift: Fighters are quick and precise. Imagine using a steep ease in and ease out curve to evoke this feeling in motion.
Clean: UFC.TV is a premium service that we want to feel sophisticated.
The benefits of having a point of view on your brand’s motion
You’ll find that starting with a point of view will help in 3 ways: communication, rationale, and cohesion. Motion Pillars help your your team have a shared dialogue and also help you better communicate the experience you’re trying to create with your client (and they’ll get way more excited because they start to better imagine the experience too). Once you start to get into the really specific design details and begin prototyping micro-interactions, they’ll help you justify design decisions for what feels right. Lastly, it’ll help every interaction feel more cohesive.
Exercise! Try forming a point of view on what the Motion Pillars for the 3 brands below might be. If you don’t want to work off of these, try picking 3 other miscellaneous brands. Some of these might be far more obvious and easier to come up with than others. The reality is, many of the brands we work with might be a lot harder to define Motion Pillars for. Don’t give up and default to out-of-the-box interactions though! This is an important challenge for your team to attempt working though.
A few things that inspired me when doing this exercise: Ikea’s retail experience (the easy flow around everything) and their minimalist, friendly assembly instructions. There’s also something wonderful about making beauty and delight accessible to the masses. FedEx’s goal of efficiency and precision. Their brand attributes consist of: simplifying, optimizing, inventive, connecting, certainty, personal. Patagonia…. admittedly a little more vague. Personally, I’m inspired by their philosophy and this whole sense of exploration and wonder. Their products are simplistic, designed for “silent sports” (i.e. none require a motor or have the cheer of a crowd) like climbing, skiing, surfing, and trail running. They’re inspired by moments that connect us with nature. What else might you reference to help inform interaction?
Applying Motion: Branded Moments & Branded Behavior
Alright, so now that you have a solid grasp on how you think your brand should move and behave, how do you begin applying it? At the start of your process, reflect on the product or service that you are about to design.
- First off, why are you creating this product or service in the first place (i.e. What is the main problem you are trying to solve)?
- Where are your users going to be spending the most time?
- How do you want them to feel?
I often begin by identifying some of the most important moments and flows that will inform the experience. Our team also tries to have a good grasp on what moments in the experience will set this service apart and be unique and ownable (e.g. Uber’s home screen with cars driving around and “trips” feature which was referenced earlier). These iconic pieces are what we call Branded Moments. Everything else in between should reflect a Branded Behavior. Both of these are inspired by your Motion Pillars.
Branded Behaviors
Let’s start with Branded Behaviors. They essentially encompass any micro-interaction within the experience you are creating: the moments where you might be applying UX Choreography, such as providing feedback to users, hinting at what they can do or where they should go with Feedforward, allowing them to get familiar with where things from from and where they go next with Spatial Awareness, or highlighting the most important elements on screen to guide User Focus. These also include all the subtleties of any other transitions and states in between, such as hover states and transitions. The goal at the step is to begin to apply and refine your Motion Pillars to all micro-interactions in order to achieve cohesive treatment and give more specificity to guidelines.
For each screen and flow you are designing, evaluate the goal, what you are trying to communicate to users, and what their primary need might be. One thing I find that helps is to start a running list of every type of micro-interaction we might encounter in our designs.
Start really wide when listing all of these moments, then narrow down. It helps if you start to group elements that should have similar treatment. For example, accordions or dialogues. It’s helpful to work closely with Visual Designers at this point and time too (if you aren’t already working towards that on your own) — often what you might have made in wireframes will look or operate a little differently once a visual designer has helped refine the vision. The two of you together can help articulate the exact motion executions you wish to see.
Establishing Motion Guidelines around Branded Behavior
After you’ve started to group categories of interactions, this is the point at which you can start to give more specific guidelines to your Motion Pillars, such as easing, velocity, opacity change or scale change. In the end, it’s likely not realistic that you’ll be able to prototype every little micro-interaction, but if you prototype a sampling it will be easy to see how the same treatment can be reused for other moments. Now that you’ve refined your list of interactions, you may only need to prototype one sample from each category. In the moments that you do prototype, step back occasionally ask yourself whether the interaction is meeting your pillars (e.g. Does it feel Strong? Swift? Clean?) It helps to get someone else’s eyes on your prototypes too for a gut check. The exact treatment you begin to apply will be the start of larger brand motion & interaction guidelines. These guidelines will also be the reference the development team can use whenever they might encounter other scenarios that need motion going forward. Future proofing for the win!
One important caveat: When you look at this list of key moments you are establishing to apply motion, many of them will feel extremely subtle. They might seem lack-luster. Don’t try to over-design and over-animate them to the point where they are over-the-top and illustrative. Motion should never get in the way and the best designs are still invisible. You’ll find that as users begin to interact with your service more and more, the micro-interactions they will encounter will begin to compound.
Over time, these subtle moments start to form an identity and your branded behavior starts to become evident. The same way you pick up on someone’s mannerisms the more you get to know them over time, you start to pick up on a brand’s behaviors.
Branded Moments
Whether it’s at the start of your design process or something you begin to have a better grasp of as you go, you will start to identify moments in your experience that you realize are core to your overarching objective. It’s a moment that you want to feel ownable and unique to your brand’s identity. Or, you may be striving to create more surprise and delight in order to create something memorable. This is what we define as a Branded Moment.
These moments build off of your Motion Pillars, but are also opportunities to go above and beyond. Perhaps they are more illustrative, but it’s for the purpose of establishing identity and experience. Work with your team and your client to evaluate what you think may be of utmost importance of where you think you can deliver the most impact. Again, ask yourself what may be relevant, authentic, and true for the brand and how you want your users to feel in this moment.
Referencing the same 3 brands from earlier, what would you consider some opportunities to create Branded Moments? For FedEx, this might be the moment of tracking a shipment. For Ikea, online instructions for furniture assembly. And for Patagonia, it may be an element introduced in the shopping experience, such as the way you navigate products or see content with products in use. How would you rethink these moments to create something ownable?
Wrapping up
Designing for brand interaction should be an iterative process. Going forward, take the time to evaluate the experience you are creating and how you can best evoke your brand’s tone. Reflect on how you want your users to feel and what you’d want them to say about the experience. Lastly, don’t forget to step back and edit — too many delightful details can start to get in the way.
Admittedly, this process may not be so straightforward sometimes. You may be working on a largely established brand and only concentrating on a tiny stream of work. Don’t let that hold you back, but rather gather all you know about what the brand has done to date in terms of establishing interaction guidelines and if you are able to subtly influence that point of view on your stream of work. Starting the conversation now will better help your team be successful in the long run.
Looking ahead
As mentioned earlier, motion is just one aspect of a larger story; screens may only be part of the equation. As UX designers, our roles are constantly evolving as we try to keep up with emerging trends and technology across digital experiences. Whether it may be bots, voice-enabled experiences, immersive interactions with VR, tiny watch interfaces, or physical environments enhanced by technology, we are best equipped to start connecting these dots and providing a holistic point of view on how to provide value to both brands and consumers. Designing for brands through interaction will help us create consistent, seamless, and familiar experience at any touchpoint, all while remaining authentic and distinct.
Be sure to check out some of the great articles linked within here for more food for thought! Particularly the State of UX in 2017, which has some great thoughts on how the role of a UX designer is evolving.
Also thanks to R/GA for always placing so much importance on branded experiences and helping teach me the ropes. Read more on R/GA by Design.
