HFID :: Final Design

Problem Statement and Solution Overview

Ask most users of Facebook what confuses or upsets them most about the immensely popular social network, and they are likely to answer, "Privacy". Despite many previous revisions of the interfaces surrounding privacy, Facebook still neglects certain parts of this ecosystem. Users are left with no common way of visualizing all of their privacy settings across different aspects of the site at once. Many settings are placed deep within the interaction flow, and there is a general lack of integration of privacy into the overall Facebook experience. Users have difficulty translating their expectations of privacy developed in the real world into the system and are frequently confused by what things mean. The problem is by no means a simple one when considering Facebook's diverse collection of over 500 million users, all with varying perceptions and priorities in privacy, often driven by their various cultures.

Although Facebook provides means for users to control their privacy, the lack of confidence and understanding of privacy settings indicates that it is an area ripe for interaction redesign. Additionally, Facebook is important to its users' lives, often forming a major part of their social community, so it is imperative that any interactions within the system be simple and usable. By exposing the current settings in meaningful ways according to user expectations, we can vastly improve the user experience for an increasingly large part of the world population.

Personas and Scenarios

After interviewing approximately a dozen individuals, we developed four personas as our first primary design tool.

Disseminator Dan

"I like to keep score. My number of notifications let's me know how good I'm doing."

Dan is a young professional who loves social interaction. He likes to meet new people and loves engaging conversations. Dan sees Facebook as a medium for these conversations and communication. As such, he uses Facebook as if it was a public forum. Dan doesn't care who he friends on Facebook (as long as he actually knows who that person is). He provides basic contact information to these individuals as a convenience, but without the expectation that the information will be used.

Although he uses Facebook to disseminate information, Dan is very restrictive about what he posts. He doesn't post personal aspects of his life as he knows someone could easily re-share what he posted. In this way, Dan maintains a profile that is personal but not unprofessional. Additionally, he doesn't just dump content (e.g. photos, video) for others to consume. Dan selects what he wants to share based upon whether this content is relevant to other people. Dan knows that if someone sees a picture or video and thinks it is interesting then the seed for conversation has been planted.

Dan doesn't worry much about his privacy settings. He set them to what he viewed as reasonable defaults (“Friends” or “Friends of Friends”) for most items, but prevents sensitive information from reaching the internet in the first place.

See Dan's Values, Needs, and Desires

View Disseminator Dan's Profile

Careful Claudia

"I want to block businesses and colleges from seeing my personal life."

Claudia is 21-years old and is in her third year at college. She enjoys taking pictures, hiking and travelling in her spare time and wont spend a weekend without paying a visit to one of her favorite bars or clubs in Boston. Her friends see her as incredibly smart and she is always happy to help them out with homework and technology-related questions. Since joining Facebook three years ago, she has found it to be a great tool for keeping in touch with friends from both high school and college. She mainly uses her profile to share her pictures and life experiences and to share interesting links and information with her friends. She has restricted her privacy settings to allow only friends to view her profile, but is still conscious about the information she posts. She would like to see more transparency in the privacy settings and also wants better control over the content she shares with individual groups in her friends list. In addition, she would also like a better way to manage privacy settings for new friend requests, which she receives on a regular basis. She has untagged herself from photos before but is aware and accepts that the content is still out there.

See Claudia's Values, Needs, and Desires

View Careful Claudia's Profile

Newcomer Nina

"I don't understand what these different terms/settings mean."

Nina is an 18-year old soon-to-be college freshmen. She completed her high school studies in flying colors and is looking forward to all that college has in store for her, both academically and professionally. She recently decided to start a Facebook account after seeing how some of her friends in high school were using it. Nina is excited about using Facebook for staying in touch with her old friends, engaging in social life in college and for trying out all the fun games and applications that her friends seem to be using all the time. Nina is conscious about what privacy means to her in her everyday life — she has many friends from high school but only shares personal information with a select few. She expects Facebook to fit into her new academic life at college and her professional future, and will shape her use of the service based on the level of privacy control she is given in these areas. This control also applies to her family, who she does not want to share her facebook content with. She feels a little unversed in general Facebook vocabulary – posts, tags, lists, notes, comments and likes, and is keeping things simple in the short term by sharing a profile picture, some of her basic interests and communicating with her friends on her wall.

See Nina's Values, Needs, and Desires

View Newcomer Nina's Profile

Walled-Garden Wally

"I am not ok pictures of my family being online. They didn't choose to put themselves there - what gives me the right to?"

Wally is a 35-year old journalist, married, with two children - 7 and 4. He has a facebook profile that he uses to stay in touch with old friends from college, colleagues from work, and friends in general. He consciously set his privacy to only allow friends to see the majority of his information - but anyone can discover his profile and request to be his friend. He likes to see pictures of himself get tagged, and occasionally uploads pictures of gatherings with friends who are on facebook, but is careful not to put his family or other friends onto the internet unknowingly. He has asked people to remove pictures of his children before, but also assumes that anything he puts on facebook, and the internet, will be impossible to erase in the future. Because of this he is suspicious of facebook, and every so often when his suspicion builds he does an exhaustive recheck of his privacy settings - usually confirming exactly what he knew to be true - but occasionally discovering new features he does not understand.

See Wally's Values, Needs, and Desires

View Walled-Garden Wally's Profile


Initially we developed four primary scenarios as tasks. These scenarios were common tasks that were important interactions for each of our four personas. These tasks were:

  • Adjusting the visibility of oneself in the directory
  • Block a person from information
  • Restrict a group of people from specific content
  • Add a photo album you wish to share with your colleagues

Although we used these tasks throughout our initial design phase, we found them increasingly less useful as our prototypes progressed. Some features, like photo privacy settings, were dropped from our prototype. Additionally, these tasks did not encourage users to explore the user interface. Simply, these four scenarios was too canned. Instead, we migrated to one primary scenario:

  • Set up the profile as if it were your own

This primary scenario also allowed us to get feedback from users as to which interactions were most important.

The Final Design

This is the Final Design section.

Click here to view our final redesign of Facebook privacy


Unable to display content. Adobe Flash is required.

Information Architecture

The information architecture gives an overview of structure of our prototype. The visualization shown is for a single pivot menu item that could represent the "Everyone", "Friends-of-Friends", "Friends Only", networks and exceptions pivots. Each pivot has a set of common profile elements, along with the profile wall and info tabs.

How We Did It and What We Couldn't

In general, our prototype dealt with the central aspects of Facebook privacy settings, while leaving in place some of the peripheral elements of privacy. Notably, album-level photo settings were left untouched in our final prototype, in part because of the complexity of the system, and in part because we didn't make a final decision on whether photo settings would exist within the same system as general privacy settings or, as it is currently, on the individual albums' pages. Additionally, application and website settings were not included as they are treated very differently to other privacy settings on Facebook, as they require certain permissions to function and are thus less finely controllable.

The static portions of our prototype were built in HTML/CSS and the dynamic portions in Javascript, jQuery, and jQueryUI, which were chosen both because they are well suited to web development as well as being tools used to create Facebook's user interface, making our prototype more relevant to the design of Facebook. Our chosen tools allowed us to build our system from the ground up, eliminating the need to rely on a particular program or technology and reducing compromises in our design and implementation. We believe this led to a very high quality implementation of our design, and smooth integration with our project website. The tools were also familiar to some of the team before the project, and were learned quickly by the other team members. The downside to creating the system ourselves outside of a curated environment was the time taken in development, although with five members of the team, we could afford to devote more time to ensure the system functioned as we envisioned it in earlier stages of our design.

Design Evolution

Our team's development timeline, based off the deliverable timeline for our Human Factors in Interface Design (HFID) course. Click here to download a PDF version of the Design Timeline.

1. Needs Analysis

The current Facebook privacy dashboard. Based on our user research, many people felt that this system did not provide them with enough confidence in how specific privacy settings would affect the visibility of their profile to different groups on Facebook. In addition, we found that many people approach Facebook privacy settings with a "spring cleaning" approach and only adjust these on an infrequent basis.

The story of our prototype development begins with our Needs Analysis phase, where we conducted extensive user research across a number of representative Facebook user groups. We interviewed and observed a total of 12 users as they carried out a number of tasks involving adjustment of privacy settings on their profiles. In addition, we conducted a detailed analysis of the current privacy settings interface and its in-profile components, including on-the-fly and photo album privacy settings. Our user study results clearly showed a recurring theme of lacking confidence; many users were unclear how individual privacy settings affected the visibility of their profile to other users on the network. In addition, the majority of our users approached their privacy settings with a "spring cleaning" approach. They adjusted settings on an infrequent basis, usually inspired by a notification of Facebook updates/changes on their wall or mention of social networking privacy issues in news media.

2. Design Development

The Print Preview Concept

Live Editing Mode

Dual Profiles

Our initial three concepts included the "print preview", "live editing mode" and "dual profile" interfaces.

Based on insights from the Needs Analysis and from a brief exploration of inspiration designs, we developed three concepts that were presented to users in low-fidelity "paper prototypes" during the Design Development phase. For our inspirational designs we looked at similar systems to Facebook (including social networking sites and other online services that deal heavily with privacy like banks) along with a broad range of other ideas that would help us think more divergently about our problem. One of our inspirations was based on exploration of how college students communicate physical identity through decoration (content censoring) and accessibility (setting privacy) of their dorm rooms. The difference between these two approaches was one of our guiding themes for the semester.

Our three initial design concepts were the "print preview", "live editing" and "dual profile" interfaces. The print preview interface was inspired by the interaction of manipulating settings and seeing a live preview of their effect, which is common in print preview dialog boxes. The live editing mode explored the idea of modifying privacy settings directly within the context of the user's profile. Dual profiling was based on the idea of stratifying the Facebook experience into a private and public-facing profile. Users would be able to compile these profiles separately and would assign visibility rights to their friends. After initial user testing, it became apparent that we could easily and effectively combine the print preview and live editing mode into a design concept we called the "Profile Constructor". We first explored the idea of pivots in this interface, where users you could view their profile from the perspective of different major groups on Facebook (Everyone, Friends-of-Friends, Friends Only), networks and self-defined exceptions.

3. Initial User Testing - Paper Prototypes

The profile constructor (shown here as a paper prototype) was the foundation for our final prototype and was developed by combining the "print preview" and "live editing mode" concepts.

During our user testing phase we developed paper prototypes for the profile constructor and dual profile interfaces. This proved to be the most useful evaluation technique for the development of our system as it allowed for evaluation of broader and very different directions for our design. Being able to do this in a low-fidelity environment enabled more rapid evaluation and allowed us to manage our resources more efficiently; we only started to engage in time-intensive detailed design after the core foundations of our system had been determined through prototype testing. We heard varying feedback on the two ideas, but eventually decided that we would move forward with the profile constructor as this system would best serve the needs of all our personas. Based on this feedback, we developed our first high-resolution representation (comp) of the profile constructor. This allowed us to explore and develop some of the more detailed aspects of the design. We considered how users would see which elements of their profile could be toggled for visibility (zooming on mouse-over) and specifically how they would change the visibility settings (clicking on profile elements).

4. Detailed Design

Our first high-resolution representation (comp) of the profile constructor. In this concept we explored how profile elements could be toggled for visibility and how directory settings could be included in the primary interface.

This was also the first time we considered how to deal with directory settings. Based on initial interviews, many users did not initially realize that these existed as they are currently hidden behind a small link on the privacy dashboard page. We decided to bring these settings forward into the primary interface; searchability, for example, was toggled by clicking on the user's name. Small hint text was added to communicate this new paradigm to the user.

5. Prototype Development and Heuristic Evaluation

Our representation of the Facebook wall changed from a more contextual (left) to a settings-based paradigm (right), based on heuristic evaluation feedback.

Based on our design refinements from the high-resolution comp, we developed our initial functional prototype, which allowed for further tweaking of some interface and interaction details. We presented this prototype to colleagues in our class, who used it to perform a heuristic evaluation on our general concept and our implementation. We received a lot of useful feedback from this evaluation specifically relating to our representation of the Facebook wall, discoverability of the features and functions of the new interface, and our autosave model. Our initial implementation of the wall included representations of different types of wall content and were labelled contextually, with text like: "This is a post from one of your friends". Our evaluators found this system confusing, which lead to the development of the most recent interface where wall post types are now represented and labelled as settings, for example, "View posts by your friends".

6. Final User Testing - Saving Models

We investigated three different saving models in our final user test. These included the full screen autosave overlay (left), the autosave pivot indicator (middle) and the manual save notification (right).

In our final user test, we decided to investigate different saving models for our interface. We realized that saving and the reassurance it gave to the user that modified privacy settings would persist, contributed largely to user confidence. The three saving models we explored were: a full screen autosave overlay, an autosave indicator in the pivot menu and a manual save notification box that appeared at the top of the page after any changes had been made. Once again, we heard varying feedback on these different models. Some of the more common feedback, however, related to the full-screen overlay being very intrusive and to the difficulty of seeing the pivot indicators. The manual save option seemed most compatible among all the participants in our user test and also provided the most confidence in settings persistence-the original goal for our system.

7. Final Refinement

We decided to adopt a manual saving system for our interface, which was refined based on feedback from our final user test.

We modified the manual saving system based on feedback we received during our user test. The save notification bar was moved, and now sticks at the bottom of the browser window, making it immediately visibility no matter where the user currently was on the page. Another beneficial feature of this system was that it addressed our initial issue of discoverability. The save notification bar appears immediately after changes have been made to the user's privacy profile. It includes a descriptive sentence indicating that "visibility settings have been changed". To a first time user of the system it is, therefore, much easier to discover what effect the clicking of a profile element has had, without having to read the introductory text at the top of the page.

Final Presentation

At the end of this phase, we gave a 15 minute presentation to our professors and our class reporting on our work and achievements throughout the project, with a presentation on our final design and our design evolution.

Click here to download our final presentation


Following the example of our Design Refinement Kudos concept, we have again decided not to assign percentages for completion in this phase of the project. Instead we are awarding Kudos as recognition of particularly crucial contributions by team members towards completion of the project.


  • Xy for the continued debugging of javascript errors, an expert implementation of multiple randomized profiles for testing, and generally being a stand up kind of guy.
  • Joaquin for writing javascript testbeds for new functionality, getting more diverse perspectives on our user tests, and bringing a touch of Chile to the group.
  • Jeffrey for enhancing pivot and exception functionality, compelling many a user into testing our saving paradigms, and mixing new school hip with old school style.
  • Chris for the new post visibility control metaphor, some very slick looking presentations and graphs, and being a gentleman and a scholar.
  • Ollie for his continued victories over the CSS demons of our prototype, leading us to some profound conclusions as designers, and becoming the new definition of class.