In 2017, the City of Ottawa challenged A Hundred Answer’s team to integrate a Search widget for popular services and to refresh the look and feel of their My Service Ottawa dashboard.
We wanted to anticipate what the user is looking for, and make it easy to find.
The AHA team applied user-centric approach with a complete technical and content audit, investigated Information Architecture strategies, analysed web analytics, surveys, interviews and studies to produce usability reports, prototypes, and style guides.
Insights
- How might we have a Search widget that can quickly navigate to the most requested information on the City of Ottawa website?
- How might we have a smart looking My Service Ottawa dashboard that’s easy to use, simple to customize, and fits coherently with the City of Ottawa’s website style guide?
Responsibilities
My role in the project was to lead design efforts and support user research. Created prototypes based on personas with test scenarios for common user tasks.
- Participated in workshops for information architecture, navigation and research analysis.
- Style guide annotations for responsive front-end code were delivered for integration with the Web Experience Toolkit (WET-BOEW) and WCAG 2.0 (AA) standards.
Analysis and synthesis
In-person interviews, online bilingual surveys, and web analytics were collected during the discovery phase to determine user needs and pain-points.
Wireframes and prototypes were evaluated for usability, device compatibility and accessibility.
- Online prototypes with click heatmaps helped to determine placement of navigation and labels.
Conclusion
Stakeholders got a clear picture of how users interact with the City of Ottawa website. However, the integration of a search widget implied modifications to the site’s structure. Therefore, only the My Service Ottawa dashboard designs were implemented.
- Presented a design for meaningful navigation with a Search widget.
- Improved the My Service Ottawa dashboard experience with responsive, accessible and user-centric design.
