Role
Industry
Duration
The City of Longmont, Colorado needed to redesign its website to better serve its community, addressing critical issues like outdated navigation, inconsistent information, and accessibility barriers. The existing site struggled to effectively support residents in accessing services, businesses in finding regulatory information, and city staff in managing content. Additionally, visitors faced difficulties navigating and discovering local attractions.
The new website aimed to create a more user-friendly, accessible, and engaging digital platform that aligns with the city's strategic goals of operational efficiency, community engagement, and improved service delivery for all stakeholders.
Problem Statement
How might we create a more intuitive, accessible, and user-friendly platform that meets the diverse needs of all stakeholders, ensuring efficient service delivery and enhancing community engagement?
Discovery and Research
Our discovery phase for the City of Longmont website redesign focused on understanding user needs, pain points, and behaviors through various research methods, including stakeholder interviews, usability testing, and data analysis.
Methodologies Used:
Stakeholder Interviews and Brainstorming
Stakeholders identified the website's primary goals: improving communication, sharing information, and making city services more accessible. Key challenges included navigation difficulties, inefficient CMS functionality, and inconsistent information. The goal was to create a user-centric, accessible platform that better served residents, businesses, visitors, and staff.
Usability Testing
Usability testing of the live website revealed major issues:
Navigation struggles (57.1%) and content inconsistencies (23.8%) frustrated users.
Accessibility concerns (14.3%) related to ADA compliance were raised, along with the need for a mobile-first approach due to poor mobile usability.
Google Analytics Findings
Data highlighted high traffic on the homepage, recreation, and library sections but poor retention from mobile users, who spent 40% less time than desktop users. This reinforced the need to optimize the mobile experience.
Hotjar Videos Analysis
Click patterns showed users struggled to differentiate between clickable and non-clickable elements. Poor content visibility and confusing categorizations further underscored the need for improved navigation and content hierarchy.
Similar Sites Analysis
Benchmarking against municipal websites revealed key takeaways:
Clear navigation with labeled pathways reduces frustration.
Card layouts and grid systems improve content discoverability.
Mobile-first design ensures a seamless experience across devices.
Key Insights
Improving Navigation: Clear, intuitive navigation with well-labeled pathways is essential to reducing user frustration.
Mobile Optimization: A mobile-first approach is critical to enhance user retention and ensure seamless accessibility across devices.
Content Organization: Better content categorization and structure, supported by intuitive design, improves overall discoverability and user experience.
These findings informed the new design strategy, leading to a user-centric, accessible, and mobile-optimized platform for Longmont’s diverse community.
Ideation and Concept Development
Creative Concepts:
During the development of the City of Longmont's website redesign, two creative concepts were explored:
Concept A
This concept aimed to blend the welcoming essence of the community with a focus on service delivery. It embraced a modern aesthetic while preserving Longmont’s heritage. The design aimed to create an online experience that increases engagement, strengthens community ties, and improves information accessibility. Vibrant colors and intuitive layouts were used to reflect Longmont's spirit, enhancing usability and guiding users through the site.
Concept B
Concept B focused on simplicity and accessibility, offering a welcoming user interface that highlights Longmont's modern, forward-thinking ethos. It emphasized ease of use, approachability, and inclusivity, making the digital experience inviting and easy to navigate. The design utilized softer, monochromatic colors to create a friendly and engaging environment, fostering a sense of connection and community involvement.
Both concepts aimed to enhance the website’s functionality while reflecting Longmont's identity and values.
Based on client feedback, a mix of concept A and B was implemented in the final designs.
Card Sorting Activity for Services Categorization
During the City of Longmont website redesign, a Card Sorting activity was conducted with the Public Information Team to improve the website’s information architecture.
Purpose:
The goal was to understand how different sections of the website should be grouped together based on user expectations and logical content relationships.
Key Insights:
The activity revealed how users perceive relationships between different content types, helping identify natural groupings and priorities for information presentation.
Impact:
These findings directly influenced the refinement of the website’s structure, ensuring that content was organized intuitively, which laid the foundation for a more streamlined information architecture in the next steps of the project.
Information Architecture
These two information architecture systems were developed based on insights from user research, stakeholder interviews, and card-sorting exercises. They aim to address the distinct needs of City of Longmont’s user groups, balancing decentralized content ownership (System A) and centralized content management (System B) to optimize information accessibility and user navigation.
System A: Segment-Forward Approach
Concept:
This system organizes content based on user segments (e.g., Residents, Businesses) and allows departments to maintain ownership of their specific content. The system integrates Contextual Pages that tailor content to user scenarios or needs (e.g., services most relevant to a segment).
Key Features:
Decentralized content management: Each department manages its own content.
Contextual Pages: Highlight relevant services based on the user segment’s experience.
Departmental Pages: Focus on service delivery, linked to Contextual Pages.
Opportunities:
Tailored experiences for specific user groups.
Storytelling approach for how services align with departmental initiatives.
Enhances cross-promotion of services that fit a user’s context.
Risks:
Potential duplication of information across Contextual and Departmental Pages.
Risk of dependency between Contextual and Departmental Pages, requiring updates in multiple places.
System B: Segment-Forward Approach
Concept:
This system revolves around centralized content management, with the Communications team overseeing all content. Core Content Pages are tagged with taxonomies (e.g., Departments, Services), allowing users to navigate through taxonomies and access content without duplication.
Key Features:
Centralized ownership: The Communications team manages all content.
Core Content Pages: Singular source of information tagged with multiple taxonomies (Departments, Services).
Flexible navigation: Content is accessible via taxonomies, enabling dynamic content organization.
Opportunities:
Singular, non-overlapping source of information.
Flexible taxonomy management for easy content reassignment.
Guided navigation from broad topics to detailed themes.
Risks:
Users may need to know what they are looking for within taxonomies.
Taxonomy management is crucial to avoid confusion and maintain organization.
Conclusion:
Both systems provide robust methods for managing city information, with System A offering a more segment-focused approach that allows for personalized experiences, while System B uses a centralized model for streamlined content management and ease of navigation.
Design Phase
Wireframes:
The wireframe creation process for the City of Longmont website redesign focused on structuring key pages and laying the groundwork for an intuitive user experience. The process began by outlining the information hierarchy based on user needs and ensuring that important services—such as bill payment, service registrations, and event information—were prominent.
Key design principles that guided the wireframe development included:
Simplicity and Clarity: Creating clean, uncluttered layouts to help users easily navigate and access relevant information.
Content Prioritization: Ensuring high-priority content (e.g., city services and announcements) was placed strategically to improve visibility and accessibility.
Consistency: Applying uniform design patterns across the site to maintain a cohesive look and feel throughout.
Accessibility: Incorporating ADA compliance into the design, ensuring usability for users with diverse needs.
Mobile-First Design: Starting with mobile layouts to ensure the site was optimized for mobile users from the outset.
The wireframes were continually refined, ensuring alignment with user expectations and enhancing the usability of the City’s digital platform.
Wireframe Prototype Testing
The wireframe testing for the City of Longmont website redesign was conducted to assess its usability and effectiveness in providing a user-friendly experience.
Key Aspects:
Methodology: Five participants completed tasks such as locating specific information and navigating sections like "Services" and "News and Alerts." Observations and interviews were used to evaluate navigation ease, terminology understanding, and content discoverability.
Findings:
Users appreciated the intuitive layout of key sections, such as the "Public Library" and "Government" pages.
Challenges included confusion over terminology (e.g., “Utilities” for bill payment) and inconsistent navigation paths.
Users preferred robust search functionality over manual navigation and suggested clearer labeling for improved discoverability.
Recommendations:
Simplify terminology: Replace confusing terms like "Utilities" with more descriptive, user-friendly labels.
Improve navigation: Standardize navigation paths and add visual cues for frequently accessed services to enhance user experience.
This testing process provided critical insights to refine the wireframes, ensuring a more intuitive and accessible website structure.
Flexible Templates and Content Blocks
To ensure maximum flexibility for the City of Longmont’s website, we designed templates that accommodated fixed content types alongside modular content blocks. These blocks allowed the Longmont team to manage content dynamically, customizing the structure of each page to fit their specific needs without compromising the design integrity.
Flexible Templates: These provided a consistent framework for key content types, ensuring uniformity across the site while allowing the team to easily adjust or update content.
Modular Content Blocks: Developed with design goals in mind, these blocks allowed for diverse content presentation, enabling the team to build pages tailored to different user needs, services, or campaigns. The modular structure ensured seamless user experiences across all sections of the site.
This design approach provided Longmont with the flexibility to manage and update content as they wished, while maintaining a cohesive and user-friendly design throughout the website.
Handoff to Development Team
The handoff process was straightforward and efficient, ensuring the design was effectively translated into development. Key steps included:
Figma-Based Handoff:
The handoff was done directly through Figma, where developers had full access to all design files. These files included:
Design components, such as layouts, icons, and typography, which were well-organized and labeled for clarity.
Interactive elements, with notes in Figma highlighting hover states, transitions, and interactions for easy developer reference.
Design System:
A consistent design system was established within Figma to ensure uniformity across the site. This included color codes, typography, and reusable components, all documented within the Figma file.
Team Collaboration:
Close collaboration between designers and developers during regular handoff meetings allowed real-time walkthroughs of the design, clarifying any functionality expectations or interactions.
QA (Quality Assurance) Process
The QA process, though conducted without automated tools, involved thorough manual testing to ensure the website met functionality, accessibility, and responsiveness standards.
Functionality Testing
Manual testing was conducted across all critical features, including links, buttons, and forms, ensuring they behaved as expected.
Each section was manually verified to ensure that interactive elements, such as dropdown menus, navigation links, and service forms, worked without issues.
Accessibility Testing
Manual accessibility testing was crucial to ensure compliance with ADA guidelines. The team performed the following checks:
Keyboard Navigation: Each page was tested to ensure all content could be navigated via keyboard, making it accessible to users who cannot use a mouse.
Color Contrast: Colors were reviewed manually against ADA standards to ensure proper contrast ratios for readability.
Alt Text and Labels: Each image and form field was manually checked to ensure it included proper alt text and labels for screen readers, improving accessibility for visually impaired users.
Form Accessibility: Forms were reviewed to ensure they had clear labels and were easy to navigate for users relying on screen readers.
Responsiveness Testing
The design was tested manually across a variety of screen sizes (mobile, tablet, and desktop) to confirm that the layout adapted well to different devices.
Breakpoints were manually adjusted and checked to ensure that text, images, and interactive elements displayed correctly and remained functional on smaller screens.
This thorough, hands-on QA process ensured that the City of Longmont’s website was functional, accessible, and responsive, providing an optimized experience for all users while adhering to the guidelines.
Key Learnings
Flexibility in Content Management is Crucial
The use of modular content blocks and flexible templates was essential in providing the Longmont team with the freedom to update and manage content as needed. This approach allowed for adaptability without sacrificing design consistency, making it a key takeaway for future projects.
Balancing Structure and Customization
While flexibility was a primary goal, we learned that maintaining a balance between fixed content types and customizable elements is vital. Fixed elements ensured uniformity, while modular blocks offered customization. This balance was critical in keeping the site both user-friendly and manageable.
User-Centric Design Enhances Usability
Throughout the wireframe testing and content development phases, we discovered that clear labeling and intuitive navigation are central to improving user experience. Addressing terminology and ensuring accessibility were significant learnings that will inform future projects.
Collaboration Between Design and Development is Key
The Figma-based handoff process and regular collaboration between design and development teams were instrumental in ensuring smooth project execution. Continuous communication helped clarify design expectations and allowed for real-time problem solving.
Accessibility Should Be Integrated from the Start
Ensuring the site was ADA-compliant from the wireframing stage through QA taught us the importance of integrating accessibility checks early in the design process. This proactive approach saved time and ensured the site was inclusive for all users.
