You Can Be The Next Local Hero
  My Role: Lead UXUI Designer/Researcher   Time: 3 week sprint.   Team:  2 UXUI Designers 4 Developers

Local Matters
Local governments often have a more significant impact on the lives of their residents and voters than state or even the Federal government. With the ability to impact people’s day-to-day lives and quality of life, it is essential for citizens to be engaged members of the public dialogue and decision-making process.
“Most people say they like their state leaders, and a majority even remembers learning about state government in school,” said Johns Hopkins political scientist Jennifer Bachner, . "Despite this, most people are not aware of who exactly represents them and the significant decisions made by their state government."

Local Hero provides users a convenient, simple, and an easy to navigate interface with integrated features designed to promote efficiency by eliminating the need to use multiple sites. Our goal was not to reinvent the wheel, it was to simplify. By taking resources already available and creating a user friendly portal with direct access, Local Hero makes it easier than ever to be informed and take action.
Citizens, in turn, feel a sense of empowerment from active participation in local government, which ideally leads to more civic engagement. 

Get Involved. 
Make a Difference.

Search for your local representatives and message them directly
View relevant information about current candidates, ballots, city meetings, and upcoming elections
Improve your neighborhood, report that pothole that you have been driving over for months

What problem are we trying to solve? Does it need to be solved? Early insights are key in achieving our optimal goal. 
Google Survey
Competitive Audit

In order for a product to succeed, designers should know their competition and collect as much data as possible. We looked at traditional city websites and third-party sites that provided citizens with the ability to search representatives and report local issues.
Recurring Themes Identified 

Poor Mobile Usability
Complex Design
Saturated Layout
Complicated Navigation
Lack of User Control

Full Audit Click Here

1:1 Interviews 

Understanding the logistics gave perspective on current user journeys. In order to create solutions, we wanted to understand the issues at their core. 

How does local government work?
Full disclosure-Like many, I didn't know. I reached out to a friend who could give me perspective from city/residents. 
This interview explained it to me in a way that google could not.
​​​​​​​Key Interview Insights

Participating in local elections and knowing who represents you is only half of the battle. Knowing what can they do for you is just as important.
Citizens should look to their city officials to address concerns on anything ranging from potholes to school safety.
How might we engage locals to actively participate? Are people reporting issues currently? Back to the research we went!

Social Listening

Using the insight already gathered we were able to ask strategic questions. Getting to root of the problem one user at a time. Time did not allow for a second google survey, instagram polls proved to be an excellent alternative.
The Voice of the People
Social listening revealed frustrations in the community which contributed to our MVP features. We discovered that civic engagement could be improved in more ways than one. By incorporating a submit request feature, Local Hero allows users to engage 365 days a year and attracts more users.

If you have ever been to Miami you may have experienced the abundance of potholes and street repair, it is clearly an issue that locals are voicing. Where is the disconnect? The complaints are not being made through proper channels, and the proper channels are not performing as they should. 

" The CITY can't fix what it doesn't know is broken"
Who are we designing for? Telling the story through personas ensures we remain user centered at all times. Our research provided us with insight to create personas who would embody our potential users.Local Hero aims to provide an improved experience for those already active (Julia) and a platform that will encourage those that are not (Chris).

Minimum Viable Product (MVP)
Must-haves, Should-haves, Could-haves and Won’t-haves. During our ideation session and user journey mapping we collected 30+ features. We had to be realistic and identify what features would be essential to the success of local hero. Using the Moscow method and the power of remote collaboration we prioritized features and established key performance indicators.
Moscow Method
 Key Performance Indicators
# of searches for  representatives
# of messages sent to representatives
# of Service requests submitted
MVP Features
Our features, when looked at individually, can be found in many products currently in the market. The combination of these to create our MVP gave us a clear advantage over the competition, by providing users the ability to accomplish multiple tasks without the hassle of having to use different sites. Convenience + simplicity = Local Hero
User Flows  ​​​​​​​
Visual Screen Flow
 Julie finds her representatives and with one more click she can easily message them.
High Fidelity User Flow Chart

Wireframe | Iterations
Wireframe  Prototype
Wireframe Prototype | User Testing
Final Wireframe Preview
​​​​​​​The Perfect Mood[board]

Color Selection
Inspired by traditional political colors these alternative tones create recognition without direct party affiliation

Representative of real people to create connection for user

Gibson provides clear readability in addition to 16 fonts which facilitate clear hierarchy 

Homepage Exploration
Hero Background Image | Color Use | Font | Case

Variations Tested 

Icons | Color Distribution | Image Placement
Homepage Breakdown


Final Versions
Click through the prototype by enlarging the screen.

User Testing
The Covid Factor
User testing in person during a pandemic was not ideal, instead we were able to use Zoom and the integrated Figma device prototype to recreate the experience

Key Iterations

Representative Results Evolution
Key Iterations

Representative Profile Evolution
Accessibility Testing
IXD Spotlight
Micro interactions with a purpose.
Sliding Tabs
User control and correlation to real world.
Organize and prioritize with one tap to see what you want, when you want. 
Overlay Confirmation
Provides user with system feed back confirming message has been sent.
User control to continue exploring or return to homepage
The confirmation also provides a timeline and method in which they will receive a response ; setting user expectations.
The Handoff
Using Figma's collaborative feature, we were able to grant direct view access to our web dev team which. Together we reviewed how to access relevant assets/files and use of the inspect tool to locate CSS. During our handoff meeting we also  conducted a full walkthrough of the prototype to showcase flows and interactions.
 Team Check Ins 
Communication is key! Daily stand ups with the web development team allowed us to share insights, progress, and troubleshoot any blockers as a team.
The Launch
December 3 2020
Our web development team did an amazing job by bringing life to the design. They encountered some limitations in execution because they were currently also student in bootcamp.
The Future of Local Hero

This is just the beginning. 

Local Hero will bring..
User dashboard to provide a personalized and easy to access base for every user.
Notification settings + reminders for city events
and much more..

If not available above please use link below for FULL PROTOTYPE

You may also like

Back to Top