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.
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.
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 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.
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.
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.)
volunteering for educational events
Tennis in the afternoons
Long hours spent at the zoning office
Traveling for work
spending time with his children at events
local club soccer team
Attending regional conferences
Dealing with local businesses to orchestrate zoning
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.
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.
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.
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 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.
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.
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.
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.
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.
Using AI similar to News Feed, Facebook can present users with debates they may find interesting, or want to learn more about.
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.
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.
When debates and opinions are varied, and not solely black and white, constructive conversation can occur, reducing the risk of polarization.
Projects function similar to Kickstarter campaigns. By utilizing Facebook's massive social network, ideas can quickly turn into realized action in a localized context.
Allowing these grassroots efforts to gain traction can help surface minority issues that would otherwise be obscured by demographics.
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.
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.
The public data section of the cities tab gives citizens easy access to numerous public data sets.
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.
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.
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.
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.
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.
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.
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.