Impact
Achieved alignment on the product direction and received positive feedback on the design approach from both internal stakeholders and members of a Customer Advisory Board.
Developed a responsive and scalable design library to be used by other SaaS B2B applications at OneTrust.
Enhanced existing components and created new ones to address the needs of end-users reporting ethical concerns.
Enhanced existing components and created new ones to address the needs of end-users reporting ethical concerns.
Overview
The formation of an intuitive way for end users to report ethical concerns.
ROLE
• UX Designer at OneTrust
ROLE
• UX Designer at OneTrust
ROLE
• 4 months
• 4 months
TEAM
• 1 UX Director
• 2 UX Designers
• 1 Senior UX Researcher
• 4 Product Managers
• 1 Front-end Engineering Lead
• 1 Back-end Engineering Lead
• 2 Architecture Engineers
• 1 UX Director
• 2 UX Designers
• 1 Senior UX Researcher
• 4 Product Managers
• 1 Front-end Engineering Lead
• 1 Back-end Engineering Lead
• 2 Architecture Engineers
PLATFORM
• B2B Web Application
• B2B Web Application
TOOL
• Figma
• Figma
The problem
Employees of OneTrust’s customers need a way to report ethical concerns (also known as whistleblowing) or inquire about them.
• These users, known as reporters, need to be able to report safely, quickly, and securely
• Reporting an unethical situation can often be time-sensitive, fear-inducing, or even dangerous
• Ethical concerns can include smaller issues such as miscommunications, or can be more serious such as money laundering, misconduct, or abuse
“It takes courage for a reporter to raise their hand and tell their story. Making the process as simple as possible will help."
- Ethics Customer Advisory Board member
- Ethics Customer Advisory Board member
Research process methods
With research, I determined the solution needed to be...
Welcoming
• Users need to be reassured that this is a safe and open space for them to express ethical concerns
• They may be afraid of employer retaliation – this process should aim to reduce that fear or similar emotions
Intuitive
• Users need a process that is easy to use, so they can quickly go through each step
• They might only have a few minutes to report and cannot afford to get lost or encounter complexity
Responsive
• Users may want to access this application while on a mobile device or tablet, perhaps away from their office
• These users are unlike typical admin users of other OneTrust applications and need a different experience
Design ideation
Collaborative brainstorming
I led a number of sessions discussing "how might we" statements on a shared FigJam board with designers, product managers, and engineers.
Design inspiration examples
I looked at a variety of other applications and solutions that utilize step-by-step processes with interfaces that are easy to use and straightforward.
Wireframes
The earliest concepts were focused on a chat-type experience, where a reporter is having a mock conversation to guide them through their experience.
Exploration: Material Design
OneTrust's Design System is tailored towards admin users who work in their applications frequently, I determined that most of these components would not be suitable for Speak Up. I explored using Material Design due to its ease of use and structured documentation.
After conversations with Engineering and Architecture leads, we determined this was not a suitable path forward due to:
• A lack of scalability: future updates would have to be made to both component sets
• Limited customization capability: a major customer need is the ability for these screens to match their branding
The need for new components
Conversations with Product, Engineering, and Architecture led to a new need: a design library within OneTrust's custom Design System to be built within Webforms. Made to fit the needs of reporters in Speak Up, it included:
• Enhancements: to ensure a B2C look and feel within a B2B design system (including customer customization capabilities)
• New Speak Up Components: to solve user needs not accounted for in the original Design System
• New Responsive Definition: certain components, such as modals needed responsive documentation defined
Primary/secondary button enhancements include larger text and customizable radii to ensure higher affordance for navigation.
Form field enhancements include larger text size, more padding, and customizable corner radii to ensure a B2C feel.
The sizing and breakpoints for the updated modal component, which was originally not responsive.
I created a new card button to add an indistinguishably clear affordance when users choose answers throughout the flow. I also included an option for customers to add help text within the button to provide guidance to users.
The complete set of components created for the new design library including variables.
Interactive prototype
Outcomes
I was active in presenting to and discussing design direction with key customers, part of the OneTrust Ethics Customer Advisory board. Key takeaways included:
• Ethics & Compliance teams want to deliver a good customer experience. Having the flexibility to customize the intake form is critical to our customers. Both aligned with the flow and components I presented.
• AI is of great interest to streamline intake, triage, and escalation of reports along with having robust location functionality for reporters to show where they are/where the incident happened. I advocated executing further AI exploration after the initial release/more customer feedback. Unfortunately, I was moved off of this project before that happened.
Leadership and project balancing:
Leadership and project balancing:
• I led meetings and workshops – multiple times a week – with 4 separate Product Managers, UX Designers, and Engineers while researching, designing, and iterating on these screens for the Speak Up flow
• I balanced Speak Up work effectively while also leading design efforts for another OneTrust Ethics B2B product, Disclosures Management, working on the Disclosure Approval Experience.
