FerndaleMi.Gov Redesign
City of Ferndale's Website
Redesigning the Information Architecture of the
Overview
Ferndale is experiencing significant growth and urban development within the city. The city's website serves as a valuable communication tool for businesses, residents, and visitors. Evaluating the state of the current website, concerns related to user-friendliness, navigation difficulties, and the presence of disorganized and outdated content have become a source of frustration for residents and city personnel.
​
Redesigning and reorganizing the city website navigation to reflect the user's mental model, increases self-sufficiency in site navigation, and functionality, allows users to find vital information and resources, lessens the burden of city staff, and improves the overall user experience. With a more streamlined and transparent navigation system and a well-structured information architecture for the foundational city website, Ferndale’s Community & Economic Development Department is in a better position to develop the Open in Ferndale business website and address the requirements of its intended user base.
Role: UX Researcher
Skills: Information Architecture / Interviews / Card Sorting /Heuristic Evaluations/ Personas / Site Map/ Medium Fidelity Website Prototyping
Duration: 16 Weeks
Tools: Figma /Miro/ Qualtrics/ Octopi
The Brief
The City of Ferndale's Community & Economic Development Department expressed an interest in developing an offshoot website: Open in Ferndale; aimed towards businesses to provide resources, support, and promote business investment in the city. However, upon closer examination, it became evident that there was a significant overlap in content between the main city website and Open in Ferndale, along with usability issues in the overall system's architecture. Through interviews and data collection, it became apparent there were underlying problems that needed attention on the city's primary website. Users were frequently reaching out to city staff rather than utilizing the website for the resources they needed.
​
As a result, the project scope shifted toward addressing the main usability problems on the city's website. Given the substantial number of users seeking a wide variety of resources and information on the main site, it became crucial to resolve these issues before progressing with the development of the offshoot website.
Residents
Visitors
Small Businesses
Large Businesses
Discovery Research
Heuristics Evaluation
Our team assessed the design of the primary city website, the Open in Ferndale site, as well as other city websites to pinpoint usability challenges and best practices that could be implemented on Ferndale’s websites.
Primary City Website
Open in Ferndale Website
One of our early actions was to do a heuristic evaluation to parse through and identify significant problems that may be occurring within the interface of the Open In Ferndale site. We used the metrics of Nielsen's Usability Heuristics and had each team member conduct an evaluation. Our team proceeded to consolidate applicable best practices from other city websites (including LA, Denver, and Boulder) as part of a competitive analysis.
Top Heuristics Findings
User Control and Freedom 3/10
Smooth site navigation is not feasible as the previous and next arrows fail to function.
Additionally, some back buttons redirect users to a different page rather than the one they were previously on.
Clicking on some pages causes a dead-end as users have entered a different website.
Consistency and Standards 4/10
Two distinct websites interconnect without any prior warning to the user they have left the previous site.
​
Both websites share similar colors and information, but the format undergoes an abrupt change.
​
Upon opening a page like "Board of Commissions," selecting "Back to Home" redirects users to a different section instead of the previous one.
Recognition vs Recall 4/10
At times, there is a footprint trail to assist users in recalling their location on the site. Nevertheless, it disappears intermittently and is not consistently available on all pages.
​
The navigation systems undergo changes across various sections of the site causing difficulty for users to find their way back to sections.
Flexibility & Efficiency of Use 3/10
There is no mechanism to expedite processes for regular users, such as for business owners or residents paying bills.
Discovery Research
User Persona
Our next step was to identify the pages and resources with the highest traffic on the city website by looking at the site’s data analytics. Using this data, I created a user persona of Sarah Miller, a new resident and business owner in the Ferndale Community.
Case Studies
Using our person I created case studies to identify common issues that an ordinary citizen or business owner potentially could face while navigating Open in Ferndale.
Exploratory Research
Information Architecture
As there was no site map for our team to access, I created the information architecture of Open in Ferndale to identify any overlap with the primary city website, dead ends, external reroutes, and repetitive content. It was at this stage we discovered that in order for Open in Ferndale to be developed, the internal problems of the city website would need to be addressed first due to Open in Ferndale opening pages from the primary website. Users would not know they are encountering two different websites.
Primary Site Map
Secondary Menu Navigation
Qualitative Research
Interviews
Our team interviewed five members of Ferndale’s city staff across the Communication Department and the Community and Economic Development Department team to understand their goals and priorities for the primary city website and Open in Ferndale, as well as their thought process during the construction of both websites. In addition, we interviewed five current Ferndale residents with experience on the primary city website to understand their current pain points and mental models on the website.
Resident Interview Quotes
The search engine doesn't work, I have to be super specific, I can't find new stories and links don't work" -P1 Interviewee
​
It's not user-friendly at all, it's hard to find what I want. I use the Facebook pages instead."
-P3 Interviewee
City Staff Interview Quotes
The current website is a rabbit hole.
-Staff 1 Interviewee
The original purpose of Open In Ferndale was for businesses to see what Ferndale has to offer, what business resources are available, and professional development, except it ended up being a website that had duplicated content on both.
-Staff 2 Interviewee
It's not clear what the purpose of Open in Ferndale is for if it's focusing on businesses or residents.
-Staff 4 interviewee
A common theme appeared to be confusion between the two websites and their intended purposes. The primary website proved challenging to navigate for both residents and city staff. Residents resorted to alternative channels such as community Facebook groups to stay up to date, while city staff frequently received calls from business owners and residents seeking assistance and information such as locating details for water bill payments, and so on. Resulting in city staff having to turn their attention to attending phone calls daily.
Qualitative Research
Cardsorting
We engaged in a card-sorting activity with 5 current Ferndale residents to find out how they would intuitively group and label the existing content on the primary website.
Cardsorting Results
Design Research
Ideation
After consolidating all our research and conducting an internal review of the primary site and Open in Ferndale, we identified the high-level concerns that were responsible for the usability challenges these websites are facing. By allowing the website to be easier to navigate, citizens could be more self-sufficient and would decrease users having to consult the city’s other communication channels, manned by city staff.
Match Between Systems & Real World
Users frequently select misleading headers, leading them to web pages that lack the desired information or expectations.
Header: Visit 8 Mile Boulevard Association Website
Users believe they are on the correct webpage, but find themselves encountering challenges accessing the content, due to expired or inaccessible content.
Closed Survey Available on the Website
User Control & Freedom
Users encounter unexpected external websites with no means to navigate back to the city website.
Pay your Water Bill
Recognition VS Recall
Users choose to utilize the search bar to locate resources but encounter the problem of navigating through numerous advertisements and search results.
Search Term: Water Service
Mid-Fi Prototype
We developed a mid-fi clickable prototype for our client. We focused on 3 tier navigation, footprints, and consistent structure across all pages.
Design
Site Map
I developed a new information architecture based on the card sorting results, that re-organizes all the content provided on the primary website in a way that best matches the average user’s mental model. The client was provided with an editable information architecture made on Octopus.do as well as a written structure to serve as a guide.
Octopus.do Site Map
Design
Prototyping
Due to contractual limitations imposed on the website, extensive changes could not be made. Our solution had to use similar element structures. However, within our prototype, we structured all of the content on the primary website, which creates a more clear, distinct
purpose for each section of the entire site. This paves the way for future additions to the site without compromising the existing foundation, avoiding overlaps, and is less likely to cause confusion regarding the purpose of each section.
​
By implementing the updated information architecture, we developed a mid-fidelity clickable prototype for the client. This prototype incorporated usability solutions used to enhance user-friendliness and functionality, addresses the navigation issues identified by all users, simplifies the process of locating crucial information and resources, and empowers city staff to efficiently organize content when updating and expanding the site.
Original Primary Website
Original Global Navigatio Menu
Secondary Navigation Menus
Tertiary Navigation Menus
01
02
03
Footprint
Design Decision 1
Three new levels of navigation help improve the organization and discoverability of resources on the main website without requiring the use of the search bar. All navigation is fixed on the page and visible at all times as the user scrolls, so the user can quickly find the information they need without having to use the search bar or rely on city staff. This improves the consistency and standards across the website and efficiency.
Prototype
01
The first level of global navigation is similar to what the current website already has, except with different titles. Our team re-grouped the global navigation into “Community Activities,” “Resident Resources & Services,” “Business Resources & Services,” and “Government.”
02
The second level of navigation mirrors the tabs currently used on one of the sections of the main site. For each global navigation section, there are now higher-level subcategories for users to choose from.
03
The third level of navigation is positioned beneath each secondary navigation tab on the left side, enabling the city to further segment and categorize information according to each subsection.
Design Decision 2
A footprint is at the top left of every page, to show where on the site the user currently is, and what they clicked on to get there. This footprint is also fixed at the top of the page as a user scrolls so they always have information about what part of the website they’re in and are less likely to become lost or overwhelmed. The footprint is clickable, so the user can easily navigate backward if needed.
Design Decision 3
Unlike the current website, the new design has a more consistent layout on every single page. This increased consistency preserves the visibility and functionality of all the new navigation and also reduces confusion for the user by keeping things predictable and
allowing the user to develop reliable expectations of how the website will look and act. The improved consistency and increased dependable nature of the website builds trust
with the user and improves the users’s overall experience not only on the site but with the City of Ferndale.
Design
Next Steps
Conduct User Testing
Given the time and communication limitations we encountered in this project, we recommend conducting user testing on the website designs to validate that content and web page structure allow users to independently navigate the site. As a team, we stressed the significance of user testing and provided the client with the necessary materials, including a sample user testing script, to aid their understanding of the process.
Design with Accessibility
To promote equal access to the City Website, it is imperative that the redesigns prioritize content accessibility. As the scope of our project, we developed a lo-fi mid-fidelity prototype primarily using grayscale as the existing website has accessibility violations. We’ve compiled resources and provided methods for the client to reference when commencing the accessibility improvement process.
Link for selected tab on global navigation
Green backgrounds for the Common Requests section do not contrast white text well.
Search button on Home Page
Announcements on Home Page
Sustainability
To viably execute and implement the improved information hierarchy and navigation of the city website, city staff should take the next steps to meet the timeline of the current website’s contract termination. Given that a new contract with a new host is estimated to begin in 2023, the Communications team should anticipate submitting a proposal for funding to the City Council in the upcoming year to accommodate the time and resources it takes to hire a new contractor and negotiate prices for rebuilding a website.
The Team: Safa Viqar, Grace Song, Marivi Sifuentes, Shannon Kenny
