My role
Product designer, user experience and interface, prototyping.
Results 
The project revamped Mississauga's Zoning By-laws viewer, replacing a challenging PDF format with a user-friendly solution that allows easy information retrieval, minimizing phone inquiries.
Overview
The Zoning By-law is a crucial document that governs land use, buildings, and structures in the City of Mississauga. As a public document, it should be accessible to everyone. However, the previous PDF format of the By-law posed a challenge in finding specific information, resulting in a high volume of phone inquiries to the City. To address this issue, the City of Mississauga developed a viewer tool that facilitates the exploration and extraction of information from the By-law document.
Problem Statement
The current PDF format of the Zoning By-law poses several challenges for users who need to prepare partial versions of the document. This requires additional time and resources to extract the necessary information. Furthermore, internal users often need to scan the document to provide accurate guidance over the phone, which can be time-consuming and inefficient. Additionally, tracking changes and editing the document is difficult due to the limitations of the PDF format. Therefore, there is a need to develop a solution that simplifies the process of extracting information, provides efficient guidance to users, and facilitates tracking and editing of the document.
The design process
When I was assigned this project, there had been previous design work done. To start, I reviewed and familiarized myself with the previous research, notes, and design files. After that, I met with the development team to learn from them and understand the desired functionality, as well as to identify any design challenges and development constraints.
During discussions with the development team and stakeholders, it became apparent that the design work was far too advanced and was done separately from development. As we delved into the user interface, we agreed that the layout was confusing for everyone in the room, and thus it would also be confusing to our end-users since it was designed with a non-knowledgeable user in mind. Moreover, we discovered that many of the features and layouts couldn't be developed due to the size of the document to render. As a result, we decided to redefine our product and come up with a new design that would be more user-friendly and feasible for development.
The new solution should...
The project needed to address several key requirements. First, the new solution had to serve the main audiences by allowing users to browse, search, and prepare partial versions of the Zoning By-law document. Second, it needed to serve as a tool for internal users by filtering a well-known document, which would help to reduce the volume of phone inquiries to the City. Third, it was important to use the screen size optimally to provide a better user experience. Fourth, the solution needed to allow more functionality to be added in the future, to ensure that it remained relevant and useful over time. Finally, it was crucial that the new solution stayed in brand, meaning that it was consistent with the City of Mississauga's visual identity and design guidelines.​​​​​​​
Prototype
For this project, I prepared a coded prototype to test the user interface and help to validate the layout design. See the Pen Document viewer interaction prototype by Yaya (@ydga) on CodePen.
Takeaway
The main takeaway from this project is that we created a new solution for the City of Mississauga's Zoning By-laws viewer that better serves the needs of our users. The previous PDF format made it difficult for users to find specific information, resulting in many phone inquiries to the City. Our new solution addresses this problem by allowing users to browse, search, and extract only the sections they are interested in.
One of the key benefits of the new layout is that it is designed to focus on the main audience's needs without leaving out other groups. We were able to create a simpler tool that serves our primary audience better without sacrificing functionality. The new viewer tool allows users to extract the information they need and provides additional features that make it easier to navigate the document.
Another benefit of the new viewer tool is that it allows for more functionality to be added in the future. As the City's needs change, we can update the tool to provide additional features and functionality that better serve our users. This ensures that the tool remains relevant and useful over time.

More of my work

Back to Top