Facebook Cities

UX / Winter 2017

This project was developed over the course of ten weeks for my Perceptual and Cognitive Human Factors course at SCAD. The focus of this class was to understand the cognitive constraints that designers need to consider when creating interfaces and products. The product I developed is a Facebook tool for civic engagement.

UX Writing: Brittany Landry

Disclaimer: all Facebook assets used in this project are purely for educational purposes only, and do not reflect the intentions of Facebook or any of its affiliates.



My professor challenged us to create a solution to a problem of our choosing using “The Internet of Things.” I wanted to expand upon the prompt, and develop a solution for a smart city. The problem I chose to solve was the lack of civic engagement occurring at the local level.

The problem

Citizens lack a direct, accessible and engaging way to influence the development and utilization of their city services, both physical and digital.


Creating a direct feedback loop between citizens and the cities intelligent infrastructure would provide city officials with significantly more useful, data driven services for their constituents.


Facebook Cities is a platform that facilitates ongoing and active participation in local governments across the world.


Getting to my solution was a laborious process and required many cycles of research and ideation. Below, I will describe the process that led me to my solution, and explain in detail the various components of Facebook Cities.



IOT research

I set out to research the current state of “The Internet of Things.” I read several books, and examined numerous papers describing the emerging interaction patterns for IOT products. I wanted to understand the technologies that enabled “The Internet of Things” we know today. I also needed to become familiar with the constraints and opportunities IOT technology provides for designers. Through my secondary research, I developed several insights that informed my design process. The first being consideration of a product's use case. It also gave me a good idea of what to consider in a product user case.

"Why does this product deserve a physical medium"

"Digital augmentation can give many physical products a clunky user experience through feature creep"

Smart cities

I became worried that without intentionally designing smart city IOT technology for transparency, these systems could be used for malicious purposes and stifle democracy. I read several papers on how to design for smart cities, and the implications of a monitored and automated world. I also performed an extensive audit of various smart cities such as New York and Barcelona to understand how the technology was being leveraged currently.


I interviewed three "experts" throughout the course of my project. The first being Chen Ye, a former product design intern at Facebook, John Sibert - owner and architect at 2SL Design Build, and Andrew Nelson, a designer on the IBM Watson team.

"we also specifically had to be careful that we weren't doing things that would exacerbate systemic biases in favor of specific ideologies"
- Chen Ye

Human Factors

We developed and released several digital and physical cultural probes out into the wild in order to amplify the quantity and quality of qualitative data we collected on our users. We released our probes to 10 different people of diverse backgrounds and age groups. We needed to understand the daily behaviours of our users.

Snapchat probe

I created a Snapchat group of individuals with diverse backgrounds. With 20 participants, this gave me a channel to quickly feed questions to participants while conducting my research and get instant feedback. Snapchat also has the ability to send photos and emojis, which gave me a multi-layered data set to pull from.

Some of the questions I asked...

1. What channels do you use to contact your local government?

2. What are some daily frustrations you have in your city?

3. What motivates you to take civic action?

4. How do you receive news about your local government?

5. Take a photo of a public artifact you wish you could control on demand. (Traffic lights, Public parks etc.)


From this, I learned that many individuals rarely participate in local civic engagement, even though they are frustrated frequently by policies and projects initiated by their respective local governments.

Primary persona

Contractor, Activist

volunteering for educational events

Tennis in the afternoons

Long hours spent at the zoning office

Secondary persona

International consultant

Traveling for work

spending time with his children at events

local club soccer team

Provider persona

City Council member

Attending regional conferences

Licensing properties

Dealing with local businesses to orchestrate zoning

Stakeholder map

After Identifying my primary persona, I developed a stakeholder map that mapped the frequency of interaction between my persona and city artifacts, services, other citizens, and city officials.

I validated the frequencies of interaction by showing the map to various users that mirrored my persona to see whether or not they agreed.

User Journey


The key to the solution lay in the medium I would deliver it through. The channel through which citizens engage with their local city needed to become habitual.

Eco-system analysis

Once understanding that habit and frequency of engagement were the key to my solutions success, I searched the internet for products that were working to solve this problem.

Link NYC


I gathered all of my research insights and affinitized the data. One emergent theme became clear. Do not reinvent the wheel. I also realized that smart cities are actually just social machines, reacting to the stimuli of the systems and citizens they are composed of.

Because cities and governments are social organisms, I decided to design a product for Facebook.

Design process


Interface analysis

Facebook's design system is not public, and there are very few resources on the web for constructing Facebook web interfaces. Because of this, I had to spend a considerable amount of time hacking together a rough template that mirrored Facebook’s existing design language but allowed me to be flexible in my explorations.

I began by sketching all of the various card components that exist on Facebook's newsfeed and within Facebook pages. I also analyzed the framework interfaces that the card were embedded within, such as global and tabbed navigation.

I then broke these components down in order to identify common themes to guide my wireframes and interaction patterns.


I created lo-fi and hi-fi wireframes of my solution. I began by sketching the various components I needed and then moved into sketch where I began to further develop the fidelity of the components.

I also mapped out where the various components would interact, and compiled the schema into an architecture tree.



Facebook Cities

Facebook Cities is a platform that facilitates ongoing and active participation in local governments across the world.


Debates allow citizens to create conversations around issues that directly affect the local citizens. Groups can tag each other to bolster support, and local officials can endorse opinions.


Projects function similar to Kickstarter campaigns. These allow local groups or individuals to raise money for public projects, and get endorsements from government officials. Allowing these grassroots efforts to gain traction can help surface minority issues that would otherwise be obscured.


This feature allows Halo to predict health problems for the user. By using the human body and a simple tagging system for symptoms.




This is the “create a post” component when a user is viewing their city. Here, they can either spark a debate among local citizens, create a poll, kickstart a project, or add an existing fundraiser to increase awareness.

My City

Every city past the threshold of 200,000 citizens on Facebook will receive their own unique icon, designed to reflect the many nuances of that community.


Similar to news feed, Facebook Cities has its own, localised version of the trending card that can provide citizens real-time updates of what’s happening near them.


Facebook already has a massive app ecosystem filled with a wide range of services and products. Civic engagement products such as Countable, and other smart city applications can integrate directly with users Cities feed.

By allowing these integrations, Facebook can leverage its massive user base as a transactional data goldmine which in turn benefits developers, citizens and Facebook.



Create a debate

This is the create a debate component. When a user creates a debate he lays out the basic information first, to determine what will be shown to the public.

Users can tag groups to gain support quickly, link public data to backup their case, and create preset opinions that users can “side” with.

By allowing users to create their own “sides” of debates, and letting the most popular “sides” filter to the top, communities can tailor the conversations of the city to reflect citizen values.

Featured debates

Using AI similar to News Feed, Facebook can present users with debates they may find interesting, or want to learn more about.

Each debate is localized and relevant to users interests.

Debate suggestions

Here users can view a wide range of debates they follow, or might be interested in. Debates users friends are involved in filter to the surface of the feed. On the sidebar, the system offers suggested debates according to the users interests.

Debate thread

This is the header of a debate thread. This would be the first component that a user sees when he selects a debate. Users can see who's involved, and the most popular opinions. Users can also add their own opinions to shift the conversation.

Research shows that people are much more willing to hear opinions different from their own when presented with a range of similar but different views.

When debates and opinions are varied, and not solely black and white, constructive conversation can occur, reducing the risk of polarization.



Create projects, gain support

Projects function similar to Kickstarter campaigns. By utilizing Facebook's massive social network, ideas can quickly turn into realized action in a localized context.

Projects allow local groups or individuals to raise money for public projects, and accrue endorsements from government officials.

Allowing these grassroots efforts to gain traction can help surface minority issues that would otherwise be obscured by demographics.

Projects Thread

This is the header component for a project. Users can easily check in on a project's progress, support the project with a micro-donation, or contact the creators for further information.

If you choose to support a project, you will only be charged if the project reaches the amount of money requested.



The city at your fingertips

Through the City tab, municipalities can publish public records for citizens to browse, and tag in projects or debates. Municipalities can also integrate with smart city applications such as IBM Watson. This can help leverage evidence to enable citizens to invoke change.

Public data

The public data section of the cities tab gives citizens easy access to numerous public data sets.

Citizens can save these data sets, or share them in debate threads in order to substantiate claims.

Smart City Apps

Given that Facebook already has a massive application ecosystem, it is only natural for Facebook Cities to integrate smart city technologies. Applications like Next Door, and FLOW from Google Sidewalk Labs can integrate with Facebook Cities platform and data streams.

Smart city integration will facilitate data sharing at an unprecedented level, opening the doors to a variety of new opportunities within Facebook’s ecosystem.



Legislative updates

Through the legislation tab, citizens can get a quick overview of the most recent legislative news and updates from a range of agencies. Citizens can also see legislative actions taken by various officials.

Citizens can quickly see the latest policy updates, and give their opinion as to how their representative should vote. They also receive direct feedback when their representative votes.

City chatbot


No more 311 calls

With Facebook Messengers chatbot platform, citizens can easily request assistance from their city without having to dial 311 and wait for a human operator. The majority of tasks can be handled directly through the cities automated bot, if the city chooses to invest the resources into creating one.

If the chatbot fails to answer your questions, you can request to be connected to a human operator.
HTML5 Icon



Initially I wanted to develop the product with far fewer features, and focus on making it adaptable to developing countries. I tried to obtain the UI for the Free Basics platform, however I was unable to.

Given more time, I would have slimmed down the product's functionality and focused on scalability
Designing for scale

Designing for scale is extremely important when considering the impact Facebook has on the world. It is important to consider the systemic impact of the product on humanity, without getting lost in feature creep for a specific demographic.

Designing for Governments

Given more time, I would have also liked to design the dashboard and CMS side of Facebook cities. Designing the tools and interface Government Officials would be interacting with is just as important as the user facing side of the product.

Don't reinvent the wheel

Using Facebook's UI and spending time analyzing the interaction patterns used across Facebook proved invaluable. There is no point in reinventing the wheel when it comes to UI, and interaction patterns unless it is at least 2x better.