Digital ID Badge

SaaS app feature to help identify users when distributing access to sensitive financial info.
‍‍
The Client: This was part of my internship at Workiva
‍
My Role: I owned this project with manager oversight
‍
‍The Timeline: 3 week company hackathon
‍
The Team: UX, UI, PM, Dev, Project Manager

User Popover

Internship Project — Workiva — Late 2021

💢 The Project

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

💢 The Context

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

.

The Team

Project Manager — NiJay Gaines
UX Designer — Jack Rometty (Me)
UI Designer — Linda Voigt
Dev — Jim H, Rick K, Aaron F, Tony B

My Contributions

I was the sole UX designer and led UX design and user testing. I did however participate in team critiques with other designers to help inform my thinking during the process.

The Problem

It's impossible to distinguish between two users with the same (or similar) names in Workiva's web apps. Most companies using Workiva's solutions deal with sensitive financial data — mistakes may incite legal repercussions.

Research Phase

My task was to solve the duplicate user problem by implementing a user popover. As the team's UX designer, I documented the problem and implemented a user popover solution by following the tried-and-true double diamond design process.

1. User Interview & User Journey

I began by chatting qualitatively with 11 users who had experienced the trouble of sharing a document with the wrong duplicate. This step helped me contextualize the problem and understand the felt impact on users.

2. Identifying Problem Points

Scouring Workiva's web apps, I audited user selectors for the specific components that caused issues indicated in the user journey. This step benefitted technical feasibility discussions and also as an artifact for demonstrating the problem.

3. Competitor Research

Asana
‍Image (LG)
Name
Email
Title
Local
› 1-click Copy Email
› Message

Slack
Avatar (LG)
Name
Online status
Title
Local time
› Message
› Edit (me)
› Status (me)
› Call (others)

Google Calendar
Avatar (SM)
Name
Email (contact)
Availability
Title
Team
› Edit (me)
› Links to G apps

Monday.com
‍Image (SM)
Name
Online status
Local time
› 1-click Copy Email

4. Interviews & User Survey

Both research styles helped me identify which info users wanted in a popover. Qualitative interviews with six users fleshed out the list of options, and a quantitative survey of 19 users revealed preferences representative of all users. Paired with a UX Researcher, I converted the data into a list of needs, wants, and dislikes.

Key Takeaways from Research

Precise understanding of the problem: The user interviews, user journey, and audit of faulty in-app components built a strong paper trail supporting this problem's validity.

Popover Intuition: Competitor research provided intuition on the functionality users would expect to see based on what other apps they already use.

Data Wants & Needs: The Final interviews and survey identified the priority of the various data available to the user popover.

Design Phase

1. Team Collaborative Sketches

I facilitated a whole-team ideation session to explore form factors and component choices. My primary motivation was to tap into each team member's unique knowledge of Workiva's apps. This process also created team consensus around available options.

2. UX Team Critique of the Best Options

I used my weekly UX team critique slot to gather opinions from 10 UX coworkers. The motivation was coverage across all of Workiva's various web applications because my UX team includes designers across all Workiva applications and at all levels of seniority.

Deciding Interaction: Click vs. Hover

During user research, 79% of users (15/19) preferred clicking, not hovering, to open the popover. But user selector dropdowns universally already use click to select a user. I solved this problem by fragmenting the interaction.

Click as default

The default interaction throughout Workiva is a click to activate the popover and click off to dismiss.
‍

Hover on User Selector Dropdown

Also called MenuItem(), User Selectors activate and dismiss on hover to not override the expected click functionality.
‍

Key Outcomes Of Design & User Testing

Team Consensus: The whole team was on the same page about which options could be successful. This connective feeling is vital for any good team to function.

Coverage Over All Workiva Apps: Workiva has many different apps, and my UX team critique helped get ten designers from throughout the platform to inform and provide feedback on the idea.

User Validation: Reaching out to 8 users for quick validation helped lock this design in as the final version. Earlier research and this being a standard component kept the user validation and testing process short.

A Central Source Of Truth (UX Flow): The below diagram lived on our slack chat, Jira tickets, and on a shared screen on our technical discussion video calls.

Challenge: Surprise Data Constraint

The good news: Most of the data that users need (from research) is available instantly. The bad news: Everything else has a 2-6 second load time until 2022 when Workiva will finish a backend refactoring project.

Outcome: A Loading State

I added core popover data — photo, activity, display name, email — to the loading state. That would be enough to identify a user in many cases since some users only need a large profile photo to validate identity rather than the deeper dive.

Outcome: Final Artifact For Development

This is the final UX Flow that floated around the slack room and found a home on every Jira ticket. It accommodates the data loading constraint and the user selector's unique requirement for a hover interaction.

The Final Product — A Problem Solved

The final solution displays a popover that brings clarity to names appearing on screen. Companies no longer expose financial information to the wrong employee due to a lack of identifying information.

Digital ID Badge

User Popover

Internship Project — Workiva — Late 2021

💢 The Project

💢 The Context

.

The Team

My Contributions

The Problem

Research Phase

1. User Interview & User Journey

2. Identifying Problem Points

3. Competitor Research

4. Interviews & User Survey

Key Takeaways from Research

Design Phase

1. Team Collaborative Sketches

2. UX Team Critique of the Best Options

Deciding Interaction: Click vs. Hover

Key Outcomes Of Design & User Testing

Building The Thing

Challenge: Surprise Data Constraint

Outcome: A Loading State

Outcome: Final Artifact For Development

The Final Product — A Problem Solved

Presenting To Company

Select Work