Episode 11: Rebecca Ussai on UX Choreography & branding
We’re back for season two! Rebecca Ussai, UX Design Director at RG/A Chicago, joins Val to chat about the realities of designing and prototyping animation for client work. We talk about how to make sense of the overwhelming number of prototyping tools out there and what comes after UX Choreography.
Episode Links
Transcript
Hi, and welcome to the first episode of Season Two of Motion & Meaning. I'm your host, Val Head, and we're going to be doing things just a little bit differently this season. In our first season, my co-host, Cennydd Bowles, and I talked a lot about the theory and principles behind why animation can be such a powerful design tool. We recorded 10 episodes that dig into the why and how of using animation in interfaces. If you haven't already listened to season one, I highly recommend checking it out.
This season, however, is about putting animation into practice. I lined up some really wonderful guests to share their stories of how they get animation done in their own work. Unfortunately, though, Cennydd won't be joining us this season. He's a bit busy researching a new book and some other things, but we might have him on as a guest later in the season. My guest for this episode is Rebecca Ussai, who I got to chat with over Skype a couple of weeks after we finally got to meet in person.
You might recognize Rebecca's name from her medium article UX Choreography or the South By Southwest talk by the same name. Rebecca is currently a UX design director at RG/A Chicago, where she and her team work to translate their client's brand, personality, and values into the interfaces they design. Of course, animation is one of the ways they accomplish that. We started out our chat by talking about process, more specifically, where in the design process she and her team start thinking about animation.
It's something that's on our minds from the start. Often, what happens at the beginning of any project is our creative team, when we get a brief from our client, we'll also get any of their existing assets and their brand guidelines. The very first step is immersing ourselves in who their brand is and where they want to be next, and what our role is going to be in helping them transition, if that's our intent, away from their current language and mindsets to something that they want to become. Often with the start-up projects, there's a lot of creative exploration going on across each of our disciplines. Official design is going through exercises for mood boards on color, and typography, and imagery, copies thinking through the appropriate way to evoke the tone of voice and talk to consumers.
A lot of times, I feed off of a lot of what they're doing. I get inspired by a lot of the key words and patterns that I'm seeing throughout their process. I already started to think how that might translate into a brand's behavior. One thing I always tell people to think about when it comes to motion is, "If a brand were to speak to you, what would it say? How would it talk to you? Think about if a brand were to move, what would it feel like?" Right off that bat, we may not necessarily be doing any motion design.
As we're thinking through design objectives for the different wire frames and main sections of the app or whatever digital experience it may be that we're creating, I'm already starting to think through the transitions that I may see and I'm jotting them down. Maybe we're doing some light prototyping for some of them, it's just, I guess, gestural upfront, we're jotting down some pillars, I guess you would say, for what we want the design experience to feel like. Then, later in the process, as we do get more refined and visual design is getting deep into their work, is where we give more precision to the motion style guide essentially.
Nice. Those pillars of what you want just like the design or things or what you want to say, is that something that's shared across visual motion, all the things? Is everyone pulled from that?
Yes. We call them experience pillars.
It's a good name.
We try to come up with three or four of them at the start of a project. We're heavily collaborating with visual and copy on this because it's going to influence the way that they're approaching their work, too. It may be words like playful, refreshing, and fun or strong, and swift, and clean, dramatic, and purposeful. Those just translate across many different touch points. They influence things like the way we might adjust the hierarchy of certain sections or what we bring into focus on the experience. That also, in the end, will influence the type of behavior that we want to see, too.
That's great. If you all start from those same pillars, there's a better chance and the experience is going to have this cohesive thread there, right, because you're all based on those same things.
Yeah. That's the end goal. It's the cohesiveness, like you just said, it's giving purpose behind a lot of our design decisions.
I like that you mentioned going from voice and tone and even content and copy things. I know I suggest that to people and I'm glad that I'm not the only one, so I don't sound crazy for being like, "You can go from content to motion."
It's just so much stronger when disciplines really are overlapping like that, and collaborating on it, and thinking through it together because you can definitely feel when experience that you use has been though through like that versus one that just doesn't feel as, I guess, authentic to the brand and it feels a little bit off.
Right. Do you notice that a lot when you're just using daily internet use and stuff? Does it stand out to you when you find a product that clearly their design and motions especially does not match their brand?
Yeah. Here and there, I'll just feel like ... You can tell when it's an afterthought in a way. It's always nice to see motion applied. I doubt that many other people are thinking through it on this level. When I engage with things, I take note when something feels really good and authentic to a brand, and just like it did feel like their tone of voice that I was engaging with versus one that was like I don't know why that was just made to be so quirky and playful, because I really don't think of those words. When I think of this brand, I think it was just like an out of the box type of application that they did. I sometimes wonder if other people subjectively are noticing that, too. I guess I'm just much more critical of it because this is what I'm thinking about everyday. Everything that I'm using, I'm somehow evaluating.
No, that's definitely, for all of us that work in this field, if we design things everyday, it's really hard not to judge the stuff we used. I don't know if normal people, as I like to call them, or just regular non-design people, can articulate why. I feel like they can tell the difference between an experience that's been thought through to that detail and one that hasn't. Even if you can't point out why, you just know that felt better, received better. That's my hope, by the way, is that I feel like there's indication that's true, but it does feel a little weird when you're like, "I'm judging everything."
I know, totally. It's also funny when I do hear people comment on it and they are normal people since they are non-designers, it immediately grabs my attention. I'm like, "Oh, really? Why do you say that? Because I want to hear your thoughts, a non-designer evaluating it and what it meant to you and how you felt."
Like instant research mode. You're like, "Wait, let me get my notebook. Why did you say that?" It's interesting because motion, and with all design, but I think motion especially can be so subjective, like what a movement, or a type of animation, or easing means to you can means totally different to someone else, or maybe they see something you don't just like that little bit of observational details.
Totally. I think that's why, like you said, it is subjective. I think that's why I think we need to try a little bit harder upfront to really sit down and think through what feels authentic for a brand, because then at least it feels more aligned and purposeful. Some may agree more than others when thinking through those key words and what it should feel like, but at least giving more thought to it can hopefully give it more purpose.
Having those in the beginning gives you more structure to base things on later. If you're having a discussion further into the project, like, "Oh, I don't like that easing," we said playful was one of our experience pillars, so that's why it makes sense that you could have more meaningful discussion, like someone could argue like it doesn't make because it's not playful enough. You have that basis which I think is a really smart way to approach it. You don't get into that like, "I like it," "I don't like it," then you're like, "What do we do?"
You're totally right. It gets increasingly important, especially when you're on projects that may be really long-term and you find yourself gravitating more and more away from your original vision for it as you go. It is a tool to help your teams stay in line and use the same type of key words, and communication, and mindset. It also helps with your client, too. As with anything in art design work, having that point of view upfront and really getting your client on board to help envision that experience, too, that you're trying to strive to create also help you articulate your design decisions to them, and they'll totally understand why you did what you did, and when something doesn't feel as appropriate, too. It's really a means just in a communication across the board.
Right. So many of, I don't know, the problems and struggles of design, or web design, or any design comes down to communicating with the people you're working with, which is both great and also sometimes the most difficult part of getting our jobs done. Do you make motion style guides for your clients? Since you're in a more of an agency model where you're creating a project for a client, and then I guess there's a hand off at some point, it's not like a product you're working on constantly. Do you still use style guides in that sense?
Yes, but it totally depends on the type of project. Sometimes, we'll do the development in-house, too. Other times, our clients will have their own and we're really just providing the design work, and they're the ones creating it in the end. It's been mixed. On one large, systematic redesign that we did last year, we created a motion style guide because we wanted to make it extra clear and easy for the team that was going to be building it in the end because they weren't working hand in hand with us. What we tried to do with that style guide ... And I feel like this still a learning process. We learned a lot from doing this our first time as to how you might approach it down the road.
We tried to create a sampling of interactions across this whole experience. We had a section for global elements, things like navigation, and accordions, and overlays, and tool tips. We would show them some examples and provide a little snippet of a video recording of a prototype. Then, document things like the type of easing that was applied, opacity, position change. Even before diving into those prototypes, we had a little bit of a setup, a lot of what we were talking upfront, like our point of view of how we want the motions to feel like, the easing that should be used across the board, when you should use opacity change or position change and why.
It was nice because we didn't, in the end, have to create a prototype for every single type of microinteraction. We just said, in general, if there's a type of accordion movement anywhere on the site, just treat it in this way. It was really easy for them in the end because they understood if anything would ever come up, this is how to approach it. Like I said, if it's a larger systematic design where we have to create a style guide for visual design and copy as well, we'll do it. Other times, it's more of an agile, quick project, and we may just be making decisions on the fly. There's no formal documentation of it in the end.
Right. I like the way that you're talking about structuring, like when you have the main goals and so it's extensible. It's not just like, "Here are the exact animations you make for this project, and if you have a new one, too bad," giving people that basis that almost like enabling them to make good decisions even after your agency's gone, you handed it off. You're like, "We're not working on the project with you anymore, but here's a good basis for helping you out." That's super helpful. Very great way to hand it off, too. You're like, "I know the new things will come up. We can't think of everything."
Making them best equipped for anything that might come up long-term, because the design also just doesn't end there. You know that this site and experience will continue to evolve down the road probably, but this will still be a tool for them long-term.
Right. If you're going to put all the effort into creating any a motion style guide, you want it to be something they can build off of, which is, like you said, there's also going to be something new. It's rarely do you hand off a web project and they never add anything or change anything. That doesn't happen often.
Never completely finished.
It's like the beautiful thing about the web and the worst thing about the web, it's never done.
Your project's never done.
You're like, "It never ends," but also, you're like, "But I can fix anything. If there's a mistake, I can come back and fix it."
know, totally. I'm still going to be reviewing this. Even though I'm technically not on this project anymore, I'm going to still be looking out for all that stuff.
You mentioned you put in little videos and bits of prototypes, what kind of tools do you and your team use for prototyping when you're coming up with these ideas for clients or for their style guide?
Sure. Again, I think it's a little bit of a mixed bag, and it's all dependent on, I guess, what the purpose of the prototype is, whether it's just to have a proof of concept to your clients so that they understand what you're trying to get at and have something work versus creating that more refined motion style guide and language. Probably not the best answer because I think a lot of people don't use this tool anymore, but in the past, I've used After Effects a lot. The reason why is because ... And I'm sure a lot of other tools are much better at this now. What I liked about After Effects was that I could import all of the layers from other programs we were using. Like if I set up layers in Illustrator, or from Sketch, or from Photoshop, if I'm bringing in visual designer's final work, I can easily build off of the work that was already done and not have to recreate the same UI just for the purpose of doing motion now.
In terms of workflow, in the past, that was easy for me. I know there's a steep learning curve for people if they haven't used After Effects. The major con is also that it's not interactive. You can't view it on your device. For the motion style guide, for example, when we were handing off prototypes, it works fine in that respect because we were just handing off recordings of different interactions and scenarios. There have been times where if you are trying to sell in a concept to your client, it's best to have them experience that on their phone and get excited about that.
That's one other programs like ... I've dabbled in things like Pixate. I think Proto.io and Flinto, did a little bit of these, too, but small microinteractions that you can prototype and look at on device. Those are great if you're just focusing on a couple of them. I found it to be a lot of work if you're trying to do a lot of them across the board. I guess, sometimes, I also have to take into account, are we also trying to show, I guess, a bunch of user flows or something. Envision, for example, they don't have motion prototyping right now, but I know they're working on it. Sometimes-
It's in the works apparently, it's coming.
I know. It's in the works. It looks awesome. I'm hoping this is going to be the gold star, because my ideal tool is something that pulls together not only screen-to-screen transitions so that you can go through a really robust flow, but also give the precision to transitions that aren't out of the box, like swipe left, and from the bottom because that's like my pet peeve about it now. I'm like, if only Envision had the ability to also do all of the tiny component-based transitions that you can control and not just the single page at a time, like I said, the end goal of this, is it just to do some quick iteration and see what's feeling right or is it to get really meticulous around the behaviors in the end?
Right. I feel like you almost need two kinds of tools, one you can work in really quickly and be like, "Is this even a good idea? Should we even do this?" Then, one where you can really refine it and be like, "This is exactly what it should look like or what it should feel like." You're right, there's no prototype tool for it, yeah, I don't think. I also have high hopes for the Envision solution because the little sneak peeks I've seen of it look really amazing, and they're already so good at that kind of other prototyping and page-to-page transitions. So many people are using it for that already. If they could add some really good microinteraction motion, I think it would take off very well.
They're already thinking through it. What I love about it now is ... I work in Sketch primarily for wires, and it already syncs with Sketch, so every time I make updates to my file, it's automatically syncing with Envision. It would be even more amazing if even on the layer level if I could just switch between the tools without a hitch, because that's the biggest barrier right now with a lot of these. It's like, "I don't want to do work over again and waste time recreating things and stuff, so what is the easiest way to bridge that gap between them?
Right. When you're prototyping, you're exploring something because you want to get to a solution faster. You want to know before you build it, so making the prototype is just as much work as building it or any way even close to that. It's like it defeats the purpose. It's tough. There's so many prototyping tools out there. I feel like none of them are exactly right yet, or at least not for me. I've been using Framer a lot lately, which is super powerful and awesome, also has a great Sketch integration which if didn't have that, I wouldn't be able to use it because those designs get updated and then you don't want to have to rebuild your entire prototype. I love the import button, saves me so much time.
Within the past three years, it's really amazing to see how far a lot of these have come. I remember three years ago, there really wasn't anything before. There wasn't even Sketch and we were working in Illustrator and design for wires. After Effects was really the only motion prototyping option at that time, it felt like. I feel like a lot of these new tools are iterating so quickly based on what they know users want and need. I have full faith that in the future soon, there will be tools that are getting at this whole idea of bridging that gap and proving that whole workflow. There's so many of them now, so I'm hopeful.
I feel like there's so many. I'm also hopeful that there's so many in the space, someone is going to come up with a really good way to do it. They'll come out as the leader and then you've gotten this better solution that we are hoping for.
Not only that. The fact that there's so many tools, it's like a blessing and a curse right now because everyone is experimenting with different ones, which is awesome. At least what I've experienced in our agency, for example, it's hard to find a standard tool that most people know and that we can all use. I feel like it always comes down to this scenario, we're so strapped for time on projects and we all are so eager to learn this and then you also have to weigh it with the timeline that you realistically have. If down the road, it just becomes a little bit more standardized in the types of things that we're using because some of them are much easier to use, then hopefully, it will help because it will become a more integrated part of our process, because they're all just so easy to use at that point, and everybody has gone over the learning curve, and isn't intimated in a way to start to teach themselves a new tool in the middle of a project.
Right, because that's a scary thing. If you're like, "Oh, I need to prototype something. Oh, here's a new tool that just came out yesterday," that is risky in the middle of our project to try something brand new.
I know. You'll have this scenario where it's like, "Oh, my God, this review is a couple of days away, and I would love to have something ready by then, and I know this tool would be amazing for that, but I'm not confident that I get to that fidelity that we need." It's always like weighing, "What can I realistically do? Can I take this on because I want it to be this amazing thing, but hopefully I know enough to make it that good."
It's almost a bit of gamble sometimes, like, "I think I can do it. I hope I could do it in time." When do you typically present animation ideas? You present prototypes for specific animation ideas to clients. Do you only present internally or do you do both at different times?
Both at different times. We'll always have internals before client reviews, which will happen every other week or so if it's a long-term systematic project. We'll usually be focused on batches, how many experience at a time, certain sections of a site or an app. Within those, if there are some key components of that section that are really core to that brand experience, it is worth it at that point to dive a little bit deeper and maybe do some prototyping around it to get our client excited about it and to understand it better. That's where it's like the low-fidelity prototyping, so we'll caveat it. We're like, "What we're showing you here is just the mechanics on how you might envision something like this behaving."
You know at the back of your mind that you're going to refine this down the road once visual comes in and they help work through it together, because that stuff might change when they're brought it. When you have wires and are working with a visual designer, their job is also to interpret that in a way that maybe is better than what you have started. They might have a different way of working through it and you build off of that, too. Like we are talking about, that's one of the prototypes that are fast and easy and can get that proof of concept across, or valuable.
We'll show a lot of that early on to our client. Then, once we have the more refined experience down the road is where we'll put some more time around it and precision, and start to set more of those concrete rules like I was talking motion style guide that will give a holistic view as to say like, "Okay, now that we have our visual language totally set and you can see it applied, you can start to imagine the feeling of playful, and refreshing, and fun coming in or strong, and swift, and clean and articulate it that way."
You have to try out a few things before you figure out exactly how you're going to express that. You can't just jump right into this high-fidelity like, "Here's exactly what you said." So like a checkbox, you're like, "You said you are playful and strong. Therefore, you will use easing curve on all of your things." It's never one-to-one like that.
It's still a lot of erasion. You have those key words and you're inspired by them, but it will take some time and a couple different iterations of that, too, of interpreting what that might feel like in the UI before you even find something that you want to move forward with and start to apply across the board.
All design, it's more art and science, I guess. It's like there's no one path, but that's what it makes it really interesting. It's like every time, even you had a client with similar experience pillars, you still will come to a different conclusion, so that whole discovery process and that design process just come up with something different in the end.
Like you said, it's the fun part about it, too. We have different ways of approaching the whole creative process, but it's been different. Every project I've been on, I still don't have one totally right way of doing it. All I know is upfront get inspired by the brand you're going to work with, see how the client reacts to it, see where you should spend your focus on this, and then we just adapt on the fly, I guess.
No, I love it. It's the whole like, "It depends" answer to questions. You want to structure within which you work, but you don't want to be so rigid that you're like, "Everything turns out the same," or you just feel like you're repeating yourself because it's not a fun way to work. You want to have that room to explore and everything. It's a good way to say it. I think that's awesome, a good place to wrap things up. One last question for you is, where can people find you on the internet and keep track of what sorts of cool things you're up to?
Good question. I would say it. Twitter is usually your go-to answer at all. I'm totally not active on Twitter at all. Sorry, guys, by handle is becca_u. I always see what people are tweeting at me and I do respond, but I'm not totally active, sorry if I let you down there. I'm trying to be more active on Medium. I have a post from from last year that I published the Principles of UX Choreography. I'm actually thinking about the follow-up now, which actually aligns a lot with what we've been talking about today.
My goal with that post last year, when I came up with the principles, was to have a set of guidelines, I guess, for designers to think about motion in the right way. A lot has not changed where, I guess, I've observed a lot from putting them into practice over the past year. I feel like now, I want to do a follow-up to talk more about this whole process of how to integrate it into your workflow, how to approach it with a mindset of designing for your brand, your character essentially, and getting inspired by that and thinking of that first. Hopefully, I get to that soon. I have a little outline in my mind, but that's essentially where I want to take it next.
That's great. I love it. It's like coming from that brand perspective and not knowing what you want to say I think is perfect. The more we can get people interested in this and thinking about motion and just having a thing to say with it. I'm excited. That's great. Everyone can definitely look you up on Medium and Twitter. Now that you said you're going to be working on that article and people will listen to this, you're going to have to write it. Sorry.
I know. I'm totally going to have to hold myself accountable.
ou've committed yourself, it's on the record.
/it's on the record.
Thanks so much for joining me today and for chatting about animation and process. I think it was super great to hear about what you do and how you approach it. I found it really interesting. Thanks so much.
Awesome. It was fun to talk about it. I'm looking forward to hearing about everyone else.
To find out more about more about Rebecca, be sure to follow her on Twitter and Medium. You can find here on both those sites as becca_u. I'll also link them both in the show notes. If you want to learn more about how to make animation a part of your own process, I just published a book called Designing Interface Animation that covers all of that and more. You can find the book at designinginterfaceanimation.com or on Rosenthal Media site.
You've been listening to Season Two, Episode One of Motion & Meaning with me, Val Head. You can find out more about the show at motionandmeaning.io, as well as listen to all of last season's episodes with me and Cennydd Bowles. You can find episodes both there on the site and on iTunes. I'd love to hear your feedback on Twitter, you can find us there at @motionmeaning. If you've enjoyed the show, give us a rating or review on iTunes, so more people can find out about Motion & Meaning. See you again soon.