Overview
My Role: UX/UI Designer
Duration: 3 months
Summary: Design a better experience for people who want or need to access information about their local government and its services by creating a responsive website that works for both desktop users and mobile users.
Deliverables: Research, customer journey map, persona, site map, wireframes, prototypes
Tools: Figma, Sketch, Miro, Axure
Challenge
My team was asked to create a responsive website for a city of our choice. This website should provide people with a better digital experience using modern tools and technologies as they access relevant information about their local government and its services. The goal is to create a sleek and useful product for mobile use that the widest array of people from different demographics can successfully use.
Empathize
Research Plan
Our goal is to create the mobile version of a local government website that is resourceful, easy to use, and services the needs of the people.
Questions:
What intimidates users when using a government website?
What are the common errors new users make when visiting their local government website?
What are the user's pain points or one main frustration? (DMV, Food Services, Taxes, etc.)
What is the learning curve for a new user on a government website?
What are the mindsets of users when they search for information on a government website?
What kind of information do they seek?
What is the best way to organize information for transparency?
Are there any specific aspects of the websites that are enjoyable?
Why would users access the local government’s website through mobile?
What are the biggest pain points of accessing mobile websites?
Research Objectives:
Determine what government services most people are searching for, in need of, or currently using
Conduct extensive user interviews and a survey to accrue nuanced user feedback
Understand a user’s entire experience of accessing a government website on their mobile phone: where do they access the website from, navigating the online options on a mobile layout, filtering through various options, etc.
Hone in on what processes need improvement
We used the following primary and secondary sources for data gathering and research.
Competitive Analysis:
Insights
Key features we would like to incorporate into the final design include Top Requests, Create & Track a Request, Emergency Announcement Banners, Personalization, City Directory.
User Interviews: We vetted 15 people and chose 12 people to interview who use mobile phones to access local government websites and seek different kinds of services/information.
Insights:
Due to the pandemic, most users are seeking out unemployment application information.
Users consult with outside people/resources/sites to help them navigate government resources.
Users like a site that is clearly laid out with important and current information at the top/easy to see.
Users enjoy the ability to access real-time information through their mobile phone.
Users are interested in paying in bulk (i.e. parking tickets, taxes, etc) feature.
Survey: The survey was sent nationwide via social media and direct email. We received over 30 responses from people across various demographics. (Age, Gender, Income Levels)
Insights:
People access government websites for current events (i.e. COVID-19), Unemployment Information, Voter Registration, DMV, and health human services.
Most people do not access government sites through their mobile phones.
Most people were able to find the information they were looking for.
User ratings of their experiences using government websites are pretty evenly spread.
Define
Time to analyze the insights gathered from our interviews and survey.
We practiced a user-centric approach to this project. We highly involved users in every phase of this process. We learned valuable information about user needs and motivations, and their relationships with government websites. Understanding user insights is important in designing a highly usable and accessible product.
We drafted a simple tally to visually demonstrate which government services were the most essential to our users.
We chose the top six services users mentioned and narrowed our focus on the following content/services for our product:
COVID-19 related services
Food Stamps
Create A Request (for a city service)
Unemployment Information
DMV Services
Pay Online
We synthesized our findings into a goal-directed persona (Ginger) that would serve as a real-world example for our customer journey map. Ginger recently lost her job as Marketing Manager due to the pandemic. She’s having a hard time navigating the government website and wants to obtain information quickly regarding filing for unemployment.
Persona
Customer Journey Map
Before diving into building our wireframes, we created a site map to make sure our team vision was aligned as to what the content and services of our product would be.
Site Map
Design Decisions
Before moving forward into ideating, we set a clear user need statement:
People who use local government websites need an easy way to access essential information and timely updates through a responsive site.
Our design took into account the following governmental principles:
Transparency
Convenience
Participation
Solutions
We produced three divergent concepts. They were fleshed out into paper prototypes showing three user flows for our site, YONYC.org:
A user searching for information regarding school closures due to the COVID-19 pandemic.
A user searching for information regarding applying for unemployment benefits.
A user searching for a COVID-19 test site.
We chose to pursue the second concept, assistance for people applying for unemployment benefits because our research indicated that this would be the most essential service presently due to the ongoing pandemic.
Currently, users are having a difficult time managing all the information needed to file for unemployment and obtain their benefits. This flow minimizes the need for users to website hop by providing them with a checklist detailing all the information needed to file a claim for unemployment.
Lo-Fi Wireframes
Usability Testing - Mid Fidelity Prototype
Our objective in the usability testing was to gather feedback on the flow, navigation, and content of YONYC.org.
Insights
Users enjoyed the layout and found the flow easy to follow.
Users noted the color palette felt refreshing and approachable.
Users found the site helpful and would recommend it to a friend.
Recommendations
Forgot password option and multiple ways of logging in is important to users
The live chat icon needs to be more noticeable and its function needs to be apparent to the user
Verbiage should be more clear and encouraging, particularly for first-time users
Emphasize to users that they are not filing their claim through this website, but rather, preparing all necessary items so that later they would be able to easily file their claim.
Increasing Fidelity: Government websites tend to look outdated and make users feel overwhelmed. YONYC’s UI design is sleek, minimal, and modern. Our goal was to keep the interface friendly and accessible for all types of users.
Style Guide
Learnings
WHAT WE DID WELL
We created a government website that is easy to use, easily accessible on a mobile phone and resourceful.
YONYC’s user interface design feels approachable for adults of various ages.
The home page displays the most popular services front and center.
We hyper-focused on feedback from interviews and surveys to build a user centric product.
We created a checklist that would serve the needs of people applying for unemployment.
FUTURE RECOMMENDATIONS
Our research showed that the second most important service to users was the ability to check real-time updates for EBT (food stamps) card balance so we recommended building that part of the site next.
Create other flows such as paying online in bulk (parking tickets, vehicle registration, etc).
Make the live chat option more visible to users by possibly animating it or changing its placement and continue to test this feature.