Defining a road map during this time was important in order to setup a schedule for the project. Given that the project was to take 5 months starting, I devised a road map to have 5 phases that would fall within the time periods for each- Phase 1: Research, Phase 2: Define, Phase 3: Ideate, Phase 4: Hardening, Phase 5: Implementation.
The design process consisted of 5 phases that were outlined in the design road map: 1 Research and Define, 2 Ideate, 3 Harden, and 4 Implement. Within Phase 1-Research: interviews with product groups, competitor analysis, brand alignment would occur. Phase 2-Define: definition around principles, understanding what intentful design is, and a motion assessment around what motion would be baked into the system would all be answered. Phase 3-Ideate: motion foundations with specs, effects, a prototyping library, and examples would all be explored. Phase 4-Hardening: this would bring alignment with development and accessibility again to solidify the motion specs. Phase 5-Implement: would be the last phase in this versioning that would execute the motion specs into the framework.
By the end of the first phase, I created an audit that would give me insights into some of the current decisions that were implemented into the framework. I grouped my findings into three type categories: Micro Interactions, Transitions, and Loading Sequences; that way I could track any patterns that were currently instilled to understand why specific foundational decisions were made. By understanding the type categories, when conducting the audit, I could create filtering systems that would determine the foundational aspects of each type of motion to draw similarities, and make sure things were unified to help streamline the implementation process.
Micro interactions are events that have one single use case. This form of animation provides feedback to convey system statuses, supports error prevention, and communicates the brand. Examples of this can be seen through buttons, scroll bars, loading functions, and error states.
Transitional motion offers a connection between components, patterns, or whole pages. There are three types of transitional animation, on-page transitions occurring between components and patterns and page-to-page. These events are triggered by a hyperlink either anchoring somewhere on the page, to another page, or transitioning content within a component/pattern.
Hierarchal Animation is the use of motion to load a sequence in which information is presented. The most common way this is executed is with typography. The order that typography enters and exits the screen can be done sequentially.
Defining what qualifies a component/pattern to need motion was a big question that would support the objective of this project in order to answer what gets motion and what motion. In order to assess the situation, I did a workshop with the other designers to understand what those qualifying questions are and to answer if something gets motion.
Continuity in motion should create consistency within the user’s experience in relation to the flow and functionality of objects. Continuity can be seen within a single scene as well as within multiple scenes interacting with one another.
The sequential order that occurs amongst the course of a page or story line is the narrative. Motion should support the narrative and guide users through a story.
The way objects interact with one another should relate spatially, temporally, and hierarchically. Motion should react naturally as it would amongst in every day life.
Motion needs to be inclusive and accessible to all. Motion be used when opted for and shouldn’t defer a user from experiencing an output.
In order to understand how motion works, it was important to define a critical aspect of the project, the anatomy of motion. Motion is obtained by a a user triggering something that responds a specific way determined by defintion and rules. Micro interactions occur at the component level, or a single use case, and macro interactions occur at the page level, but they both have something in common- a trigger, a rule, and feedback to determine the motion and choreography of the motion.
Triggers initiate an Interaction. Triggers can be user-initiated or system initiated and can be started by scroll, load, or click, hover, or mouse enters or exits.
Rules determine what happens when the trigger is initiated and are a set of parameters that the interaction follows.
Feedback is anything that a user experiences when they initiate a trigger. For example, if a user clicks a button and something happens whatever they experience that happens is the feedback.
Loops and Modes
Loops refer to how long an animation occurs for. This includes how an object repeated and how it changes over time.
The foundation of motion can be represented by 5 areas, timing functions, durations + delays, distance, and direction. The default and alternative specs listed for each area are to be considered the ruling for the triggers determined.
The way movements enter, exit, and move around on the page are considered how things ease in movement. Since our brains aren’t trained to see things linearly, a more natural approach involves acceleration and deceleration.
Duration and Delays
Duration is how long motion takes to get from start to finish and should depend on the size of an object and the distance traveled. Delays are the time in between motion starts.
How far something moves from point A to point B is the distance that something travels. This will help to determine what is considered a macro verse micro interaction.
Direction determines how fast something moves. The farther something moves away from its starting coordinate, the faster it needs to move in order for it to still display efficiency. The longer someone waits for a motion sequence, the less attention they will be able to provide.
Predetermined effects were defined and created in order to create a cohesive and streamlined experience. Below each in tables are specs that were used to create each using foundational aspects.
Outline to Color
|ease Out – 250ms|
Color to Outline
|ease In – 300ms|
|ease Out – 600ms|
|ease In – 600ms|
|ease Out 600ms|
|ease In 600ms|
Grow and Shrink
|Scale Up 110%||ease Out 250ms|
|Scale Down 100%||ease In 250ms|
|Mask Reveal||Ease Out 300ms|
|Mask Remove||Ease In 350ms|
|Slide Left||ease In-Out 350ms|
|Slide Right||ease In-Out 350ms|