CCT Mobile App

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

    User Interface Design, UX Research

⬤ 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.

City of Vancouver
City of Dubai

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.

Defining a Consistent Design Language

/ CCT Brand Guide
$blue-500
$blue-400
$blue-200
$blue-100

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
Typeface Avenir Next

Usage
Headlines (Print, Documents)

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

Check out my profile,
on LinkedIn

Connect with me
Back

This website stores cookies on your computer. Cookie Policy