Service Desk is a Microsoft tool used by their customer service experts to create, manage, and work support cases. Day to day, the tasks are very repetitive and the team at Microsoft saw an opportunity to enhance the experience using motion design.
Creative Lead – I was brought in after a lot of the UX work had been completed to explore how motion design could improve the readability and overall experience of the software. I developed multiple concepts that incorporated the new Microsoft design language, Fluent. I was later used as a Design Integrator to develop and merge our UI changes to their current application.
The requirements were to use motion design and other Fluent principles to make the Service Desk more interactive and efficient for the agent. At the start of this project, Microsoft hadn’t released Fluent yet, and it was called Project Neon. There were limited examples available, but the Microsoft crew turned me onto this video that showed the high level visual approach.
I took wireframes created prior to me starting, and translated them into Fluent design visuals and animations. I used Sketch to create the visuals, and prototyped them with Principle.
At this time much of the Fluent documentation that was available, referred to the MWF website which had been used for pretty much every modern Microsoft application to date. I often referenced this site for information on easing curves, the differences between similar components, and accessibility standards.
Enter and Exit Animations
It was apparent that after adding animations, there was a significant addition to the time it took for elements to appear. Since this was counter productive to our mission, we decided not to simply reverse the animations for clearing elements on the page.
This gave us the best of both worlds. We can make the experience more engaging and save the agent time when leaving pages. The easing curve is the same, so the experience feels cohesive.
Creating a new follow up task
Notice the final “OK” button is only visible after the action has been confirmed and completed by the server. This validation removes the question “is it okay to continue?”
Hover and Reveal
I found that motion can give certain interactions a physical feel to them. For example, elements snapping in and out on hover gave visual feedback and felt bouncy.
- I adopted principles from Fluent into a more data dense enterprise solution.
- I was able to shave seconds off of repetitive tasks that added up to major savings in operational costs.
- Developed custom code to implement the motion design into the web app.
- After proving I could code this, the Service Desk team hired my agency to implement the changes.
- Much of a customer service agents’ job is completing many repetitive tasks behind the scenes. So adding animation to these tasks would actually add time to each one. Our meetings quickly became conversations on finding the balance between “looking nice” and value added.
- Changing the application drastically in one large update would require the agents to relearn many tasks they were once very efficient with. Motion can have many implications, especially if it’s unexpected.
- I was having a hard time getting the devs on board, because there was a lot of new CSS3 stuff happening with the animations and acrylic textures. My concepts were deemed too large of an effort, so I had to show a proof of concept by coding it myself.
Key Take Aways
- It was easy to add animations to interactive elements throughout the application, but doing so actually extended repetitive tasks due to the time each animation takes. Learning why to use motion and ultimately how to use it sparingly but meaningfully.
- Reducing mere seconds to repetitive tasks, really add up across 10,000 agents. Equating to a large savings immediately.