Motion
Products should be personal and approachable.
Motion is a great way to breathe life into an experience to make it more memorable and engaging.
Remove a user from an assignment
In Percipio, administrators or team managers can create assignments and may later want to remove an individual user from that assignment.
This is an example of how to communicate that the user has successfully removed an individual from an assignment without using a toast or another more obtrusive method of feedback.
Filter by custom date range
Administrators can view detailed reports about what their learners are doing in Percipio. In most cases, admins will want to apply filters to the dashboards to narrow their focus.
In this example, an administrator can change the scope of their data by pre-defined ranges, or they can choose a custom date range.
Display corporate use policy
Administrators will want their users to accept a corporate use policy. The obvious solution was to display a modal on the homepage after the user logs in because until they log in, we don’t have a username to validate against. However, if the user were to not accept the policy they would get kicked back out to the login screen.
What this design achieves is a more subtle way to solve the problem. When the user logs in, we use their username as a point to validate against.
If they need to accept the policy the login window expands and displays the policy. This means that the user won’t be bounced back and forth between the home page and login screen.
Multi-step workflow toolbar
In Percipio, multi-step workflows use a toolbar that is pinned to the bottom of the browser window. This toolbar has all of the workflow actions available to the user, including commonly used actions like save and preview.
Shortly after we rolled this out, we received some feedback saying that the toolbar was difficult to see.
Instead of going back to the drawing board and redesigning the toolbar, I suggested animating the toolbar up from the bottom of the window after the rest of the page has loaded.
Percipio Chrome extension
Our Chrome extension presented a few interesting opportunities to add motion.
Like the main app, the Percipio Chrome extension also needed to support displaying a corporate use policy. Given the smaller window, the policy is presented using a full-screen modal that slides up from the bottom.
Since the Chrome extension is in a small window and designed for lightweight interaction, many of its design patterns skew more mobile than desktop.
For this reason, switching languages is handled by a bottom sheet as opposed to the dropdown menu used on desktop.
Two-step log in
Percipio allows site admins to configure their instance based on several variables. The log in and onboarding experiences are defined by this configuration.
For this reason, not all users will have a password to use while logging in.
When a user types in their username or email address we’re able to determine their onboarding, login, and password recovery paths.
These projects and all associated designs and process artifacts are owned by their respective companies. The parts of the projects that I can share publicly are limited — shown on this page are select pieces of overall projects.