USER RESEARCH | UX DESIGN | UI DESIGN | FRONT-END DEV
ROLE - Lead UX/UI Design, Supportive Front end Development (React.js + CSS)
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)
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)
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)
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
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.
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.
Stepper Indicator - All users appreciated the stepper indicator to know where they were in the process
Question Wording - There was confusion around ‘you’ and ‘we’ in the questions
Expectations of the generator while editing and desire to have more instructions through the process
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.
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
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.