HFID :: Design Development

Executive Summary

The aim of this phase was to turn our user observations and analysis into designs and prototypes and undergo development for one idea to move forward with. We chose to pursue three designs instead of one through the paper prototyping phase in order to establish proof of concept and gain usability feedback on the way we designed our interactions. Based on the results of our initial interviews we modified our process and refined our designs to finally settle on one to test in the final interviews. We received a great deal of usability feedback about all of our designs that we will be incorporating going forward to improve the interactions in our latest iteration.

The final prototype design we are pursuing is a new privacy page that allows users to pivot on different views of their profile as it would appear to various user groups - like Friends Only, Friends of Friends, etc. From each view they can select/deselect permissions to view individual elements, and custom views can be created for 'exceptions' like friend lists or specific individuals that the user adds.

Idea Development


We did a fair amount of brainstorming of concepts that could push privacy on Facebook forward, as well as the common tasks and edge case tasks that might be relevant to test them for in order to make sure they are worthwhile replacements.

(1) Initial brainstorm of potential design ideas to storyboard. (2) Brainstorm of common tasks performed by individuals on Facebook related to privacy. (3) Brainstorm of potential privacy edge cases to test for so that users are still able to complete them under new models, even if they are not mainstream.


For the next phase of this assignment, we decided to go forward with storyboards for a number of concepts, and ultimately narrowed this down to three. We did develop some additional smaller ideas that could contribute to an overall interaction here as well, but we tried to remain focused on large distinct concepts.

'Print Preview' Mode

(1) Profile building blocks can be dragged on to a live preview of the user's profile. (2) The "Only Me" mode allows you to see all the profile blocks that have not been allocated to any other of the privacy profiles. (3/4) Hovering over an item in the preview allows you to remove it from the current privacy profile or to further customize its privacy settings.

Problem: The outcomes of adjustments to Facebook privacy settings are not transparently or clearly communicated to users. This limits their confidence in the network's privacy system as a whole.

Example: Walled-Garden Wally wants to see what his profile looks like for friends of friends on his networks, and wants to make sure that individuals cannot see the picture albums of his children.

Solution: Provide an adjustable preview of your profile from the perspective of different privacy groups (everyone, friends-of-friends, friends only etc.) on Facebook. This storyboard was inspired by the function of print previews, which provide a high-level overview of what the page you are about to print is going to look like, based on settings and adjustments you have tweaked in the print dialog box. The storyboard starts with the selection of privacy group, network or individual to adjust privacy settings for, in the middle column title "Manage Settings". Individual "building-blocks" of your profile, including biographical information and photos, can be dragged from this this column into the live preview of the profile to give a clear overview of how different people are going to your profile. The dragging interaction is a key aspect of this idea, as it gives the user a notion of constructing his/her profile. Individual elements in the preview can be hovered over to remove them from this privacy group's view of your profile or to further customize their privacy settings. By using building blocks to construct the individual privacy profiles, the user is given a clear visualization of which information has been placed on and off the profile.

This interface would still be accessed from a dedicated Privacy settings page separate from your live profile. The current proposal suggests providing an abstract building block level view of your profile in the "Preview Settings" column. The model can easily be adapted, however, to provide a live preview of your actual profile.

Live Editing Mode

Problem: Users have no way of visualizing what content they are controlling privacy settings for.

Example: Ricardo doesn't understand what "Likes & Interests" he has in his profile.

Solution: Place the privacy controls interface into the same stream as your profile. Facebook has gradually integrated many functions of the site into the common front page news feed concept, so moving privacy editing into the profile view is not unheard of. We propose adding a privacy control edit button [perhaps a lock icon next to your name] to the profile, which allows you to move through it and edit privacy settings for individual elements visually, and exposes the settings control next to the actual content it is changing. As an extension, the entirety of privacy settings - including directory information and things that might not appear on a profile - can also be moved here perhaps as a top bar.

Dual Profiles

Problem: Users are often confused by the complex privacy interactions presently offered by Facebook.

Example: Careful Claudia is concerned about images of her college life being publicly available to future employers.

Solution: Redesign the privacy paradigm such that users have two profiles: one public, and one private. Users also configure who can see the private profile and who can see the public profile. All content then has four privacy options: not visible, visible on public profile, visible on private profile, or both. This simpler division of categories makes subsequent privacy decisions (e.g. how should an album be shared?) much easier for the user. Additionally, the simplicity of these two divided profiles will hopefully inspire confidence in the user interface.


We started this process with five different storyboards and narrowed these to three very different prototypes. After discussing and briefly testing our three prototypes, we realized two of the prototypes ("Privacy Profile Builder" and "Live Privacy Editing Mode") were addressing the same issue in slightly different ways. We merged these two prototypes into the "Privacy Constructor" and narrowed down to one prototype by the end of the process.

Dual Profiles

(1) Prototype of the Dual Profile concept. Users interacted with this by dragging and dropping profile elements from a sample profile (2) onto their separated profiles.

In this prototype privacy settings are drastically overhauled by giving users the ability to create two profiles and control the privacy visibility for each profile individually, as well as what content belongs in which individually. This allows them a simplified version of list control by giving users access to either of their profiles, and when editing on the fly, they can assign content to one or the other. Despite impairing some functionality, this gives users power to easily understand the complexity [or lack of complexity] involved in their settings. This prototype wanted to address the problem that many users felt they could not grasp their settings and implications within the current framework.

In this prototype, the two profiles are labeled "Public" and "Private". We expected users to share the "Public" profile with either "Everyone" or "Friends of Friends" while the "Private" profile would be shared with "Friends" or even a smaller group. We anticipated this separation to be particularly useful for users that needed to distinguish between their personal and professional lives.

Privacy Profile Builder

Prototype of the Privacy Profile Builder concept (1). Users again used the profile elements from the sample profile to drag and drop elements onto their profiles for each pivot view.

This prototype revolves around a staged process that lets users go through the different privacy levels that currently exist - Everyone, Friends of Friends, Friends Only, etc - and build their profiles for each of them through a drag and drop process. Placing the blocks on a simplified preview of their profile gives them great confidence in what they are creating, and to facilitate silver bullet exceptions, additional pivot views can be created for people, lists, or networks. In this way users can specifically control what of their content [while viewing what it is] is shown to which groups of users and get live feedback showing the full implications of their actions.

This prototype addresses the issue that users do not have a good way of previewing their privacy settings, and does this by pivoting by user type and then displaying content for the user to control access to.

Live Privacy Editing Mode

Prototype of the Live Privacy Editing Mode (1). These clear plastic pieces were used in conjunction with small paper dropdown menus placed on top of the previously built sample profile page (2) to allow users to virtually hover over and select different content on their profiles to edit privacy settings for. The lock pieces (3) were used to represent settings at various points in the prototype.

Live Privacy Editing takes the existing privacy controls for individual elements, but aims to solve the fact that users can't visualize what specific they're sharing when editing privacy. It allows them to enter privacy editing mode while viewing their profile, and then hover over specific elements to expose what the settings presently are and to change them as they like - again, while being able to see their own content they are controlling privacy for.

This prototype also addressed the problem of users not being able to preview their privacy settings and see what content they had on Facebook in certain categories, but it pivots by each content block and then allows users to select who is able to view that block. It is very close to the existing model - it just moves the settings to live on top of a live view of the profile page.

Privacy Constructor

(1) Prototype of the final Privacy Constructor. This prototype worked by allowing them to touch specific content to enable or disable it for a specific pivot view of their profile. We used dotted line and solid borders to represent not selected and selected. Better examples of these widgets can be seen in (2).

This last prototype merged "Privacy Profile Builder" and "Live Privacy Editing Mode". This prototype allowed a user to click each profile element to select whether it is visible to a specific group. This change was indicated by a change in opacity of the profile element. Again, users were presented with current privacy levels. Users could additionally create custom privacy levels based on networks and individuals. The ease of pivoting around each privacy level was intended to make this interface compelling.

The merged concept moves the preview of the Live Editing Mode into the Privacy Profile Builder, and uses simple on/off toggles instead of dragging and dropping. As such, it continues to attack the idea that users have a difficult time previewing their content, but addresses privacy exclusions a little bit better - which was another point of contention for users. It continues the concept of pivoting by viewer and controlling access to content from there.

Testing Method


Our selection of participants was largely centered on finding a set of individuals who would provide a range of feedback to our dual profile prototype. Investigating how users reacted to this potentially large paradigm shift was an important task in addition to developing our design. We specifically sought some participants that closely aligned with the Walled-Garden Wally and Disseminator Dan personas, as we anticipated the strongest reactions from them - both in favor and against.

After ensuring those personas were covered, we tried to pursue a broad range of other participants, but limited time slightly restricted us. Our last two interviewees were closer to Careful Claudia, and a combination of Careful Claudia and Walled-Garden Wally. We also sought external consultation from other users on our designs, albeit without full prototyping interviews.

Overall, we had a wide range of ages, frequency of use, and technical knowledge represented amongst our users, and we feel fairly confident they represents who we are designing for.

Task Scenarios

We created five different tasks to test our prototypes, which were based upon common interactions on facebook involving privacy (refer to the appendices for greater detail into the tasks - user prompts, instructor notes, expectations, and evaluation criteria.) For example, tasks B-II and C ask the user to restrict visibility of his or her profile from certain groups and individuals; task D asks the user to restrict the privacy of a photo album, and etc. These tests allow us to check that our prototypes still allow users to complete core privacy related tasks, even if they have feedback on how well they accomplished those tasks.

Additionally, our tests were designed around our prototypes themselves and tested aspects of the interface we hoped to improve. For example, the Dual Profiles prototype was intended to instill confidence in our users about their understanding of their privacy settings, and we followed up with them on how they felt about the actions they had just taken during our interviews. These tests were a critical sanity check of whether we were actually making improvements on an ideological level.

Procedure to Test Plan

The above flow chart documents our initial test plan. Our first test - having the user separate their profile into a public and a private view - was intended to examine whether users would be able to easily divide their pre-existing content between just two categories and how they would choose visibility for each. This exercise set the stage for further interactions using the "Dual Profile" prototype to try to complete all of our tasks. If the user rejected this paradigm or did not comprehend it, we would generally switch to the "Profile Constructor" prototype to optimize our time spent testing for as much usability data as possible, rather than proof of concept. We always revisited the other prototype to find out which elements or interactions were so difficult or contentious to the user. As time went on, we modified our test plan to make sure we ran through all of our main tasks with both of our prototypes to get the most usability data from our users.

Test Measures

The specific test measures varied between tasks and evaluation criteria for each is outlined in the appendices under the user test script. Because we explored fundamentally different prototypes during our initial tests, we looked at mostly qualitative measures rather than quantitative measures. Overall, we were primarily looking for users to comprehend the various interface designs we presented. If users understood the interfaces with little to no explanation, we viewed them desirably. Additionally, we valued times when the assumptions users made were consistent with the designed behavior of the website. User confusion and objections to any privacy model were viewed undesirably. We also looked mostly qualitatively at the time it took users to comprehend models or operate tasks within them, and how confident they seemed to be in doing so and by the end. The number of fumbles or failed approaches when trying to accomplish a task was also viewed negatively.

Test Results

Dual Profile Model

The dual profile prototype was our most controversial system, receiving both very positive and very negative feedback. When speaking with our first user in the phase, Gustavo, (without using the paper prototypes as we hadn't completed them) he expressed doubts about a possible loss of functionality using the system; they would have to sort all of their content into two profiles with the entirety of each profile visible to the group of people they assigned it to. In response, we added to the prototype the Profile Constructor's ability to "silver bullet" (see section below), restrict a single type of content from a specific user. Similarly, in our tests with Nico and Helena, we received somewhat negative feedback about the prototype: both were confused with the utility of the system. Nico, specifically, did not investigate the custom option for selecting who could see his profiles, and set the two up nearly identically, removing the possible value of the prototype to customizing his privacy. On the other hand, Salvador felt extremely positive about the possibility of having two distinct profiles, saying, "My public profile is like my resume, which I couldn't really use Facebook for before." In our final user test, with Ricardo, we received positive feedback on the concept of dual profiles, particularly its confidence-inspiring qualities, although he felt that three or more profiles would better fit his needs.

Profile Constructor

In our first interview with Nico, we received very clear positive feedback about certain aspects of the original privacy profile builder and the live privacy editing mode prototypes. For the profile builder, he was primarily excited about the interaction of constructing a profile and about the general structure of the system. He identified the live editing mode as his favorite system, however, as it allowed for rapid adjustments of privacy settings, presented in the context of his profile. His main criticism of this system was that, unlike the privacy profile builder, it did not provide previews of how different people and groups see your profile. Based on this feedback, we immediately realized that there was an opportunity to combine the positive features of each system, leading to the creation of the privacy constructor. We refined this new idea together with Nico and constructed a new prototype that was used for testing in the subsequent interviews.

One thing that the majority of our users agreed on were the clear benefits that this system presented for restricting privacy settings for a single or small group of individuals. We referred to this as "Silver-Bulleting" in the interviews and heard from our users that this would be one of the most important/frequent interactions relating to privacy on Facebook. The fact that the system would allow for easily adding a privacy profile for a selected individual, giving an immediate preview of how this individual would see your profile, was seen as very beneficial.

Usability & Interactions Feedback

The handling of privacy exceptions represented one of the main interaction limitations in the dual-profile model. Many users did not like the fact that the only feedback they would receive when silver-bulleting someone would be a little lock icon on the profile element they had restricted. The interface lacked a clear way to show which individuals had been restricted from which information. Another big concern to us is that many users relied heavily on the list functionality when we presented them with the task to restrict different types of information from different groups of friends, like family and co-workers. We discovered in the last phase that the majority of users do not use this feature.

We explained to users that individual profile-elements could be dragged on to live previews to "construct" profiles with different visibility settings.

We received very positive feedback on the interactions of dragging profile elements on to a live preview and clicking on individual elements to toggle their visibility. Both of these interactions made sense in the context of "constructing" privacy profiles, which our users said would make them feel more confident about their privacy settings. Clicking to toggle visibility was seen as a slightly less cumbersome interaction, however, and is the model we have decided to move forward with.

Our users revealed a number of issues related to handle photo privacy settings, which we repeatedly heard was one of the most important areas of privacy to address on Facebook. We quickly found that our prototypes did not provide all the photo privacy functionality that users were concerned about, including settings for individual albums, special handling of the Profile Pictures album, settings relating to the visibility of tagged photos to others and more.

The left side bar of the Privacy Constructor that shows the different pivots that can be used to view one's profile from while editing. A number of users had confusion with the wording on here, and over how settings override each other in the event of conflicts.

Another point of confusion was the current labels used to describe different groups on Facebook (see image above). In particular, many of our users were unclear what "Everyone" meant in the context of Facebook, with one of our users explaining that he constructed his public profile with information that he wouldn't mind anyone on the internet seeing. In addition, we were asked a lot about how the hierarchy of settings would work; if I had friends represented in different groups like "Friends of Friends" and a particular network, which setting would override the other?

The paper prototype used to represent the directory settings dialog for that specific task.

In addition, users were confused by the role of directory-level settings and how these integrated with the settings they had manually adjusted on their profiles. When presented with these options, most users realized that they heavily overlapped with their other privacy settings, which showed us that they had understood our prototypes. We were also told that the few settings which did not overlap with other privacy settings, like search-ability settings, should somehow be represented in the core privacy settings interface and not hidden in an extra dialog box.


What We Learned

User response to our designs was mixed. Remarkably, there was some disagreement even within users who we felt were represented by the same persona. Although we tested multiple prototypes, hoping for our users to select between our models, we did not find a universal preference for any one system. The profile constructor and live editing mode combination, did appear to be most compatible with all of our users, however, and was appreciated by most for its holistic, easy-to-understand interface. As such, we have decided to move forward with this concept for the subsequent design phases.

The dual-profile model worked well for those users who had a clear natural separation of private and public identities in their everyday lives. For example, college students clearly understand the different types of information they are willing to share with friends and professors. When trying to address more detailed tweaking of privacy settings like silver-bulleting, however, the interactions, interface and overall user experience of this system became cluttered. Common use-scenarios like separating information shared with friends, family and colleagues were difficult to solve with the dual-profile model. Furthermore, the model provided users with a very limited overview of the detailed settings that had been adjusted; the "lock" icon, which was displayed on a profile-element with custom privacy settings, did not communicate to the user what these custom settings were.

Changes/Additions/Improvements Moving Forward

Below is a list of some of the features we plan to address and add to the profile constructor model. This list was generated based off our learnings from this assignment.

Prompts, guidance and information

We will address in more detail where to place instructional information for the user, including explanations of the click-to-toggle-visibility interaction for profile elements.

Directory settings

Based on the negative feedback we heard regarding the current directory settings, we will work on figuring out ways to represent these settings in the primary privacy settings interface.

Toggling visibility of profile elements

As this is one of the core interactions of our system we will work to refine exactly how the toggled visibility settings are presented to the user. Based on user feedback, we have decided to have these settings adjusted by clicking each profile element, instead of dragging it on to a canvas.

Photo privacy

Photo privacy is a somewhat complex but important aspect of Facebook privacy settings. We are currently thinking about a number of ways to tackle these and have considered housing all photo-related settings into a single location in the privacy settings interface.

Creating groups of exceptions

One popular feature of our proposed interface was the ability to easily manage silver-bulleted individuals and to specifically view your profile from their perspective. We received quite a bit of feedback requesting that this feature be extended to groups of people. This presents a number of possible issues related to overlapping settings (e.g. for a person represented in two groups). We are currently planning to make use of prompts warning the user that conflicting settings might occur and guiding them through possible solutions.


We will strongly re-consider the current labeling used in our prototype, which is based off the existing Facebook labeling. Confusing labels like "Everyone" will be avoided and will instead be split into "Anyone on Facebook" and "Everyone on the Internet."


Some of users expressed concerns over the time it would take to configure our two proposed systems. We will consider a number of ways to minimize the configuration time, for example, by activating/deactivating profile elements based on your current settings or on recommended settings in the case of the out-of-box-experience (OOBE).

What the evaluation could not tell us

Although we received a lot of good feedback from our different prototypes, there are some interactions and concepts we were not able to test. This was partially due to limitations in our prototypes and methods, in addition to general limitations of paper prototyping. We also felt that we would have benefited from running through the initial and modified prototypes together as a team; we generally only managed to do this in pairs before some of our interviews.

The prototypes and testing methods did not give us a lot of information on how our proposed systems would interface with existing privacy settings. Most of our tasks were performed as if the user was constructing his/her profile for the first time. We believe that our system is adaptable to both the OOBE and to existing Facebook users; however, we will have to work on adapting the system to the latter case.

Some detailed design elements of the interface could not be tested due to limitations of paper prototyping. For instance, the fading in and out of profile elements to display their state of visibility is a key aspect of our interaction model and will need to be tested and tweaked in the upcoming detailed design phases.


  • The user test script includes a description of the tasks we gave each user and the instructor notes for each task.
  • The interview notes include raw, minimally-edited notes from each of our user interviews.
  • Click here to download a full set of images showing our three different prototypes. These images are not organized logically, however. They serve as a reference rather than a utility.
  • The Informed Consent Form is an explanation of our project that we give to users during the interview so they are aware of what the process and their rights in it are.


The tasks for this assignment were split in the following way. We would like to mention that not feel this table accurately represents the true amount of work done by each member, as some tasks required more work than others.

Brainstorming and Storyboarding2020202020
Prototype Construction17.5102517.530
User Testing1515202525
Deliverable Writing2020202020
Website Execution33.30033.333.3