Ferndale Website Redesign
A reorganization of Ferndale’s city website to helps its citizens find integral resources more efficiently.
Project Duration: 4 months
Team: 4 UX Designers/Researchers
My Role: UX Designer & Researcher
Client: City of Ferndale, MI
C O N T E X T
Client Brief
Intro to Ferndalemi.gov
This is Ferndale’s city website, which acts as a catch-all website that houses public resources and information for the city’s 13,000 citizens. City government also relies on it as forum to inform its citizens about the latest news and announcements.
Residents
Visitors
Businesses
City Staff
The site is relied on by:
Issues with Ferndalemi.gov
The city of Ferndale, Michigan approached us because their residents were having trouble finding resources and information on their city website.
The city’s staff was spending a lot of time helping citizens with things that should’ve been covered by the website, and they wanted people to become more self-sufficient.
P R O J E C T O V E R V I E W
Problem
How might we redesign the Ferndale city website so that residents can find the resources they need?
Outcome
We reorganized the information architecture and navigation of the site into a clickable prototype. We passed this prototype over to Ferndale City Staff to implement.
O U T C O M E
Solution Preview
We presented city staff with a mid-fidelity prototype of the newly designed website, which we re-organized to match the mental models of Ferndale’s residents.
Design Process
User Research
User Interviews
Stakeholder Interviews
Solution Exploration
Heuristic Analysis
Comparative Analysis
Card Sorting
Deliver
Mid-fidelity Prototype
Site Map w/ new information architecture
0 1 | D I S C O V E R Y
User Research
Research Questions
1. What tasks do people currently use Ferndalemi.gov for?
Resident Interviews: Key Findings
2. What information do residents expect to find on the site?
3. What are people’s difficulties when it comes to finding what they need on the site?
Issue #1
Misclicks
The site’s navigation labels and information architecture don’t match users’ mental models, leading to inefficiencies and misclicks.
1. Interviews with Residents
Our interviews clarified the main problem buckets that they were facing as users.
Interviewee Information:
5 Ferndale residents between the ages of 30 and 60.
Lived in Ferndale between 1 and 30 years
Had previous experience using Ferndalemi.gov
Issue #3
Difficult to Redirect
The site lacks breadcrumb navigation so it’s hard for users to situate themselves within the site. There’s also no site map to reference, which makes it hard for users to redirect themselves if they click into the wrong page.
Issue #2
Outdated content
Users often encounter dead links or outdated content.
Staff Interviews: Key Findings
1. No Site Maintenance Plan
New pages are added on adhoc basis by multiple departments. Once added, pages are not reviewed because staff don’t have the organizational framework or capacity to maintain the site. No internal site map to reference.
2. Interviews with City Staff
We talked to the City’s Communication & Web Teams, who were primarily responsible for the site’s development and maintenance.
These stakeholder interviews revealed some insight into the origin of the site’s issues as well as clarified what our design constraints would be for this redesign.
2. Limited to one Parent Site
The city charter states that all government webpages and must flow up to the ferndalemi.gov parent, so the staff just kept linking new content and unrelated new microsites to existing pages, creating a bloated parent site.
3. Restrictive Developer Contract
Their current 3rd party developer allows limited layout options, and all proposed changes must be emailed to them for implementation. This meant that our redesign couldn’t differ drastically from their current site aesthetics.
Example Image:
The Woodward Ave. Action Association page is housed under “Locations” instead of “Organizations”
Example Image:
Users encounter live links to closed Community questionnaires like this one.
Example Image:
Users must rely on the browser’s back button to return to a previous page, because embedded navigation will redirect them to the wrong place.
0 2 | D E V E L O P M E N T
Solution Exploration
1. Product Assessment
Heuristic Analysis
Heuristic analysis confirmed navigation issues.
Business, government, residential, and circumstantial (COVID) resources are mixed in together.
Navigation menus types are varied and inconsistent across pages.
Comparative Analysis
Found framework to address the navigation issues found in Heuristic Analysis
Splitting content by user type is common for city websites, because it lets people with multiple user identities self-select based on their current need.
2. Card Sorting
Matching mental models
To assess resident’s mental models, we asked 5 Ferndale residents to do hybrid card sorting with all the navigation labels and page headers on the site.
Participants shared their screen over Zoom as they grouped, labeled, and arranged cards on a Miro board.
3. Information Architecture
Recategorizing Content
Based on our product assessment and card sorting results, we reorganized all the content in Ferndalemi.gov
We restructured the content to fall into 4 categories in the global navigation:
Community
Resident Resources & Information
Business Resources & Information
Government
0 3 | D E L I V E R
Solutions
1. Redesigned Navigation Menus
Before
Varied and Inconsistent menu types across the site forces recall instead of recognition.
Lack of footprint to situate users in the site.
Global nav that didn’t appropriately separate residential, business, government, and visitor resources.
After
The new navigation reflects how residents naturally search and access information on the website.
Visual consistency across all pages
Helps users be more self-sufficient and satisfied with their experience by limiting misclicks and encouraging efficient engagement.
2. Site Map with reorganized Information Architecture
We created a new site map that reflects the new information architecture we developed.
Before
No overarching site map or an organized framework to maintain and edit pages on the site.
After
Provides sense of visual hierarchy and realistic sense of “clicks” and layers involved
We hosted it on Octopus.do because it’s free and easy for the client to edit
Helps the client take stock of all the current content on their site and lets them systematically update and organize their site moving forward.
Take a closer look here.
Final Prototype
We integrated all of our changes into a mid-fidelity prototype we gave to city staff. The prototype would be sufficient to use for user testing and to serve as a blueprint for their developers.
Click through below or here.
Feedback
Lots of positive feedback from our client and the residents!
We presented our prototype to users at Ferndale’s Citizen’s Interaction Design Fair, show in the picture.
Residents and staff came up to our laptop to click through and test out the new navigation.
Next Steps
If I had more time
Conduct more interviews and card sorting sessions with businesses
Conduct usability testing on our prototype before implementation using the sample testing protocol we created here
Conduct an accessibility review for the current site
More Projects
D+ Trailer Rail
Humankind
