Our challenge
âResearch and develop what motion can add to the user experience and accessibility of the route planner pageâ
Can't wait?
Skip to the resultThe key to success
To determine whether we have succesfully designed an expantion for the design system, we came up with a factor of success. This factor of succes is a way to measure the value of the concept.
factor of succes 1
Pain points
The pain points have been resolved, therefore they have been practically tested and backed-up theoretically. We prototyped different proposals to solve the painpoints. These can be found in the prototypes down below.
factor of succes 2
Motion language
The quality of the improvements that are made is backed-up based on the established principles, guidelines and rules. The ANWB is able to continue to develop and improve their motion design language.
factor of succes 3
Resources
The design system expansion is easily transferable and easy to use for the ANWB, especially for stakeholders Coen de Heer, Chloé Rice and Sanne Kloot. That way they can decide whether they want to spend more resources on motion in their design system.
Context
During the minor User Interface and Experience Design we got the assignment to investigate and develop what motion can contribute to the user experience and accessibility of the ANWB's online visitors digital experience. For this we had to make an extension to ANWB's Design System Poncho through principles and a back these up with a substantiation.
stakeholders
Who did we work with?
During the project we worked closely with various stakeholders. The product owners played the main role. We were able to inform these product owners about the progress through presentations, slack and various video calls.
Research
During the research phase, we collected many insights through interviews with users, usability testing of the current website and a lot of desk research into (Atomic based) Design Systems (including Poncho) and motion design.
Discovery Phase
Field research
We did interviews with ANWB members and non-members to gain insights about de needs of the target group (35-year olds).
Discovery Phase
Desk research
We did research into the ANWB as brand, their website, their design system Poncho, other (atomic based) design systems and motion design.
Discovery Phase
UX-lab research
We did several usability tests with the target group to gain insights on the painpoints they experience while using ANWBâs website.
research
Our most
important insights
We displayed all of our insight on a wall by connecting them with the right elements. Check out some examples in the mockup of the Routeplanner on the right.
Concepting
Based on all the insights from the research phase, we made a first version of the motion principles. When the first version of these principles had been set up, we were able to take this as the base for drafting concepts (guidelines).
concepting
The Golden Filter of UX
To learn how to design valuable guidelines as a team, we followed a workshop by Daniel de Wit. In this workshop we used his own developed methodology. The Golden Filter of UX â(de Wit, 2019). A method where Human Centered Design combined with the Golden Filter serves as a "funnel" to create guidelines. This includes both the business and user needs.
Concept directions
By combining Jakob Nielson's 10 heuristics with the MOSCOW method, we were able to separate the most important guidelines for the project. We created two concept directions based on the insights from the research phase and the guidelines from The Golden Filter or UX.
Concept 1
Hierarchy
The information architecture and layout / - content distribution on the website does not meet users' expectations. Because we thought of concept direction 1 as a very important part of creating the optimal user experience, we did present this concept to the product owners, but we kept our focus on micro-interactions through motion.
Concept 2
Motion design
The website contains no motion through micro-interactions. As a result, the ANWB website does not meet the ultimate user experience that the ANWB wants to achieve. To explore the limits of motion through micro-interactions within this concept direction, we have drafted principle and guideline directions. Mild, playfull and nudging.
The result
We created an InVision DSM with motion principles, guidelines and rules. These are documented with a rationale and Framer based high-fi prototypes. The expansion of Design System Poncho serves as a manual for creating motion elements on the ANWB website.
design system
Principles, Guidelines & Rules
The guidelines we created are divided in three categories. These types of guidelines are meant to challenge the designers to push the boundaries.
guidelines
Blue sky
The Blue Sky guidelines are meant for elements that give the users a feeling of calmth and hierarchy and meets user expectations. For example a page that scrolls down and creates a better feeling of context.
guidelines
Sunbeam
The Sunbeam guidelines are meant for elements that give the users emotion in some form of feedback. For example an inputfield that turns red when a mistake is made. These guidelines created a big impact on emotion.
guidelines
Breezy
The Breezy guidelines are meant to nudge the users to take a certain action or to inform them about something important without bothering them. For example an alert that tells them about traffic.
The motion matrix
In order to deliver our work in a way that the ANWB can easily work with it themselves, we have created the "motion-impact matrix".
motion impact matrix
Find the matching guideline
The motion impact matrix is a matrix that shows both the impact on behavior and the impact on the emotion of micro-interactions (through motion). This matrix shows impact on emotion on the vertical axis and impact on behavior on the horizontal axis.
After it has been determined where a certain interaction should be placed in the matrix, it is possible to use "overlays" of the guidelines to determine which motion guidelines and / or rule should be applied to the interaction in question.
Prototyping
In order to test our guidelines and come up with specific rules we made as many prototypes as possible, using different tools that fitted the job to be done the best.
prototyping
Our way of work
Based on knowledge about the difference between prototyping to understand and prototyping to be understood we learned from designer Zach Johnston (Framer), we built bigger prototypes in Framer so we could test our motion principles on a âfunctionalâ routeplanner and we built simple prototypes using Principle to understand and explore multiple quick ideas.
We used GitHub for version control and quickly creating and sharing test-URLs. Sketch was our design-tool of choice because all Poncho-components already lived there.
examples
Validating the content of the motion matrix
Testing
To validate the guidelines and rules we came up with, we got the opportunity to use the ANWBâs Usability-lab and test our prototypes.
testing
Validating our work
Because testing if motion is the reason for a change in behavior, attitude and / or emotion, we tested the impact of motion using the methode A/B testing. By using this methode it was possible to discover how people responded to the current website and if there was a change in behavior when motion was added to the website. These tests are performed in the ANWBâs Usability-lab (master prototypes) and at school (mini prototypes).
