Visier provides organizations HR analytics so that they can strategically recruit, retain, and develop their workforce. But their analysts were having a hard time reporting data visualization issues to platform administrators. Currently, analysts took screenshots of the issues and emailed them to platform administrators, who would then refer to these screenshots to understand and fix the problems.
Using multiple platforms and processes to flag and report problems made the situation less than ideal. Over the next five days, we needed to build a digital prototype that combined all journeys into Visier's application.
Our team began by building a shared understanding of Visier. We verified our assumptions with Visier’s design team, and found that their system didn’t have any internal channels to support real-time communication between their analysts and platform admins. Instead, many of the users relied on external tools such as Slack or email.
We then mapped the analysts’ and the admins’ journeys to see at which points the two collided, and to better understand how we might support these interactions. Since we didn’t have access to these users, we interviewed other BrainStation students to understand their digital communication habits.
From our interviews, we found that:
Based on initial research, we knew that Visier lacked the infrastructure to support real-time collaboration between the two users. We synthesized our research and interview findings to refine our design challenge: to create an integrated system within Visier’s application to support seamless collaboration between the analysts and platform administrators.
To manage our project scope, we honed in on the analysts’ experience. At this point we had sufficient data to create Kevin, our analyst persona.
Importantly, we wanted to consider Kevin’s experience in relation to that of the platform administrators’. After all, his job as an analyst would be incomplete without seeing to completion the issues he reports - and that could only be done through close collaboration with the platform admins. This was a key consideration to keep in mind for our next step: ideation.
We first researched existing solutions and identified best practices. We did a round of crazy 8’s (1 idea/sketch per minute, for 8 minutes total), then rendered our best ideas into detailed sketches. That same afternoon we held a design critique session with Visier, and their feedback helped us identify our strongest ideas.
We drafted two key flows: submitting a ticket and resolving it. To support these tasks, we designed an in-app workspace through which Kevin can easily flag and report issues, and track them via in-app dashboard and messaging app. We then built a storyboard to visualize Kevin’s journey and build empathy with his experience.
We went straight into hi-fi designs to ensure on-time delivery. We were asked to use Clarity Design System to ensure our designs were consistent with Visier's existing UI, saving us time in designing components. In addition to supporting the design process, I wrote copies for the screens and the usability testing script.
We conducted 5 usability tests to validate:
Before: Users were confused with UI inconsistencies, such as using ‘steppers’ to indicate different pages in side navigation panel. They were also confused by use of different user image avatars.
After: Modified side navigation panel to reflect UI conventions, and streamlined avatar designs.
Before: Our participants were used to thinking of notifications as passive indicators, and were confused at the variety of designs (ie. colour, style). They wanted to know which ones they should pay attention to, and which they could safely ignore.
After: We evaluated how we were using notifications. We kept the colourful Clarity Designs compoents for self-triggered notifications, and designed a new class of notifications for system changes triggered by other users. This was designed as a simple white box to avoid being disruptive and allow passive consumption.
Before: Participants felt the size of the messaging app detracted from other elements on the page. Having to navigate to another page to preview and compare the admins' solutions was also a cumbersome process.
After: Re-designed page to improve visual hierarchy to highlight the most important actions on the page. To streamline the user flow, we overlayed platform admins’ solutions on top of the original graph.
Before: Participants felt there were sufficient feedback when they closed a ticket (checkmark beside ticket number, top right notification), but were confused that the ticket still seemed 'live'.
After: In addition to the existing feedback, closing the ticket grays out the chatbox and eliminates 'Close Ticket' CTA to emphasize that the page has been archived.
The final design combines issue reporting, tracking, and team collaboration into a seamless experience within Visier's ecosystem so that analysts such as Kevin can review and complete tasks more easily without relying on external tools. View prototype [Figma].
Working with a real client was a great learning experience, and Visier’s response to our solution was very positive.
In retrospect, we could have done two things differently. First, building paper prototypes would have gotten us to testing faster, leaving more time for considered iterations and possibly another round of testing. Second, we could have managed our scope better by focusing only on the experience of submitting a ticket - but we wanted to think of Kevin’s journey in relation to that of the admins’. Going the extra mile and designing a flow for tracking and resolving tickets helped us see Kevin’s journey in a larger context while building empathy with his day-to-day experience.