MODEL PRIVACY NOTICE (MPN) WIZARD - PRIVACY POLICY GENERATOR

USER RESEARCH | UX DESIGN | UI DESIGN | FRONT-END DEV

BACKGROUND - I worked with in a team of 4 to enter into the Privacy Policy Snapshot Challenge to create an online Model Privacy Notice (MPN) generator.

ROLE - Lead UX/UI Design, Supportive Front end Development (React.js + CSS)

IMPLEMENTATION COMPONENTS

  • PART 1 - Generated Notice - Outputs styled HTML for developers to add to their company’s website

  • PART 2 - Web app Generator - through which developers answer questions to generate a custom MPN

 

 

PART 1 - Generated Privacy Notice (Web Display)

research/IDEATION

In 2016, I worked with this team studying the length and design of privacy notices based on retention and understanding of the information. This paper:  How Short Is Too Short? Implications of Length and Framing on the Effectiveness of Privacy Notices. Due to previous research we were able to leverage this information and look at current existing notices. We had previously compared retention rates and found that icons or table format prove most affective for users to read through the options. From here I created 4 different options based on 'Fitbits' current policies to test on MTurk for success

 
 

User Testing (PRIVACY NOTICE)

  • Created 4 different designed mock MPNs using Fitbit’s privacy policy to test

  • Ran a Mechanical Turk  survey to test comprehension of Fitbit’s privacy practices

  • Each design was shown to approximately 50 participants (50 were shown no MPN)

FINDINGS/FEEDBACK

It was very well organized and clear. Easy to understand.
— Participant 2
I like how everything is broken up, not one long paragraph. The colors are appealing, not too bright & not boring
— Participant 7
  • OPTION 4 received the highest mark of preference but all found these designs as more valuable then current existing models.

  • 84% of participants found the selected design to be helpful or very helpful

  • Compared to control, the selected design increased knowledge of practices by 113%

 

 

PART 2 - MPN Generator Tool (Web App)

Web app through which developers answer questions to generate a custom MPN

research

I conducted a pattern study was created to understand the current market patterns of 10 different generator tools and long form surveys. I created a workflow diagram to designate how the process would connect users to exporting from start to finish.

 
 

Ideation

The goal of the system was to allow companies to generate their own MPN with a usable tool. We learned from our pattern study functionality was the most important aspect. I began with sketches and then created wireframes to user test.

 
 

USER TEST #1

The low fidelity wireframes seen above were utilized as a prototype and tested on 4 different developers for initial feedback.

FEEDBACK/FINDINGS

  1. Stepper Indicator - All users appreciated the stepper indicator to know where they were in the process

  2. Question Wording - There was confusion around ‘you’ and ‘we’ in the questions

  3. Expectations of the generator while editing and desire to have more instructions through the process

 
 
 

UI DESIGN

We made updates based on the feedback from User Test #1 to the verbiage of the pages, and added instructions and tips to each step of the Generator Process.

 

First step of Generator - updated with help text

 

USER TEST #2

In-person lab test with 5 web developers of different skill levels. We tested their ability to run the MPN Wizard, Generate the final Model Privacy Notice (MPN), ease of adding MPN to a test website, and ability to change the title color in the MPN to ensure clarity of CSS

FEEDBACK/FINDINGS

It felt very easy...it felt like a Google form.
— Participant 4
  • On average, it took 14 minutes to generate a MPN (after installation of dependencies)

  • Revealed confusion with presentation of questions with extended answers, questions with multiple selection options

  • Users stated that the 'help' section we included was too generic.

 
 
 

SOFTWARE IMPLEMENTATION/FINAL DESIGNS

We implemented the suggestions for the Github Readme page and Home page we were given from the test. We also customized the help text to provide information for each use case and changed the presentation of some of the extension questions.

I worked with 3 other developers who coded the generator. I helped create the CSS style guide for the designs.