Project Overview
Fix My City is a mobile platform that helps city councils to react fast to service delivery challenges, allowing residents to actively participate in finding solutions to the challenges faced by the city. I led the ideation, strategy and design for its app across its Android and iOS platforms.
Project duration: July – December 2021
Platform: Android, iOS, Web
Problem statement
Residents of Bulawayo, Zimbabwe often face challenges that need addressing by the city council. For example a burst sewer pipe would go unfixed for weeks due to 3 main reasons;
- There is no efficient reporting system. Very few people know the city council’s call center number.
- Some people decide to physically report the issues, which would result in long queues and bad customer service.
- There was no way of tracking progress on reported issues and holding the city council accountable for unresolved issues.
CITE, the client, in consultation with the Bulawayo City Council had tried to address this issue by creating a WhatsApp number that people could report on. They saw the need to improve this system hence they requested for the design and development of a more efficient solution.
Mobile app previously used by the Bulawayo City Council
Research & Analysis
Research methodologies used:
Literature research/Competitor Analysis
I started by exploring current solutions on the market, both locally and internationally. The Bulawayo City Council had its own reporting system in place, so I also tested it to help develop better user interview questions to validate or invalidate both the assumptions and research goals.
User Interviews
I conducted interviews with staff members from CITE who manned the existing channels as well as citizens who had reported issues through the city council’s channels. The interview questions contained both open ended and specific questions in order to get a better insight in the users’ pain points.
Functional criteria
From the research findings, I was able to establish functional criteria in consultation with the client and the product manager. This led to the following points being key drivers of the application design.
As an end user, I want to be able to…
- E1 Report a new fault
- E2 Report on an unresolved fault
- E2 Report on an unresolved fault
- E3 Follow up on an unresolved fault
- E4 Update on the status of a fault
- E5 View all faults in Bulawayo
As CITE Admin, I want to be able to…
- A1 Generate reports
- A2 Email reports to BCC
- A3 Change the status of a fault
- A4 Approve the logging of a fault
- A5 Close a ticket
- A6 Create a new fault
- A7 Update a fault
Use case diagram illustrating the functional criteria and showing the relation between the proposed system and the different users.
Ideation
Based on the research findings, it was evident that there was going to be need for:
- A mobile app for use by end users/residents of Bulawayo
- A WhatsApp Chatbot for faster communication and to cater to users who did not have high end smartphones
- A dashboard for use by the CITE administrator
- A landing page where users could download the mobile apps from.
WhatsApp bot dialog flow
WhatsApp bot dialog design
The research findings as well as results of testing of the existing system guided the product manager and myself in coming up with this revised WhatsApp dialog flow which would in turn inform the mobile app user flow.
Wireframing
I first started by brainstorming various possibilities through loose wireframe sketches on paper before moving into Adobe XD to create mid-fidelity wireframes. I then transferred the screens to Miro where I created the sceen flows illustrated by this diagram.
Partial screen-flow of the mobile app wireframes
High-fidelity screen designs of the mobile application made in Adobe XD
Prototyping
After testing and approval of the wireframes by the client, the next stage was to now add flesh to the wireframe skeleton.
I broke down the process into the following steps;
- Design app logo, brand guideline.
- Design the mobile app prototype
- Design the admin dashboard prototype
High-fidelity design of the admin dashboard made in Adobe XD
Validation and Usability
Remote usability testing
5 participants, age range 20 – 45
I conducted unmoderated remote usability testing where I requested 5 test participants to complete tasks on their devices at home or at work. The participants were tasked with:
- Reporting faults via the mobile app
- Reporting faults via the WhatsApp bot
Issues raised from test:
- Some suburbs were missing, we had listed 134 instead of the revised 165 under Bulawayo City Council.
- The WhatsApp Bot wasn’t working at times – we realised that this was due to power cuts and the phone not being connected to WiFi. We resolved to making sure the phone always had mobile data for smoother communication.
Solution and impact overview
After testing, some elements were added and some removed, and some were reserved for later iterations of the product. I handed over the completed assets to the development team through Adobe XD links which allowed the devs to extract component CSS code as well as assets eg images.
The Fix My City app was developed and successfully launched in December 2021
50+
downloads
Within the first week of launch, the app had 50+ app downloads on Android and 80+ WhatsApp bot users.
30%
increase
CITE reported a 30% increase in the number of WhatsApp reports.
SAAS
solution
As of January 2022, the app is being built into a saas solution so that multiple city councils from any country can use it.
