Solid Waste Management System
Task
The City of Cape Town recognized the need for a streamlined waste accreditation system to replace their existing manual paper-based processes. As the UI UX specialist, I was tasked with developing a custom high-end design system that would facilitate waste accreditation applications for both public and corporate waste generators. The objective was to create an intuitive and user-friendly system that would improve efficiency, accuracy, and overall user experience.
To begin the project, I conducted extensive user research using various methodologies. This included stakeholder interviews with key personnel involved in waste management and accreditation processes.
By understanding their perspectives and pain points, I gained valuable insights into the challenges they faced with the current system.
Sarah, an environmental manager in a large corporation responsible for waste management compliance
John, a waste service provider specializing in recycling and waste collection.
This analysis guided our decision-making process for creating a tailored solution. These personas served as a foundation for understanding user motivations, behaviors, and pain points throughout the design process.
With a clear understanding of user needs and system requirements, I proceeded to create the information architecture of the new waste accreditation system.
This involved defining the structure and organization of the system, ensuring a logical flow of information and actions.
I created a sitemap to outline the main sections and functionalities of the system. Navigation flows were designed to enable users to easily access different features, such as user registration, company creation, accreditation applications, profile management, reporting waste activities, and accessing relevant reports.
In the process of developing the waste accreditation system, one of the critical aspects was designing an effective information architecture. The information architecture aimed to organize the system’s structure and ensure that users could easily navigate through various sections and perform tasks with minimal effort.
This phase involved creating low-fidelity wireframes and iterative prototypes to visualize the system’s core functionality and interactions.
It allowed for early exploration of design concepts and user flows before committing to high-fidelity visual design and development.
Translating User Flows: Based on the information architecture and user flows, wireframes were created to depict the structure and layout of each screen or interface within the system. The wireframes focused on representing the essential elements and functionalities without emphasizing visual design details.
Sketching and Conceptualizing: Initial wireframes were sketched out by hand or created using digital tools. This rapid ideation process allowed for quick exploration of different layout options and screen arrangements. It facilitated brainstorming and collaboration among the design team and stakeholders.
High-Fidelity Wireframes: High-fidelity prototypes are advanced and visually polished representations of a design concept that closely resemble the final product in terms of aesthetics, interactions, and functionality. These prototypes provide a more realistic and immersive experience for stakeholders and users, allowing them to interact with and test the design in a manner that closely mimics the actual product.
Iterative Prototyping: The low-fidelity wireframes were then transformed into interactive prototypes. Prototyping tools were used to add basic interactivity, such as clickable buttons, dropdown menus, and form fields. This allowed users to navigate through the screens and experience the system’s flow and functionality.
User Testing and Feedback: The prototypes were shared with representative users who performed realistic tasks within the system. User testing sessions were conducted to observe how users interacted with the prototypes, identified pain points, and collected feedback on usability and comprehension. This feedback was invaluable in refining the wireframes and user flows
Design Documentation: The wireframes and prototypes were documented, including annotations, explanatory notes, and interaction details. This documentation served as a reference for the design team, developers, and other stakeholders during the implementation phase
Throughout the development process, I conducted extensive usability testing to ensure the system’s effectiveness and user-friendliness.
This involved observing users as they performed tasks, collecting feedback, and making necessary refinements to enhance the user experience.
By incorporating user feedback and conducting iterative testing, we were able to address pain points, improve navigation, and optimize the system’s overall usability.
