You Can Be The Next Local Hero
My Role: Lead UXUI Designer/Researcher Time: 3 week sprint. Team: 2 UXUI Designers 4 Developers
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.
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.
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
Lack of User Control
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!
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.
" 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.
Key Performance Indicators
# of searches for representatives
# of messages sent to representatives
# of Service requests submitted
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
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 | User Testing
Final Wireframe Preview
The Perfect Mood[board]
Inspired by traditional political colors these alternative tones create recognition without direct party affiliation
Gibson provides clear readability in addition to 16 fonts which facilitate clear hierarchy
Hero Background Image | Color Use | Font | Case
Click through the prototype by enlarging the screen.
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
Representative Results Evolution
Representative Profile Evolution
Micro interactions with a purpose.
User control and correlation to real world.
Organize and prioritize with one tap to see what you want, when you want.
Provides user with system feed back confirming message has been sent.
User control to continue exploring or return to homepage
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.
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