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"
Personas
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
Sitemap
Sketches
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
Visuals
Representative of real people to create connection for user
Typography
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
Mockups
Final Versions
Prototype
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
Heatmapping
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
https://www.figma.com/proto/1vkIljQ9c3uNJRY84QTJ0F/FINAL-COPY-LOCAL-HERO-DOC?node-id=540%3A11024&scaling=scale-down
