Civic Website Redesign:
Optimizing the search for programs and services on a civic website
The website allows users to search for local youth and community programs and services and apply to them.
A peek at the final prototype
Check out this recording of the prototype I presented to an internal focus group of city employees.
Project roadmap
_edited.png)
Chart showing the project roadmap
Timeline
-
September - December
My role
-
UX/UI Designer, outside contractor
-
Collaborated with Chief IT Architect, Senior Systems Integration Specialist, and Software Developer
Users
-
Families, often parents or guardians, signing a child up for a program.
Deliverables
-
875+ users surveyed
-
1 user flow
-
6 responsive screens
-
Low-to-High-fidelity wireframes
-
Updated style guide
-
Prototype
The survey wasn't sent out on schedule and timelines had to be revised
I met with the team before the intended project kick-off to develop the roadmap and to create a user survey.
Despite our preparations and due to circumstances beyond our control, the survey was not sent out on time. This had a ripple effect on the rest of the project’s deadlines and it was challenging to get the project back on track.
What did the current users think of the website?
The survey ran from September to October.
The purpose of the survey was to better understand how people use discoverDYCD and how could we improve the website and application process.
38,000 people received the survey and 892 people responded.
Chart showing that most people used the site for their children
Our survey participants struggled with the search and filters, the mobile experience, and with lack of application follow-upt
Original search and filter features
“When you use the filters to narrow the search you get no results. When you don't use them you get too many results.
Had to know the exact name of the program to successfully find it.”
Survey participant on using the search and filters
My recommendations
Improve appearance
-
Add hierarchy
-
Revise the layout
-
Make navigation clearer
-
Meet accessibility standards
-
Create mobile-friendly screens
Streamline application
-
Write clearer instructions
-
Reduce the number of questions and steps
-
Autofill information
-
Save progress
Update search and filters
-
Allow keyword searches
-
Organize and simplify filters
-
Search by zip code
A more detailed dashboard
-
View saved programs
-
Access application drafts
-
See submitted application status
-
Receive notifications
-
Check waitlist information
Strategizing the redesign
After presenting the survey results and my recommendations to the team, we decided the application would need more nuance to update it because it had a lot of rules and requirements.
So, we focused the redesign on updating the home page and the search and filtering of programs so that users could find the programs and information they need.
Early sketches
Designing the home, search, and program detail pages with a focus on usability and accessibility.
The original home page
Mockup of the home page before the redesign
The original home page:
-
Had unclear navigation
-
Lacked hierarchy
-
Didn't meet accessibility standards
-
Was visually overwhelming
-
Didn't explain the purpose of the website.
The low-fidelity home page
_edited.jpg)
Low-fidelity wireframes of the desktop and mobile home page screens with notes
The new home page had:
-
Clearer navigation
-
Improved layout and hierarchy
-
Information about the department, programs, and how to apply
-
Mobile-friendly
The original search page
Mockup of the search page before the redesign
The original search page:
-
Lacked hierarchy
-
Didn't meet accessibility standards
-
Was confusing
The low-fidelity search page
Option 1
Option 2
_edited.jpg)
Two options of low-fidelity desktop and mobile wireframes search screens with notes
The new search page had:
-
An organized filter section
-
Option 1: as a modal
-
Option 2: always showing on the screen
-
-
List and map views
-
Cards with quick summaries of available programs
The original program detail page
Mockup of the program detail page before the redesign
The original program detail page:
-
Lacked hierarchy
-
Didn't meet accessibility standards
-
Lacked a clear call to action
-
Had large blocks of text making it unreadable
The low-fidelity program detail page
Low-fidelity wireframes of the desktop and mobile program detail page screens with notes
The new program detail page had:
-
Clear hierarchy and layout
-
Content divided into easy-to-read sections
-
Prominent "Apply Now" button
Client feedback on the initial wireframes
The clients preferred the search page with the filters always visible on the left side of the screen.
Some call-outs were:
-
The home page needed an image carousel showing the variety of programs offered by the city
-
Rearrange some of the filter options
-
Listing the program sponsor first on the cards
Low-fidelity wireframes of the search screen with the filters circled
Revising the website's style
Improving accessibility with color contrast
To meet Web Content Accessibility Guidelines (WCAG), I chose tones of the department's brand colors to have more contrasting options.
This allowed me to create buttons and other UI with enough color contrast to be easily readable.
Color palette for the redesigned site
Choosing the right font
I chose to use Myriad VF from the department's brand guideline options because the sans-serif font is easy to read.
Typography guidelines from the city
I created all new UI for the revised site's style guide and design system. Here are some examples:
The final designs
Mobile mockups of the home, search, filter, and detail pages
A more thoughtful home page
Clear navigation
Hero section with a description of the department
About section with a
carousel of images
Explanation of the programs and services offered
The steps to apply for programs and services
A sample of nearby programs
A cleaned up footer section
An organized way to filter and search programs
A search bar and instructions at the top of the page
A dedicated section for filters
Cards with the most important program details
An easy to read program page
Basic program details and apply button
No large blocks of text!
Separate cards for overview, activities, eligibility, etc
Multiple apply buttons so user doesn't have to scroll back up
More program options
Words of praise
"Sarah’s ability to translate research into actionable design was one of her greatest strengths. She created and prioritized user flows, developed low- and medium-fidelity wireframes, and built a functional prototype for usability testing.
Her review sessions with DYCD were thoughtful and well‑structured, and she iterated on the design, often in real-time, based on user feedback.
By the end of the engagement, she delivered a complete suite of high‑fidelity wireframes and transferred all design artifacts to support developer implementation."
-Michael Bacarella
Chief IT Architect leading the project
Something I would do differently...
I really enjoyed working on this project and partnering with the team to redesign their website.
My biggest challenge came during the hand-off to development. I found out during the hand-off that the development team couldn't use the font from the brand guidelines because it wasn't open source. Had I known this sooner, I would have chosen and designed with a different font.
In the future, I would insist on working with the development team earlier to better understand their needs and any limitations they had to make sure the hand-off goes smoothly.
If I were to continue on with this project, I would love the chance to update the application process to address some of the survey participants' concerns like reducing the number of steps.
