Task
The City of Cape Town identified the need for a citizen-oriented Mobile Application to engage directly with residents, businesses, commuters, councillors and other key stakeholders. Due to time constraints and fast approaching deadlines, I was tasked to produce high fidelity wireframes within a very short time space.
-
Strategy
Design Sprints
-
Design
UX Architecture, Prototyping
-
Stakeholders
City of Cape Town, Ogilvy
-
Platforms
Desktop, Mobile
-
Tags

⬤ 01. Research and Analysis
Research and Analysis
User Research
To meet the accelerated timeline, we employed a combination of quick surveys and in-depth interviews to gather essential insights from representative users. The goal was to rapidly understand the needs, expectations, and pain points of the diverse user groups in Cape Town.
To gain deeper insights into user perspectives, we conducted in-depth interviews with a carefully selected group of individuals representing different user segments. These interviews provided qualitative data that complemented the survey results.
Through the interviews, we explored participants’ daily routines, pain points, and desired improvements in accessing city services. We also gathered feedback on existing digital platforms and identified opportunities for improvement.
Competitive Analysis
Given the limited timeframe, I conducted a focused analysis of the most relevant mobile applications in the citizen engagement domain. This allowed me to quickly identify successful features and design patterns, enabling us to make informed decisions within the accelerated timeline.
I began by identifying and selecting mobile applications from cities worldwide that focused on citizen engagement, urban services, and community participation. This ensured that I examined applications that aligned closely with the objectives of the City of Cape Town’s mobile application.
I conducted a thorough evaluation of the selected applications, assessing their key features, functionalities, and user interfaces. This involved studying the ways in which these applications facilitated citizen engagement, provided access to city services, and encouraged participation in community initiatives.


Information Architecture
To expedite the information architecture process within the tight deadline, I conducted a comprehensive review of the City of Cape Town’s existing digital platforms, including websites and other applications. This allowed me to leverage their existing information architecture and gain insights into the city’s service offerings and content structure.
By building upon the foundation of the city’s existing information architecture, I was able to accelerate the process of organizing and structuring content for the mobile application. With a focus on efficiency, I created user flow maps to outline the pathways users would take to access information and services within the mobile application.
By mapping out these flows, I identified key user journeys and the associated content that would be required to support those journeys. Based on the user flow maps and collaborative discussions, I developed a clear and logical content hierarchy. This involved categorizing information and services into meaningful groups that would be easily understandable and accessible to users.

Based on the user flow maps and collaborative discussions, I developed a clear and logical content hierarchy. This involved categorizing information and services into meaningful groups that would be easily understandable and accessible to users. I prioritized content based on user needs and the objectives of the City of Cape Town, ensuring that essential information and services were prominently featured and easily discoverable within the application.
By leveraging existing knowledge, collaborating closely with the City of Cape Town’s team, and employing a user-centric approach, I was able to efficiently develop a streamlined information architecture for the mobile application. This approach enabled us to organize content effectively, ensure efficient user flows, and provide easy access to vital information and services within the tight deadline.
⬤ 02. Ideation and Conceptualization
Ideation and Conceptualization
Wireframe Sketches and Iterations
Considering the time constraint, I rapidly generated low-fidelity wireframe sketches, emphasizing quick iterations and collaboration with stakeholders.
By focusing on essential functionalities and layout options, we accelerated the conceptualization process while ensuring a user-centric approach.


Through agile design iterations and frequent feedback sessions, we swiftly refined the wireframes. Prioritizing user experience and incorporating stakeholder input, we expedited the decision-making process to maintain project momentum.
⬤ 03. High-Fidelity Wireframes
Wireframing and Brand Consistency
Understanding Branding Guidelines
To expedite the visual design phase within the tight deadline, I created a streamlined and adaptable visual design language that aligned with the City of Cape Town’s branding guidelines. This approach allowed for quick decision-making and facilitated rapid implementation.
I thoroughly studied the City of Cape Town’s existing branding guidelines, including logo usage, color palettes, typography, and visual elements. This ensured that our visual design language would be consistent with the city’s established brand identity.
By understanding the existing guidelines, we could maintain visual coherence and alignment with the city’s image while designing the mobile application.
I established a consistent design language by defining key visual elements such as colors, typography, icons, and UI components. This created a cohesive and harmonious visual experience throughout the application.
The design language was developed to reflect the vibrant and diverse spirit of Cape Town, incorporating elements that resonated with the local culture and community.
Typography
/ Scales
Usage
Headlines (Print, Documents)
Aà
The Avenir® Next font family was designed by Adrian Frutiger in collaboration with Monotype Type Director Akira Kobayashi.
AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz 0123456789
Typeface
Avenir Next Condensed
Usage
Secondary/Supportive (Web)
The Avenir (French for “future”) font was produced as another real alternative to the Futura design and the original face was available in three weights with accompanying italic variants.
Mobile App Typeface
Roboto (Android)
Mobile App Typeface
SF Fransisco (iOS)
Since its release, the Avenir Next design has been immensely popular for an extensive range of different applications.
Designing Custom UI Elements
Within the accelerated timeline, I balanced efficiency with the need for customization by designing a set of UI elements specific to the mobile application.
These included buttons, cards, navigation bars, and other interface components. The custom UI elements were designed to be visually appealing, user-friendly, and consistent with the overall visual design language.
This helped to create a unique and recognizable interface for the mobile application.



⬤ 04. Final Delivery
Final Delivery
CCT
Mobile App Prototype








Applications Used



