{"id":4058,"date":"2018-06-18T13:54:06","date_gmt":"2018-06-18T17:54:06","guid":{"rendered":"https:\/\/blog.mozilla.org\/ux\/?p=4058"},"modified":"2019-02-01T15:25:52","modified_gmt":"2019-02-01T20:25:52","slug":"firefox-has-a-motion-team-yes-we-do","status":"publish","type":"post","link":"https:\/\/blog.mozilla.org\/ux\/2018\/06\/firefox-has-a-motion-team-yes-we-do\/","title":{"rendered":"Firefox has a motion team?! Yes we do!"},"content":{"rendered":"

Motion may sometimes feel like an afterthought or worse yet \u201cpolish\u201d. For the release of Firefox Quantum (one of our most significant releases to date), we wanted to ensure that motion was not a second class citizen and that it would play an important role in how users perceived performance in the browser.<\/p>\n

We (Amy & Eric) make up the UX side of the \u201cmotion team\u201d for Firefox. We say this in air quotes because the motion team was essentially formed based on our shared belief that motion design is important in Firefox. With a major release planned, we thought this would be the perfect opportunity to have a team working on motion.<\/p>\n

Step 1: Make a\u00a0Sticker<\/strong><\/h4>\n

We made a sticker and started calling ourselves the motion team<\/em>.<\/p>\n

\n
\n
\n
\"\"<\/a>

We created a sticker to formalize the \u201cmotion team\u201d.<\/p><\/div>\n<\/div>\n

<\/div>\n<\/div>\n<\/figure>\n

Step 2: Audit Existing\u00a0Motions<\/h4>\n

The next plan of action was to audit the existing motions in Firefox across mobile and desktop. We documented them by taking screen recordings and highlighted the areas that needed the most attention.<\/p>\n

\n
\n
\n
\"\"<\/a>

An audit of current animations was performed and documented for Firefox on Android, iOS, and desktop to explore areas of opportunity for motion.<\/p><\/div>\n<\/div>\n<\/div>\n<\/figure>\n

<\/figure>\n

From this exercise it was clear that consistency and perceived performance were high on our list of improvements.<\/p>\n

The next step was to gather inspiration for a mood board. From there, we formed a story that would become the foundation of our motion design language.<\/p>\n

During this process, we asked ourselves:<\/p>\n

How can we make the browser feel smoother, faster and more responsive?.<\/em><\/p>\n

\n
\n
\n
\"\"<\/a>

Inspiration was collected and documented in a mood board to help guide the motion story.<\/p><\/div>\n<\/div>\n<\/div>\n<\/figure>\n

<\/figure>\n

Step 3: Defining a Motion\u00a0Story<\/h4>\n

With Photon<\/a> (Firefox\u2019s new design language) stemming from Quantum<\/a> we knew there was going to be an emphasis on speed in our story. Before starting work on any new motions, we created a motion curve to reflect this. The aim was to have a curve that would be perceived as fast yet still felt smooth and natural when applied to tabs and menu items. Motion should also be informative (i.e showing where your bookmarked item is saved, when your tab is done loading) and lastly, have personality. We defined our story based on these considerations.<\/p>\n

\n
\n
\n
\"\"<\/a>

Motion curve that was applied to menu and tab animations.<\/p><\/div>\n<\/div>\n<\/div>\n<\/figure>\n

<\/figure>\n

The motion story was presented to the rest of the UX team during a work week held in Toronto (the UX team is distributed across several countries so work weeks are planned for in-person collaboration).<\/p>\n

This was our mission statement:<\/p>\n

The motion design language in Firefox Quantum is defined by three principles: Quick, Informative and Whimsical. Following these guiding principles, we aim to achieve a cohesive, consistent, and enjoyable experience within the family of Firefox browsers.<\/p><\/blockquote>\n

Next we presented some preliminary concepts to support these principles:<\/p>\n

Quick<\/h4>\n

Animations should be fast and nimble and never keep the user waiting longer than they need to. The aim is to prioritize user perceived performance over technical benchmarks.<\/p>\n

\n
\n
\n
\"\"<\/a>

Panel and new tab animation.<\/p><\/div>\n<\/div>\n<\/div>\n<\/figure>\n

<\/figure>\n

Informative<\/h4>\n

Motion should help ease the user through the experience. It should aid the flow of actions, giving clear guidance for user orientation: spatial or temporal.<\/p>\n

\n
\n
\n
\"\"<\/a>

Left: Download icon animation indicates download progress. Right: Star icon animation shows the action of saving a bookmark and the location of the bookmark after it\u2019s saved (the library).<\/p><\/div>\n<\/div>\n<\/div>\n<\/figure>\n

<\/figure>\n

Whimsical<\/h4>\n

Even though most people would not associate whimsy with a browser, we wanted to incorporate some playful elements as part of Firefox\u2019s personality (and maybe ourselves).<\/p>\n

\n
\n
\n
\"\"<\/a>

Icon animations with some whimsy.<\/p><\/div>\n<\/div>\n<\/div>\n<\/figure>\n

<\/figure>\n

After getting feedback and buy-in from the rest of the UX team on the motion story, we were able to start working with them in applying motion to their designs.<\/p>\n

Step 4: Design\u00a0Motions<\/h4>\n

The Photon project was divided across various functional teams all focusing on different design aspects of Firefox. With motion overlapping many of these teams we started opening communication channels with each that would directly impact our work. We worked especially close with the visual\/interaction team since it didn\u2019t make sense to start motion design on components that were not yet close to complete. We had regular check-ins to set a rough ordering\/priority of when we would schedule motion work of specific components.<\/p>\n

Once we had near final visuals\/interactions, it was time to get into After Effects and start animating!<\/p>\n

\n
\n
\n