Visier_Hero_web_tiny

Visier

Bringing together different tools into Visier to ease issue reporting, tracking, and team collaboration

Project: BrainStation x Visier Design Sprint

Role: Research, user flow, UX writing, usability testing, UI design

Tools: InVision, Figma

Timeline: 5 days

Visier_i1_tiny
Visier_i2_tiny

01. Problem

DIVIDED WORKFLOW

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.

02. Process

UNDERSTANDING THE PROBLEM SPACE

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.

EXTRACTING INSIGHTS

From our interviews, we found that:

  • People want the ability to communicate whenever and wherever, and they want to organize digital content without much thinking or effort 
  • It’s frustrating when UI is too complex or when there are too many features - especially when the features they want are hard to find. When this happens, they leave the app 
  • People prefer familiarity over complexity; they tend to stay with apps they know because they can’t figure out how to do what they want in new apps

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.

PLANNING WITH HUMAN-CENTERED DESIGN

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.

Visier_Persona

IDEATION & USER FLOW

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.

Visier_p1
Visier_p2
Visier_t1
Visier_t2

PROTOTYPING

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. 

03. Validation

USABILITY TESTING

We conducted 5 usability tests to validate:

  • Can users submit a ticket and track them to completion? 
  • Is the flow intuitive to users?
  • Is the information presented sufficient to build understanding of possible actions?

CONSISTENT UI STANDARDS

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.

Visier_ut1

PURPOSEFUL NOTIFICATIONS

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.

Visier_ut2

VISUAL HIERARCHY AIDS USER FLOW

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.

Visier_ut3

VISIBILITY OF SYSTEM STATUS

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.

Visier_ut4

04. Solution

ALL IN ONE PLACE

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].

Visier_hfm

05. Evaluation

LEARNINGS & TAKEAWAYS

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.

And of course, a huge thanks to my awesome teammates⚡ Be sure to check out their work: Nikki Chan, Irene Choi, and Paul Wang!