“Website redesign to streamline the service submission request to help DC.gov communicate with its customer more effectively.”
ROLE
User Research | Visual Design
Conducted user interviews, competitive analysis, card sorting and usability tests, created SWOT analysis.
Sketched out the whole pages.
Redesigned homepage and category pages.
DESIGN TOOL
Axure
BACKGROUND: Through non-emergency city services system DC 311 that elevates real-time support, highlights important alerts and spotlights city services statuses intuitively, our client DC government would like to communicate more effectively with 311 customers.
PROBLEM: DC residents and visitors need a way to understand and access the service request system at their convenience because they want to have their city concerns addressed simply and promptly.
SOLUTION: By redesigning DC 311 website with a focus on clarity and ease of use, we will achieve increased understanding and satisfaction of the 311 service request process.
METHODS
Research
Screener Survey
User Interviews
Affinity Mapping and Synthesis
Usability Testing with the Current Website
Card Sorting
Competitive Analysis and SWOT Analysis
Ideation with Storyboarding
User Flows and Site Mapping
Sketching and Wireframing
Low Fidelity Paper Prototype and Testing
Axure Prototype
Usability Testing and Iterations
FINAL DELIVERABLES
Research Insights
Competitive Analysis and SWOT Analysis
Storyboard
User Flows and Site Map
Paper Prototype
Usability Test Findings
Clickable mid-high Fidelity Prototype in Axure
TIME: 16 days
BEFORE
AFTER REDESIGN - AXURE PROTOTYPE
REDESIGN JOURNEY OF DC311
Research and Synthesis
User Research
Usability Testing
Competitive Analysis
Key Product Features
Paper Prototyping and Testing
RESEARCH & SYNTHESIS
We had to know users’ relationship to 311 services and their experiences.
SCREENER SURVEY
We filtered out DC residents and frequent visitors who had used 311 in DC or in another city.
IN-DEPTH INTERVIEWS
Interviews with 16 people from our screener survey.
INSIGHTS
Low awareness of 311 service: 26% of our respondents have never heard 311 service before.
Low level of 311 usage: Only one quarter of them used it before.
Main channel used to reach out 311 is phone/calling, implying a low level of website and app usage.
INSIGHTS
General idea of 311: place to get general info about local city services and updates.
Expectation from 311: takes requests, handles them properly.
Expectations are mostly fulfilled by the current system.
A couple of difficulties about users’ experience with 311 website.
“I had difficulty in reporting things with no clear category.”
“There were a lot of extraneous pathways, I remember having to connect to many paths to get to the solution.”
USABILITY TESTING
These quotes above led us to zoom in this area to have a broader understanding of ongoing problems with the current DC 311 website. So we decided to do some usability tests.
MAIN PROBLEMS DISCOVERED
Difficulty to navigate
Difficulty to find a specific service request due to lack of categories and invisibility of search field
Trouble to use the service request map
COMPETITIVE ANALYSIS
By looking at what other cities are doing, we revealed shortcomings of DC 311 website and potential opportunities.
COMPARISON OF MAJOR CITIES
Most of the cities in our analysis have the attributes, shown in yellow in the table below, in their 311 websites, but DC lacks.
SWOT ANALYSIS FOR DC
We summarized all in a SWOT analysis in which we spotted the weaknesses and opportunities for DC compared to other cities.
KEY PRODUCT FEATURES
Before moving on with sketching, we wanted to determine what main features DC 311 website should include based on our research. We tried to address our insights and findings with features below.
PAPER PROTOTYPING & TESTING
After having two runs of sketches and wireframes, we wanted to test our design and features with a paper prototype before investing more in that. We completed five users tests with our low fidelity paper prototype.
PAPER PROTOTYPE
TESTING WITH PAPER PROTOTYPE
FEEDBACKS
Needs clearer and easier navigation controls. Users had difficulty to go back Home by using the DC 311 logo.
Needs clarity in wording/terminology in several places.
CHANGES
Added a “Go Back Home” button in all the pages.
Changed “Submit Requests” to “Submit Service Request”.
Changed the text in “How We Work” to tell the process in steps.
Changed “Submit” on a drop down menu to “Create a request”.
Changed “Open Status” while checking status to “In Progress”.
REFLECTIONS
This was the story of streamlining the process between residents & DC Government. The one and only guide during this whole process was our users. We tried to solve the problem by zeroing in on our users, their needs and feelings. In each and every phase, we just consulted to their feedback and provided justification for all our moves in our design. We not only tried to streamline the link to government in terms of functionality, but also tried to engage our users with a smooth and enjoyable experience.