Task
The City of Cape Town sought to enhance its service offering to the public by implementing an efficient and cost-effective method for booking and paying for city-owned facilities. As the UI UX specialist, my role was to research and design a custom high-end design system that would seamlessly integrate with the existing City of Cape Town website, maintaining consistency and brand integrity.
-
Strategy
UX Strategy, UI Design
-
Design
Wireframing, Prototyping
-
Stakeholders
City of Cape Town
-
Platforms
Desktop, Mobile
-
Tags
⬤ 01. Research Phase
Research Phase
Employing various methodologies to gain insights into user needs and pain points
In the research phase, I employed various methodologies to gain insights into user needs and pain points. I conducted interviews and workshops with City of Cape Town stakeholders to understand their requirements and expectations.
Additionally, I analyzed existing booking systems and user feedback to identify common challenges faced by users.
The UX and UI Design Phase
Based on the research findings, we defined clear user flows and restructured the information architecture to streamline the booking and payment process. Through wireframing and prototyping, I visualized the user interface, ensuring ease of use and intuitive interactions.
Usability testing sessions were conducted with representative users, and their feedback was incorporated into the iterative design process, resulting in a highly user-friendly system. 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. This analysis guided my 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.
⬤ 02. User Journey and Personas
User Journey and Personas
User Flows
Based on the research findings, we developed user personas, representing different user archetypes with specific goals and needs. These personas helped us empathize with the users and tailor the design to address their unique requirements.
User stories were created to capture the user’s journey, highlighting their motivations and tasks at each stage of the booking and payment process.
⬤ 03. Wireframing and Prototyping
Wireframing and Prototyping
Low-fidelity and High Fidelity
To visualize the user interface and interactions, we created wireframes and interactive prototypes. These low-fidelity representations allowed me to quickly iterate on the design and gather early feedback from users and stakeholders.
The prototypes were tested with representative users to validate the design decisions and make necessary refinements.
⬤ 04. Integration with SharePoint
Integration with SharePoint
Evaluating the Suitability of Bootstrap for the Design System
Recognizing the City of Cape Town’s use of the SharePoint platform environment, I collaborated closely with SharePoint developers to ensure seamless integration of the new booking system. By understanding the technical requirements and constraints, we designed the system components that would seamlessly fit within the SharePoint framework, ensuring compatibility and system stability.
Integration with the existing SharePoint platform was a critical aspect of the project. To ensure a seamless integration, I followed a systematic approach and closely collaborated with the SharePoint development team. Here’s how we approached the integration:
By closely collaborating with the SharePoint development team and carefully considering the SharePoint environment, we successfully integrated the new booking and payment system with the existing infrastructure. This integration not only allowed for a seamless user experience but also leveraged the capabilities of SharePoint to enhance the overall functionality and stability of the system.