UX/UI Design

An "Action-Focused" Civic Engagement Tool

Citizens need reliable information in order to encourage them to get involved and participate confidently in their local governments. WeThePeople is an action-focused local engagement tool.

Role

UX Researcher
UX Designer
Project Manager

Industry

Public Service
Information Technology

Timeline

5 Weeks (2020)

Project

Team Project,
Design Challenge

SCROLL

MentaMorph
Hub for
Libraries

Context

In the onset of March 2020, the United States of America experienced high racial tensions due to #BlackLivesMatter movement and protests against police brutality, as well as the world declaration of a global pandemic from COVID-19 virus. It seemed as though governments and official world leaders were placed under spotlight by its governed citizens to examine how issues were being handled and responded to. The world witnessed fragmented and broken government-citizen relationships.

This design challenge was extremely timely in the sense that I was able to explore solutions of unity, improved experience, and work towards improving the relationship between the government and the people. I was on a team with two other talented UX Designers. While each team member had equal part throughout the whole process, I took a heavier role of product manager in organizing the vision and direction of the final product.

The Client
Local governments play a tremendous role in shaping policies and programs that affect citizens at the most basic level.

The Challenge
Design a mobile friendly website that improves government-citizen relationships by enabling citizens to participate, collaborate in all processes, and make information easier to access and understand.

Understanding the Problem Through Research

In 2009, the Obama Administration launched a "Open Government Initiative" in order to improve government-citizen relationships by making information easier to access, more transparent, and presented in a way that enables citizens to participate and collaborate in all processes of the government.

Since then, the administration has created easy to use websites to track government spending, memorandums of best practices, and other partnerships with other nations at the UN. While these efforts are great on a Federal level, 89,000+ local governments still have no way of standardizing its communication channels with its constituents. Smaller cities and counties are especially struggling to implement and adapt to technology because that may lack the budget and resources to update content, develop a web presence.

Knowing this, the questions I wanted to ask was:

  • How do people currently interact with the local government?
  • What kind of resources (info and services) do people seek from their local governments?
  • How do people want to interact with their local governments?
  • What expectations do people have of their local governments and is it being met?

The Current Landscape & Emerging Trends

As more citizens look to the internet instead of print journalism to conveniently seek information, they are confronted with information dispersed all across the web and from unreliable sources like social media or news media (questionably biased). Information is difficult to find and hard to understand because language and processes are not established in a place that people can understand.

When looking for government information, people are using:

  • Social Media - for quick, "real-time" updates but (not accurate or reliable)
  • News Media - reliable (questionably reliable)
  • Government Websites - reliable, but language is hard to understand

When participating in civic engagement, people are using these platforms:

  • Political Parties - partisan engagement
  • Non-Profit Government Organizations (NGOs) - voter engagement and information literacy
  • Social Media - activism organization

What does this mean?

Being accessible on the internet is increasingly important way to interact with the government. There is a push to make government websites more: 

  • Stream-lined
  • mobile friendly
  • citizen-centric
  • less likely to be obsolete (able to stand the test of time)

Our product must be able to deliver non-partisan information in a "real-time"or quick method. This will help alleviate friction when navigating through our competitors and finding information.

Understanding the Target Audience

In order to paint a clear picture of "who" our typical person is in when interacting with the government, I particularly looked at exiting agencies like 18F, who conducted research on government-citizen relationships. We also collected 31 respondents from a survey we conducted and summarized insights from 12 user interviews.

Current Perception of Local Government

Government trust-worthiness is rooted in past experiences and interactions as well as the urgency of their requests when experiencing life events. (18F)

Our users from our studies have told us that they found government websites and processes hard to navigate, confusing, or that the government does not do a sufficient enough job with providing them straight-forward and clear direct answers.

"It's so hard to find information. They don't advertise their meetings...it can be overwhelming to find out if you don't become friends with someone who is involved."
- Thuyvi, User Interview

A big common theme was people mentioned is that they don’t know how to start or they don’t feel confident that they know how to voice their opinion. Users said they wanted to be well educated and well-informed before interacting with them.

What does this mean?

When the design and information is difficult to understand and not very user-friendly, people may struggle or feel less confident in their interaction and it impacts their beliefs and perceptions of the government that it is not transparent and erodes the trust people have with their government. 

Current Behaviors and Interactions

When we asked respondents what “getting involved” with the local government mean, these four categories were most mentioned:

  • Voting
  • Seeking Services
  • Communicating Directly
  • Being physically present

We found that 67% of respondents and users have interacted with their local government. The interaction is reported on average once a year or less. Voting is the extent of what people do when interacting with the government. These interactions are driven by personal interests.

However, there are also 3 barriers to accessing government information:

  • Digital Literacy
  • Digital Access
  • English-Fluency

These barriers all range on a spectrum. When inadequate information or too many options present itself, people feel ill prepared to make choices about government services leading them to abandon the process all together or struggle indefinitely.

People also have different styles of information seeking. Their style affects the kind of services they access, benefits they receive, and outcomes in life events. If people feel less confident about the likelihood in receiving a service, they are more likely not to engage and it impacts their beliefs and perceptions.

There are 2 types of information seekers:

In addition to a person's information seeking style, people want clarity on the entire process in order to feel at ease and reassured from the government:

  • All the steps they undergo
  • Status of the request
  • Contact information/reference point when questions or concerns arise
  • Follow-up response with reasoning and explanation

What does this mean?

It is clear that that the government does not have the capacity to offer aid and support when promoting their services because either there is a shortage of public servants or their fragmented and siloed digital infrastructure is not set up in a way to assist.

By understanding who our target audience is and the barriers to accessing information, I can better devise strategies to meet users where they are and consider the large and diverse population of people the government typically serves. As designers, if we can improve the outcomes and the experience, we can better build the relationship between the government and its people.

Framing the Challenge

This is what we know right now:

In summary, our research tells us this:

  • Government websites are fragmented and hard to use
  • People are less involved then they ought or want to be
  • People did not feel welcomed or invited to participate
  • People felt apathetic if their voices were being heard

Stakeholder's Goals:

  • Improve government-citizen relationship
  • Encourage citizen engagement
  • Increase government transparency

User's Goals:

  • Clarity on government processes
  • Reliable source of information
  • Meaningfully contribute to civic community

Our Product's Goals & Design Principles:

  • Create a product that improves government transparency
  • Provide opportunities and empower users to get involved
  • Quick access to information written in clear language
  • Inclusive to diverse set of people, views, and cities
  • Each component is consciously chosen, serves a purpose and placed with care

Citizens need reliable information about their local governments to encourage them to get involved and participate confidently. How might we...build a responsive mobile site that enables citizens to participate and collaborate in all processes by making information easier to access and understand?

Who exactly did I meet?

I actually met 2 types of people. I met Katy, a 26 year-old aspiring engaged citizen. I also met Julia, a 23 year old frustrated activist. As a sum of the responses and insights I learned, I created persona as a way for me to empathize myself with the product or service I am designing for.

Julia is the active information seeker where she is always looking for ways to get involved where she can turn her interests into action. Katy on the other hand is the passive information seeker who is ready to hop into local politics but she feels unsure if she is knowledgable enough to get involved.

While the data we collected from our surveys and user interviews show a mix of both Julia and Katy, both personas are important for me to frame the different approaches various users take to getting informed with information. That will be the focus of our product--to close the knowledge game, get informed, feel confident enough to participate.

What is Katy and Julia's experience like?

Based on their motivations, goals, and frustrations they are experiencing, an empathy map helps put myself in their shoes and imagine the thoughts they might be thinking or say, or the feelings they might be feeling.

When designing the final product, it is important to keep Julia and Katy in mind so that I can ensure their needs are met, and the various touch points they can use our product.


The "Build" Stage

Once I had a better understanding of the problem at hand and who I am designing for, my next favorite part is the ideation phase. While keeping these constraints in mind, I approached the challenge using this process:

Sketching 6-8 ideas within 5 minutes

I first start any process with sketching out as many ideas as possible within 5 minutes. This exercise forces me to get as creative as possible

From paper prototypes to high fidelity screens

Once we decided on one concept, we started the ideation process all over. I began working with paper to plan out each screen and flow before taking the ideas into Figma and prototyping early versions in black and white. Our team stopped at the mid-fidelity version. If I had more time on this project, I would take the next level by adding in color.

The Final Product

"We the People" is a mobile-friendly website that focuses on action and public engagement in their local government.

A big theme of the platform is to house information in big buckets so users can quickly find what they are looking for. We wanted to match the mental models when searching for information. By laying out all the cards on the table right when the users land, we want their first impression of the site to be a commitment to being transparent. Since people's motivation to participate is very passion specific or personal, people already know what they are interested in and what they want to find.

Big Cards

These big cards were inspired by the black lives matter website that was shared during the height of the protests. I thought they did a really good job at being very direct with their information so we wanted to adopt that methodology into our site.

By laying out all the cards on the table right when the users land, we want their first impression of the site to be a commitment to being transparent. Since people's motivation to participate is very passion specific or personal, people already know what they are interested in and what they want to find.

This allows us to met users where they're at. Whether Julia or Katy is browsing through, learning about their city, or looking for ways to get out and do something, we help users quickly find what they are looing for in these buckets of information.

Minimalistic Design with Big Text

We’ve decided to keep the design super minimalistic with big cards and text sizes since the nature of the content is very text heavy. This good balance of black and white will help users primarily focus on getting information and the means to take action.

Snappable Full Screen

We know that our attention spans are getting shorter and shorter with these 10 second videos and 160 character tweets. We wanted to present and deliver information in this snappable “full screen” design so users can quickly digest bite-sized information. This switch up between vertical scrolling and horizontal scrolling is a fun and engaging way to break up information and distill it into bite sized pieces. It is a nice break from traditional newsfeed that many users are acquainted with.

Horizontal and Vertical Scrolling

This switch up between vertical scrolling and horizontal scrolling is a fun and engaging way to break up information and distill it into bite sized pieces. It is a nice break from traditional newsfeed that many users are acquainted with.

Step by Step Process

Through our research, we found that users wanted clarity on every step of the way so we made it a big priority to design a series of screens in a “step-by-step” manner that hold their user’s hand throughout the entire process. We want these resources to set individuals for success through education and learning and understanding how they can be leaders in their communities.

How will it work?

Since this platform is a hybrid government website and a “change.org”, the government will control the primary content and resources but it is the users who will enrich and drive engagement. We want this platform to be a mediator between government-citizen relationships.

While the government will control the primary content and resources, it is the users who will respond to that information and build content through petitions and drive engagement. We want to foster a collaborative eco-system.

The Big Value Proposition

Bite-sized and digestible content
The look and feel as well as the function of this content is bite-sized and digestible. By being concise, we are forced to pick and choose the kinds of information that is clear and transparent.

Action-Focused Design
A goal of this platform is to get people out into the world and take action. The design is focused with a "call to action" at the end of it

Nonpartisan Education of Citizens
Present information that is non-bias, directly from the source, and issue-specific, providing guides

Resource Rich
It makes us a one-stop shop or resource-rich platform we make getting information and participation easier.

Testing with Actual Users

In order to test the viability of our concept, my team and I tested with 6 users to observe their reactions and thoughts with the app. Each participant was instructed to navigate through the site in order to complete 4 tasks and a small scenario. While it was very validating that the overall design of the mobile site was easy to use and straightforward, it does not necessarily speak to the functionality and content of the platform.

From our research findings, I devised 3 takeaways and recommendations on what I would do differently:

Recommendations
Reasoning
Users preferred voter education resources rather than actionable resources like organizing a protest
Content balance between information and action
In the next iteration, we need to explore the difference between activism and involvement. What does that look like?
Users were confused with certain labels and information hierarchy
Redesign labels and navigation to further reflect user intuition
I believe the "Get Involved" aspect of the app needs to be changed to reflect user intuition. As well as nestle Voter Education under "Get Informed"
Some task flows had low marks on usability and card designs were a bit confusing
Refine flows and card designs with common patterns
I  suspect that mixing horizontal and vertical navigation is uncommon. A deeper dive into testing user flows is necessary.
Key Takeaway

The feedback we've received undoubtedly set us on the right direction and path. During the "build phase" I was so excited about the big card design and how to implement a "call to action" at the bottom of each page. However, I am learning that the information architecture is weak and "action-focused" might be too pushy in motivating the user to do something.

Most of the time, critical feedback is the most rewarding fruit because it sheds tremendous light on my own personal biases and initial assumptions.

"This would be most helpful if there is a notification when a bill is put into act -- I would use it to see what is being pushed...quickly. If I don't agree, I would definitely start a petition."
- Connor, Usability Test

Next Steps

The validating aspect of our platform is that it does meet users where they are at. This is just beginning and our platform needs to mold to new and relevant ideas as user's needs change. If I were to continue this project, the next phase would be focused on these new points:

More Research & Iterations

  • Test shifts in information architecture and additional functionalities
  • Research retention methods
  • Focus on education to reinforce user confidence
  • Continuously test updated versions

Additional Content

  • Voting and ballot information
  • "Follow the initiative"
  • Virtual Town Halls
  • Trending Issues

Additional Functions

  • Registering to Vote
  • Accessing Services & Departments
  • Interactive City Map
  • Notifications

What I learned

The lessons I learned during and as a reflection at the end helped me refine my own personal process in the whole design thinking aspect.

Design is iterative.
The design thinking process is not linear, where once we finish with "one stage", we will never visit that stage again. There were moments during the "Build" stage where I wish I could stop development and go back and dive deeper into understand ing the space I am designing in through research.

Leveraging design thinking tools exercises.
By leveraging tools like "6 hats" or other exercises, these practices really helped me streamline the process and focus on extracting the most important insights from our research. I learned that when I or my team is feeling in a rut or just stuck, I can pull out these tools and get on the same page.

Prioritization.
A big lesson in this project is condense and be concise. I often thought "who are we designing for? What do they need?" I've learned the key to being a great designer is to balance between what you need to show, what you don't, and how to communicate those important bits at the right time and in the right way.