Logo.png

A brand-new platform, tracking federal, state, and local legislation for your future.

MacBook Pro - 1_macbookpro13_front.png
Homepage - App_iphone12black_portrait.pn

Project Origins

The final project for the UX Design Certificate from Google is a capstone where the designer is tasked with designing both a mobile app and a responsive website, and all prompts direct you to design for a social good. The prompt I pulled was: "Design a cross-platform tool to help immigrants learn about bills which affect them."

As a concept, Bills of Concern quickly grew beyond this original parameter, because initial research and competitive audits indicated that most people only learn about high-profile legislation via the news. Meanwhile, any apps with a similar goal are either student projects or APIs that feed you specific news feeds.

Despite the potential of this project, I always kept my task in mind. I did not possess the resources to translate bills or collect local ordinances in a database, but if I listened closely to my participants, they would tell me what level of accessibility they needed here.

Objectives

  • Help users who do not commonly engage with the political process discover bills which could help or hurt them.

  • Help users keep track of multiple pieces of legislation during the course of their journey through legislative bodies.

  • Help users build an informed opinion about the bills that concern them.

  • Enable users to take direct action as soon as possible by promoting bills for the subjects which concern them.

  • Enable users to conduct detailed research in preparation for letters or conversations with their leaders on the local, state, and federal levels.

Research

"I'm not just the type of activist who goes to protests. I also hit up council meetings, and I do a lot of research for those."

"As a student, I used to go to a lot of protests on campus [before the COVID-19 pandemic struck]. Sometimes I would just join one, and that's how I learned about a lot of issues."

"English is not my first language, so I don't like reading legal documents. I don't think I've ever actually read any portion of a bill before."

"I tend to read Politico, so I guess that's how I learned about a lot of bills that were super messed up."

Early on, I learned that these concepts were perfect for development as both a responsive website and a dedicated mobile app. As I interviewed a wide variety of potential users, some told me they would prefer an app for their phone, while others told me that they would check out a website for information if it was available.

Later on, I chose to conduct moderated user studies via video chat, utilizing screen sharing tools to observe the navigation of my app and website. It was a new experience for me, but helped me learn how to structure my follow-up questions. If given the chance to conduct this form of moderation again, I would enjoy it, as I learned a lot about structuring my questions and avoiding certain biases. 

User Personas

Emilia Rodriguez

Emilia is a social worker and mother who immigrated to the country from Guatemala as a young adult and was naturalized later on in life. Because of her schedule, she doesn't protest as much as the typical activist. Instead, she attends council hearings, armed with information she researches at home on her laptop. She's looking for a website that will allow her to track bills in her state legislature and ordinances in her city.

Emilia Rodriguez.PNG
Julio Laurens

Julio is a student in college who's finishing up his arts degree. He is the son of an immigrant father and concerned about the direction of his home country when it comes to immigration issues. Because of this, he's gotten involved with local activist groups and regularly attends protests when he hears about them. He's looking for an app that can help him learn about pressing concerns on the go between his final courses.

Julio Laurens.PNG

Sketches

20210227_204436.jpg

Since I adopted a mobile-first philosophy for this project, I sketched my ideas for a dedicated app of the platform first with a Crazy Eights exercise. Most of these ideas morphed into other elements in the final prototypes, but one in particular stuck out to me: a concept where users could utilize both sides of a hashtag to categorize the topics they follow.

Some cursory searching online taught me that on Chinese microblogging sites, the lack of space between characters meant they needed to use a #hashtag# on both sides of the phrase to properly designate it. Here though, the concept allows you to hone in on your search like you would in a database. A new#hashtag in this case specifies that you're looking for hashtags under the "new" category.

While I think this could be a fresh idea to search for bills about, say, federal#immigration, I'm not convinced that it would fundamentally replace a #federalimmigration hashtag. It's certainly easier for me to read though, so I incorporated it into my designs for usability testing.

Wireframes

With wireframes, I took the opportunity to experiment with a tool and technology I'd recently acquired. Rocketbook Cloud Cards are reusable index cards which you can scan images of before wiping them clean. They're also the same size as a small mobile device and feel like tiny whiteboards when you write on them. With them, I drafted several wireframes for a homepage before moving into Figma for my first user flow: searching for bills.

The only reason I ended up building digital wireframes in Figma instead of Adobe XD was because of link-sharing restrictions. While Figma is certainly my preferred program, the ability of Adobe XD to catalog components for you is incredible. I greatly missed that while using Figma this time.

RB - 2021 02 27 - 21.13.20.jpg
RB - 2021 02 27 - 21.13.32.jpg
RB - 2021 02 27 - 21.13.50.jpg
RB - 2021 02 27 - 21.14.41.jpg
RB - 2021 02 27 - 21.14.09.jpg
iPhone 8 Plus - 1.png
iPhone 8 Plus - 4.png
iPhone 8 Plus - 6.png
iPhone 8 Plus - 5.png
iPhone 8 Plus - 3.png

This is where I made a mistake. Lots of experimenting with Figma in my own time endeared me to overlays, and because of that, I chose to use one for my portrayal of a search function. Then I speculated in the lo-fi prototypes that people might prefer to skip that overlay when hitting the back button.

Usability testing pointed out this assumption. When asked to attempt another search, multiple participants pressed the back button a couple times and were confused to end up back on the page with topics you followed. I'd effectively added an inconvenient pair of steps, forcing the user to go back, then blaze a new trail forward, instead of just back. Subsequent searches are linear, and I sent my users in a circle.

 

Mistakes happens. That's why we fix it. That's why we learn. I adjusted my digital wireframes so that the search page was no longer an overlay, permitting a user-friendly navigation via the back button.

Homepage - All.png
Search Results.png

Refinement & Prototyping

iPhone 8 Plus - 6 - Search Fixed.png

When I moved into mockups, I made a unique decision in the course of my design work. Early on, I incorporated Material Design icons, but after considering the benefits an app like this could bring to people in the United States, I decided to adopt many of the standards from the United States Web Design Standards. I wasn't building a government site, but I was building something that reflected the potential.

The emergence of a sorting system for different government levels is also a direct descendent of my ideas about new#hashtags, which initially focused on sorting topics into the federal, state, or local levels. That idea also appeared in my designs.

Homepage - Federal.png
Homepage - State.png
Homepage - Local.png

After mockups for my mobile app, I moved into the realm of progressive enhancement, designing a complimentary responsive website. Above all, this helped me refine my understanding of constraints, and I was able to execute the layouts across a range of potential devices with this new skill.

While I like the simplicity of this design, I recognize that it's also the reflection of a UX design education which I largely undertook by myself. I had peers online who reviewed my work, but I did not have a team to iterate and design with from the start. Ironically, this solo project became an important lesson on teamwork. One person cannot solve the design problems of the world by themselves.

But if that person worked with developers, clients, marketers, stakeholders, and other UX designers? Who knows what they could do?

MacBook Pro - 1.png
Homepage - RWD.png

Final Designs

MacBook Pro - 1_macbookpro13_front.png

Introducing: Bills of Concern, a platform for the people of the United States, designed to help you find legislation that matters to you. 

Designed for both your phone and computer, it organizes the vast amounts of information from local, state, and federal governments for accessibility across the electorate and beyond. Now, you can focus on research and direct action, instead of grasping for answers.

Homepage - App_iphone12black_portrait.pn
iPad Pro 11_ - 1_ipad_gold_portrait.png

Bills of Concern is also compatible with all your devices, and offers a signed-out mode for its library of resources. With new#hashtags, you can sort your own topics and never lose track of what's important again.

Logo.png

A brand-new platform, tracking federal, state, and local legislation for your future.

Check out the WIP prototype here!

What's Next?

When I first started my UX design certificate, I was a beta-tester who felt privileged to be given the equivalent of an early-access pass. But while I could've waited for the final product to drop, I knew that I didn't just want to study UX design. I wanted to help. That has always been my modus operandi: help where you can, because people always need help.

To be given a project that is fundamentally for social good brings that drive full circle. It was also a perfect capstone to design the base user experience for both a mobile app and a responsive website. This project gave me insights about how they're similar, how they're different, and where we can blur the line between each format. I also took away important lessons about how we design search functions across apps and websites, and emphasized the critical skills behind researching what users need and studying how they interact with new products like this one. And in line with that, it also gave me a glimpse about how we improve what we already have. That's exciting for me; I'm all about optimization. It's a great way to help.

Finally, Bills of Concern is something special. It's not entirely unique in concept, but it executes something fresh and useful. It has the power to help people across the United States by engaging them with a political process that always affects them. I would love the chance to work with a small team towards bringing this platform to fruition--or perhaps even a rotating cast of college students pursuing course credits, like some of the student projects I audited as competitors. For now though, this is my favorite work-in-progress. I will probably design more and more of it in my spare time until opportunity strikes. That's okay though, because no matter how long it takes, I can always try new things.