top of page
CPT Text.png
© 2021 Morena Moloi
COCT LOGO.png

Overview

01

The City of Cape Town e-Services website is a bouquet of online services that residents can use to access account information, submit applications and transact with the city of Cape Town.

This conceptual redesign aims at enhancing the experience of the current City of Cape Town e-services offering.

Beach-min.png

"

Well-designed products have great usability. 

This is a significant contributor to product

quality and a seamless user experience.

Miklos Philips

"

Current Experience

02

OLD-SITE 1.png
Glow BG-min.png

Business Stakeholder Insights & Requirements

03

Why do the business stakeholders feel that the current environment should be improved?

Biz1.png
Biz5.png
Biz6.png
Biz7.png
Biz8.png
Biz9.png
Biz10.png
Biz11.png
Biz12.png
Biz13.png
Biz14.png
Biz15.png

User Insights

04

How do users find using the City of Cape Towns e-Services portal?

UF1.png
UF2.png
UF3.png
UF4.png
UF5.png
UF6.png
UF7.png
UF8.png
UF9.png
UF10.png
UF11.png
UF12.png
UF13.png
UF14.png
UF15.png
Beach-min.png

Evaluation Criteria for this case study

  • User flows and functionalities

  • Visibility of system status

  • Match between system and the real world

  • User control and freedom

  • Consistency and standards

  • Error prevention

  • Flexibility and efficiency of use

  • Aesthetic and minimalist design

  • Help users recognize, diagnose, and recover from errors

  • Help and documentation

Camps Bay-min.png

Typeface

05

OPENSANS.gif

Open Sans

Open Sans offers a harmonious blend of readability, versatility, and modern aesthetics.

LIGHT

REGULAR

SEMIBOLD

BOLD

EXTRABOLD

Colours

06

Our usage of colour aids in assuring that we convey a clear, concise message as well as represent the brand identity of the City of Cape Town.

Neutrals

We use our neutral colours for text, backgrounds, borders, divider lines and UI components.

Neutral 1.png

Brand

We use our brand colours for actions, success messages, error messages, component states and icons.

Brand 1.png
Brand 2.png
Brand 3.png
Brand 4.png
Brand 5.png
Brand 6.png
Brand 7.png
Brand 8.png

User Flows

07

Grid

08

Desktop-Grid 1.png
Mobile-Grid 1.png

Component Library

09

Component Library.png

Easy Profile Management.

OCEAN BG-min 2.png
Dashboard.png
Mega-menu 1.png

Simple Navigation.

Screen 1.png
Screen 2.png
Screen 3.png
Screen 4.png
Mobile View.png
Table Mountain.jpg

Thank You.

Check out more of my projects

FNB

Digital Design: Banking

bottom of page