{"id":1,"date":"2024-09-15T17:37:14","date_gmt":"2024-09-15T21:37:14","guid":{"rendered":"https:\/\/patricklesage.ca\/portfolio\/?p=1"},"modified":"2024-09-25T00:02:34","modified_gmt":"2024-09-25T04:02:34","slug":"city-of-ottawa","status":"publish","type":"post","link":"https:\/\/patricklesage.ca\/portfolio\/city-of-ottawa\/","title":{"rendered":"City of Ottawa"},"content":{"rendered":"\n
Redesigning the My Service Ottawa dashboard and integrating a Search widget for key services.<\/pre>\n\n\n\n
Problem<\/h2>\n\n\n\n
Users visiting the City of Ottawa website were often overwhelmed by the sheer volume of pages and struggled to find essential services like garbage collection or parking information. They didn\u2019t know which search terms to use, and the lack of a clear navigation path resulted in frustration and slower task completion. <\/p>\n\n\n\n
Our challenge was to identify the most commonly searched services and make them more visible, ensuring users could quickly and intuitively find what they needed without getting lost in irrelevant content.<\/p>\n\n\n\n
\n
\n
\n
Solution<\/h2>\n\n\n\n
    \n
  • Improved navigation with 20% fewer clicks<\/strong> and faster task completion.<\/li>\n\n\n\n
  • Developed a responsive dashboard<\/strong> that was accessible (WET-BOEW, WCAG 2.0 AA) and mobile-friendly.<\/li>\n\n\n\n
  • Designed a prototype for a Search widget<\/strong> using Adobe XD and HTML mockups that could seamlessly integrate into the My Service Ottawa dashboard.<\/li>\n<\/ul>\n<\/div>\n<\/div>\n\n\n\n
    \n
    \"3<\/figure>\n<\/div>\n<\/div>\n\n\n\n
    \n
    \n
    Results<\/h2>\n\n\n\n
      \n
    • Significantly enhanced user satisfaction<\/strong> by streamlining key tasks like service requests and information searches.<\/li>\n\n\n\n
    • Delivered a style guide for frontend integration<\/strong> with detailed annotations for developers, ensuring consistency across all devices and adherence to accessibility standards.<\/li>\n\n\n\n
    • Although the Search widget required structural changes and was not implemented, the improved My Service Ottawa dashboard<\/strong> was successfully launched.<\/li>\n<\/ul>\n<\/div>\n<\/div>\n\n\n\n
      \n
      \n
      Team & Approach<\/h2>\n\n\n\n
      The project was split into two phases, with a multidisciplinary team working collaboratively across research, analysis, and design implementation.<\/pre>\n<\/div>\n\n\n\n
      <\/div>\n\n\n\n
      \n
      \n
      \n
      \n
      Phase 1: <\/h3>\n\n\n\n
      Research & Analysis<\/h4>\n<\/div>\n\n\n\n
        \n
      • Our team conducted card sorting<\/strong> sessions and funnel testing<\/strong> to understand user navigation patterns and identify pain points.<\/li>\n\n\n\n
      • We carried out interviews, surveys<\/strong>, and gathered web analytics<\/strong> to form a comprehensive picture of how users interacted with the My Service Ottawa dashboard.<\/li>\n\n\n\n
      • User research<\/strong> was at the core of this phase, helping us produce actionable insights that informed the next steps.<\/li>\n<\/ul>\n<\/div>\n<\/div>\n\n\n\n
        \n
        \n
        \"Screenshot<\/figure>\n\n\n\n
        \"Screenshot<\/figure>\n<\/figure>\n<\/div>\n<\/div>\n\n\n\n
        <\/div>\n\n\n\n
        \n
        \n
        \n
        \n
        Phase 2: <\/h3>\n\n\n\n
        Prototyping & Testing<\/h4>\n<\/div>\n\n\n\n
          \n
        • We collaborated closely with business analysts, developers, and City of Ottawa stakeholders<\/strong> to align technical constraints with user needs.<\/li>\n\n\n\n
        • Prototypes were developed and tested iteratively, ensuring a responsive and accessible design<\/strong> that met WCAG 2.0 AA standards built using WET-BOEW components.<\/li>\n\n\n\n
        • Workshops and consultations<\/strong> with the client helped refine the information architecture and confirm alignment with the City\u2019s broader goals.<\/li>\n<\/ul>\n<\/div>\n<\/div>\n\n\n\n
          \n
          \n
          \"navigation<\/figure>\n\n\n\n
          \"navigation<\/figure>\n<\/figure>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n
          \n
          \n
          My Role<\/h2>\n\n\n\n
          \n
          \n
          \n
          I led design efforts and supported user research by:<\/pre>\n\n\n\n
            \n
          • Creating wireframes <\/strong>and prototypes<\/strong> tailored to user personas.<\/li>\n\n\n\n
          • Facilitating workshops<\/strong> focused on information architecture, navigation, and user research.<\/li>\n\n\n\n
          • Delivering style guides<\/strong> with annotations for responsive front-end code based on WET-BOEW and WCAG 2.0 (AA) standards.<\/li>\n\n\n\n
          • Using Adobe InDesign to design a modular style guide<\/strong>.<\/li>\n<\/ul>\n<\/div>\n<\/div>\n\n\n\n
            \n
            \n
            Key Activities<\/h4>\n\n\n\n
              \n
            • Conducted in-person interviews<\/strong> and online bilingual surveys<\/strong> during the discovery phase to understand user needs.<\/li>\n\n\n\n
            • Produced wireframes <\/strong>and high-fidelity prototypes<\/strong> to validate design decisions, ensuring usability, device compatibility, and accessibility.<\/li>\n\n\n\n
            • Implemented click heatmaps<\/strong> on prototypes to evaluate the effectiveness of navigation and labels.<\/li>\n<\/ul>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n
              \n
              \n
              \n
              \"Annotated<\/figure>\n<\/figure>\n<\/div>\n\n\n\n
              \n
              \n
              \"Typography<\/figure>\n<\/figure>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n
              \n
              \n
              Insights & Impact<\/strong><\/h2>\n\n\n\n
              \n
              \n
              Through our collaborative research and testing, we:<\/pre>\n\n\n\n
                \n
              • Improved user understanding<\/strong> of how to navigate the City of Ottawa website.<\/li>\n\n\n\n
              • Created a user-friendly, customizable dashboard<\/strong> that aligned with the City\u2019s branding and accessibility guidelines.<\/li>\n\n\n\n
              • Showcased the value of iterative testing and stakeholder collaboration<\/strong> in solving complex design challenges.<\/li>\n<\/ul>\n<\/div>\n\n\n\n
                \n
                \n
                \"Table<\/figure>\n\n\n\n
                \"Page<\/figure>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n
                \n
                \n
                Conclusion \/ Lessons Learned<\/h2>\n\n\n\n
                \n
                \n
                This project reinforced the importance of user-centered design<\/strong> and the value of breaking down complex problems into manageable phases. By focusing first on user research<\/strong> and information architecture<\/strong>, we were able to design a solution that addressed core user needs while meeting accessibility standards. However, the limitations posed by the existing website structure highlighted the need for flexibility in design solutions<\/strong> and better communication about the feasibility of certain features, such as the Search widget, which required substantial backend changes.<\/p>\n<\/div>\n\n\n\n
                \n
                Going forward, earlier collaboration with developers and more transparent communication with stakeholders could help identify technical constraints sooner, preventing the need to scale back or shelve features that would otherwise improve the user experience. <\/p>\n\n\n\n
                Additionally, this project illustrated the value of continuous feedback loops between user testing<\/strong> and iterative design<\/strong>, which ensures that the final product meets user needs while adhering to organizational goals.<\/p>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n
                \"Screenshots<\/figure>\n<\/div>\n","protected":false},"excerpt":{"rendered":"
                Performed in-depth audit of web services, developed research-driven prototypes and build a user-centric dashboard.<\/p>\n","protected":false},"author":1,"featured_media":2062,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-1","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/patricklesage.ca\/portfolio\/wp-json\/wp\/v2\/posts\/1","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/patricklesage.ca\/portfolio\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/patricklesage.ca\/portfolio\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/patricklesage.ca\/portfolio\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/patricklesage.ca\/portfolio\/wp-json\/wp\/v2\/comments?post=1"}],"version-history":[{"count":0,"href":"https:\/\/patricklesage.ca\/portfolio\/wp-json\/wp\/v2\/posts\/1\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/patricklesage.ca\/portfolio\/wp-json\/wp\/v2\/media\/2062"}],"wp:attachment":[{"href":"https:\/\/patricklesage.ca\/portfolio\/wp-json\/wp\/v2\/media?parent=1"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/patricklesage.ca\/portfolio\/wp-json\/wp\/v2\/categories?post=1"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/patricklesage.ca\/portfolio\/wp-json\/wp\/v2\/tags?post=1"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}