I led the UX design for the Data Subject Request within OneTrust, and a module helping marketers and privacy officers manage consumer preferences (such as web cookies and consent) and information requests. The new feature is currently implemented and received numerous positive feedback from the clients.

This was my first big project in OneTrust. Through the project, I have experimented and received these key achievements:

First large scale user research in OneTrust

I experimented a mix of user research and usability testing for the new version of the web forms. This helped tremendously in establishing our starting point for MVP and also iterations for enhancements. 

Established a design process

This was the first time the Data Subject Request module (DSAR) has a full time UX designer. I established a design process involving product owners, devs and technical writers and external clients for feedback and iterations. 

Before kicking off the design sprint, I launched a series of usability sessions with external clients and internal professional services officers. The idea was to collect feedback as much as possible.  The research plan consists of a few pieces: 

• CAB (client advisory board) meetings: we scheduled a spot in the monthly client meetings to ask the usual use cases of the web forms and their current pain points. The CAB meeting was efficient because we could meet a collection of European and North American clients in a condensed period of time.
  • What we collected: We received a high level use cases and pain points from the clients. Since these are first hand information, it helped me shaped the overall directions of the new design.
  • What was missing: However because of the time limits, we did not gather enough details. 

• Internal usability sessions: following the CAB meeting, I arranged two sessions with new interns and hires with the think out loud sessions on web forms. Ideally I hoped to have these sessions with clients from the CAB meeting. However because of the time limitation, we switched to new hires.
  • What we collected: we collected a detailed report of usability issues in all aspects of the web form. And we prioritized the issues related to the use cases and pain points mentioned in the CAB meetings. Other issues will be in blacklog and we plan to visit in future sprints. 

With these usability testings, we gathered the following feedback:

Usability Testing

In september, we luckily had a bunch of Fall semester interns coming in. We recruited around 10 of them to use the DSAR web form and they provided very valuable feedback. 

The procedure of  the usability testing is simple. We had two sessions of the usability testing session, and each session had around 5 participants. We showed the testers a sample of a web form, and asked them to replicate the web form in their own account. While recording the screen to understand their behaviors, we also had an open discussion and a web form for them to fill out any confusions or suggestions.  

And we received feedback in mainly four categories as follows:

Since this is a complete revamp of the web form feature, we want to understand the current market landscape. A few questions we want to answer in this step is as follows:

1. What are our competitors doing currently?

2. What are the current trends in web form building and branding?

3. What are our SWOT?

Through the market research, we got to understand our strength and opportunity in the market, and helped us prioritized the MVP features for designs and implementations. 

Stemming from the previous user research, we have identified a few personas specifically for this new feature. These are people who interact most frequently with web form building and maintenance, and they also have a few use cases that we need to take into account. 

And based on the personas and use cases, I narrowed down the following features to include in the MVP.

Feature One: Dynamic Web Form (Coming from user research and usability sessions) 

• Enable customers to ask questions during the request intake process based on the type of request and type of subject.
• Enable customers to systematically ask follow up questions during request intake, especially for data deletion and access requests to scope down the request. 
• Enable customers to show dynamic notifications and warnings if a consumer is about request a data deletion. 

Feature Two: Translations for Web Form (Coming from market research)

• Create flows for translators to come in and translate web forms when they are ready to publish. 

Feature Three: Dynamic branding (Coming from user research)

• Web forms can be assigned to branding templates, or at least have their own branding styles. 

Once we flushed out design priorities and directions, I started stacking up wireframes for initial feedback. I decided the directions of the new forms to be: interactive, inline editing and flexible branding. 

I have made a few design considerations: 

1. The editing space will have minimum components. The user will have maximum screen real estate for form builder. This helps concentration and focus.

2. The web form will have two panes: one for builder and one for adding form logic. Here we made the assumption that users want to have the flexibility to switching from question builder to adding logic to questions. But we were open to test it out in the following usability sessions. 

3. All editings will be inline – no more unnecessary sidebars. 

In order to test our design assumptions and wireframes, we conducted brieft guerilla usability testings internally with PSO, who are at the frontlines of interacting with clients. They provided feedback as well as collecting feedback from clients. 

Feedback #1:

I did not put as much thought as I should in the welcome section and thank you page. These two pages are not only branding heavy, but also are always present at first sight for the users. With these being said though, they were not always needed for the clients. 

Related Questions for Iteration:

• How to show/hide welcome page and thank you page in the current design pattern?
• How to apply branding to these pages? 

Feedback #2:

What about upload CSS files for branding?

Related Questions for Iteration:

• Where to put css upload? Is it in the branding tab? Or as a sidebar?

With these feedbacks, I embarked on creating the high fidelity prototypes. My design emphasis is to provide branding tab, a brand new welcome and thank you page, as well as enhancing the inline editing features.  

Editing a Web Form

Click on the prototype below to view the final designs.