Plastic Motion
Introducing animation to Capital One’s design system
Throughout my entire UI Design career, I’ve tried to sneak bits of animation into the projects I’ve worked on. More often than not, those attempts were unsuccessful. The reason why those attempts had such a failure rate was because the clients I worked with weren’t keen on spending money on something that ‘was hard to quantify’ and in their view, wouldn’t bring in any immediate return.
So, imagine how delighted I was when, upon starting at Capital One in May 2020, I was asked to lead a project to introduce and embed animation into all the experiences we create.
My relationship with interface animation started in 2001, before I became a Designer. Back then, I was working as a hotel receptionist, doing night shifts. From midnight until 8am, I would sit in the reception of a small town hotel in Portugal and spend a fair chunk of that time surfing the web.
One night, I came across a website that, quite literally, changed the course of my life. The website in question was dedicated to American Graphic Designer, Saul Bass. It was built using the now defunct Adobe Flash (at the time, Macromedia Flash) and made extensive use of animation in its UI.
Back in 2001 the web was very much a static place. Other than badly designed animated GIFs, you couldn’t find a lot of animation, let alone fully immersive experiences like the one found on this website. My mind was blown.
Cutting the story short, after that night I decided I wanted to be a Web Designer. I went to uni and now I’m here writing about this.
The reason why I’m telling this story is because it illustrates the importance that motion can have in UI Design. Animation creates emotional connections and those connections pull people into the experience by making it more immersive and enjoyable.
Framing the problem
When I looked at what I was being asked to do, a few questions popped into my mind.
Firstly, what role does animation play in the experience? What can it do for the users and for their journeys?
Secondly, what are the best practices regarding UI animation? What is generally accepted as being a good thing to do, or not do.
And finally, what should be found in the motion section of a design system? At the end of this project, what should be included in our design system’s guidelines in terms of motion?
Now, in my mind, I had answers to these questions, but I wanted to be sure my answers were right and above all, comprehensive. So, I set off to do some research.
Over the next couple of weeks I poured over other design systems, countless articles and a few videos of talks, and in the end, I felt satisfied that I had all the answers I needed.
In the interest of not losing your attention, I’ll skip through the results of my research, but one key thing came out of it: before any motion design work could be done, we needed a foundational set of rules; a set of motion principles.
Defining our motion principles
Because animation was new to the system, it was important to involve the different teams that would, at some point or another, have to deal with animation. Teams that would be designing it, implementing it, deciding whether to dedicate resources to it, determining whether or not it fits the brand, etc.
For this reason, it was decided that the definition of our motion principles should take the form of a workshop, involving members of the Product Design, Engineering, Product Management, Brand and Studio teams. The workshop had the key objective of determining themes that people associated with Capital One and animation.
The session itself took a Diverge & Write, Converge & Group format. First, participants were asked to individually write down any ideas that they could think were important for what we were trying to achieve. Next, we all came together, went through each person’s ideas and did an exercise of grouping them into themes. The final step was for everyone to vote on the themes they thought were the most important or relevant. Participants were also given a ‘negative vote’, which could be used for a theme they felt didn’t really belong in the discussion.
After the session, I took the output and synthesised it into three proposed motion principles. These were based on the score of voting (the positive votes minus the negative ones), but also on other considerations, like whether or not a particular theme could just be considered a best-practice, for example.
The proposed principles were refined based on stakeholders’ feedback and turned into our final motion principles:
Helpful
Motion is there to help, not to lead. It adds context, guidance and information in a way that eases the brain power users need to breeze through experiences.
Simple
Motion makes a clear point, but it’s not bland. It keeps things as simple as possible. So no distractions and no diversions. It’s always less, and better for it.
Charismatic
Motion charms users, without stealing the limelight. It taps into the personality that makes our brand stand out, helping us to build bonds with users.
Ready… (Almost) set…
With our motion principles defined, it was time to get to the fun part and design some animations.
But, what should we animate? We needed to create a fairly large number of animations. The number had to be large enough for us to be able to extrapolate rules and specifications out of them (these would then become our motion guidelines).
The idea was to do an exercise of free exploration. With our only constraint being our newly defined motion principles, we holistically looked at everything that was created to see what worked, what didn’t, what could be improved, what patterns emerged, etc.
We could then refine and repeat until we had a final set of initial animations.
The best place for us to do that was our mobile app which offered us a significant number of animation opportunities to explore.
Animate!
In total, 54 moments were identified in the existing app journeys. Of those, 35 ended up being animated, with 28 of those making it to the final cut, after one round of refinement.
The final animations were divided into four categories: transitions, loaders, microinteractions and icons.
Did we get it right?
We thought so. However, we needed a bit more certainty, so some user-testing was on the plate.
The goal of the testing was to evaluate two main things: how the animations were performing against our motion principles and, the impact that the animations were having on the customer experience.
The tool used to perform the testing was UserTesting, an online testing platform which would allow us to very easily and quickly get some results back.
We had 19 participants, across 2 separate journeys, which included in total, 13 animations.
The 2 journeys were ‘Reset passcode’ and ‘Report card lost or stolen’, both of which are quite serious and potentially stressful tasks for our users. This was one of the reasons why we chose them; we wanted to see if animation could be appropriate for moments like these.
Spoiler: we got it right
The results were incredibly positive. The first thing I’d like to point out is that no one said anything negative about any of the animations. Most participants thought the animations were helpful in some way, had the right level of simplicity and added a bit of personality to the experience.
Enhancing the experience
So, did the animations actually enhance the experience? The honest answer is: Not for everyone — but for most people they did.
I say ‘not for everyone’ because out of our 19 participants, 5 of them couldn’t recall any animations at all. In a couple of those cases, I believe that this was due to the definition of what ‘animation’ is. People were thinking ‘Bugs Bunny’, rather than ‘slight motion on an icon’. But 3 of our participants just didn’t notice any animations at all.
Now, you could think that’s a negative thing, but I don’t think so. When it comes to animation in UI, I’d rather be conservative. For those 3 participants, the animations may not have enhanced the experience, but they also didn’t get in the way and that’s the most important thing, particularly for a company like Capital One.
For the rest of the participants, the animations were beneficial and did enhance the experience in one way or another:
- They made them feel more supported
- They made them feel safer or more secure
- They took the seriousness of a stressful task — they made it more fun
- They made the experience feel more professional, more polished
- They made the task more fluid
How about the motion principles?
As I mentioned earlier we were looking to evaluate whether or not the animations were adhering to our motion principles of Helpful, Simple, and Charismatic.
In regards to Helpful and Simple, we had great marks. A lot of participants mentioned these two words several times and in general you can gather from the comments that we did well on these two principles.
Charismatic had less of a presence, but I see this as a natural result, particularly if you take into account the seriousness of the tasks we were asking users to complete (reset their passcode and report a lost or stolen card).
Last, but not least… Emotion
One of the things I noticed as I presented the animations to the different stakeholders across the business were the little reactions. The slight smiles, the little nods, how their eyes lit up when a coin dropped into the cute piggy bank icon.
UserTesting was great for getting the more objective answers we were after, but for something as subjective as emotion, it wasn’t the right tool.
So, we invited a few of our Capital One colleagues to look at the animations for the first time and we captured their reactions on video.
The motion guidelines
The final step of this journey — before the ‘final-final’ step of getting the animations implemented on the app — was to create the motion guidelines.
The format chosen was a microsite, which in a near future will be part of the overarching Plastic Guidelines (more on that soon!).
Being the ‘motion guidelines’ we’re making heavy use of little animations, particularly icons.
The motion guidelines aim to give designers all the information they need to start creating animations for our apps and websites.
Making it real
The ‘final-final’ step in this journey is to actually get the animations that were created into the mobile app.
As I’m writing this post (May 2021), things are looking good and it sounds like we might start seeing some animations on the Capital One app at some point soon.
The ‘final-final-final’ step
You see where I’m going, right? It’s a never-ending process but we now have all we need to make animation an integral part of the Product Design workflow at Capital One. That doesn’t mean we’re done though. Improvements can be made, more animations can be added to our existing digital real-estate like our web-based properties. Libraries can be grown and most importantly, efforts can be made to make animation an integral part of every single project we deliver (when it serves a purpose, obviously).
On a personal level, it’s been such a privilege to be able to dedicate as much time as I have to this project. As I said in the opening paragraph of this post, I spent my entire career trying to sneak bits of animation into the projects I worked on. I finally did it!
