A booklet explaining the development phases and design rationale of the "App A Cab" app- a new media product.

1. The
New Media Product
by Bhekisisa .P Kumalo

2. Submitted in partial fulfillment of the
requirements for the two year Diploma
in Graphic Design and New Media
Zimbabwe Institute of Vigital Arts
Harare on the 24th of November 2014
by Bhekisisa Prince Kumalo

3. In 2011 I worked at an internet café where I got my first full on exposure
to the internet and all its wonders. The constant internet connection
meant I literally had the world at my fingertips. Working as an attendant
in the café meant I had to quickly learn how to serve people and not just
for the café but also on behalf of the websites they were using. I grew
accustomed to the statement “ndirikuda kuGoogler” (I want to Google)
that a lot of customers would make to express their wish to browse
the internet. These brave novices helped me notice that quite a large
number of people wanted to learn how to use the internet and more
so how frustrated they got when websites didn’t work as expected.
It is safe to say that the role of User Interface (UI) and User
Experience (UX) Design became relevant to me way before I
even knew what it was. I also watched as more and more people
INTRODUCTION
bought and brought their smart-phones to us for assistance with
installation of mobile phone applications (“apps”, as they have come
to be known). Here is where my fascination with apps began.
I worked the late shift so that meant finishing work at 8pm, and
getting me a chance to enjoy the serene state of the city at night,
a complete contrast to the busy and overcrowded scenes of the
day. It was on these late nights that I would sometimes require the
services of a cab driver to take me home. If I failed to get a hold
of him, I would have to walk to a nearby shopping mall where cab
drivers wait for customers and it was on one of these walks that I
remember thinking to myself “ it would be cool if there was an app for
all this” and the rest as they say was history and lots of googling.
My interest in New Media

4. The growth of internet use in Africa has been substantial in the
recent years with Zimbabwe showing a 40% penetration rate in
broadband internet subscriptions in 2013 (www.techzim.co.zw),
much of this percentage owing to mobile internet subscriptions
accessed with feature phones and smart-phones. The global growth
of smart-phone usage has seen many companies taking to creating
mobile phone applications to make their services more efficient and
accessible for their clients, and most importantly for the companies’
bottom-line. Applications keep their product right in the pocket of
customers and if designed well enough, I believe these New Media
products can become a seamless part of the user’s life much like
social media applications that keep people in constant contact.
VIABILITY
Why I believe it will work

5. Some taxi drivers in the city are either
unlicensed or not in possession of all required
documentation to operate within the law.
The threat this poses to the unsuspecting
customers of these taxis is the risk of
road accidents that are to be expected
when being driven by an unlicensed driver.
Another problem is the cat and mouse
chases the illegal taxi operators find
themselves involved in with law enforcement,
this can serve as a time consumer for
customers. The app will only be available
to registered and fully licensed drivers.
THE PROBLEM
Late night taxi customers are also at risk of
being robbed by thieves posing as legitimate
cab drivers. Most of these late night
customers are people in possession of laptops
and money as expected of anyone finishing
work late with no other means of transport.
Taxi drivers at times find themselves
parked in one place for long periods of
time waiting for customers, this lessens
productivity and profits for the drivers.
Issues in the taxi industry
The app also provides consistent billing
systems to the industry and since the app is
geo-location based it will calculate the fee
for each trip according to the distance of
the trip as per km/$ rate. This eliminates the
process of some rides having to begin with a
somewhat lengthy negotiation between driver
and client, this is time wasting for both parties.
The app also cuts down the amount of energy
that anyone looking for a cab ride in the
country at this time spends. i.e. calling or
texting a known driver then taking his word
on his current whereabouts whilst you wait.
Other more strenuous routes involve having to
physically make way to one of the spots where
the cabbies regularly park just to get there
and pay to get somewhere else, not forgetting
the occasional negotiation of fare fees.

6. App-a-Cab is an android based mobile phone
application. It is a product built to provide
the service of cab hailing; the process one
goes through in order to get a taxi. Using
geo-location technology the app offers a
new taxi ride experience in Zimbabwe. With
just a few simple touches and swipes of a
smartphone any user can get a taxi ride. You
just open the app, type in your predetermined
destination, let the app calculate how much
the trip will cost you(as per $/Km rate), and
once presented with this information you can
then choose to accept or decline the charge
THE SOLUTION
for the trip. Should you choose to accept
the fare fee, the app then locates the closest
driver to your location and alerts them of
your pick-up. At this point the app not only
lets you know who is coming to pick you up
(through driver profiles) but also allows you
to track your driver’s exact whereabouts
so you’re not stuck waiting around.
About the App

7. When coming up with the logo I felt it
very important that the logo represent
the app’s functions as best as possible.
The most prominent of which I felt was
the app’s ability to move people from one
point to another, and so motion had to be
represented by the logo. The name “App
a Cab” was chosen because it was very
intuitive and I wanted it to immediately
describe its function to people, much like
fast food outlets and their “dial-a-delivery”.
PRODUCT DESIGN
Logo element breakdown
Roboto
Thin italic
AaBbCc 123
The font used for the logo is Google’s Roboto
in its Thin Italic weight. I chose italics because
I wanted the type to look like it was in motion,
along with the rest of the logo’s elements.
I drew inspiration from the racing checkered
flag, which represents the speed and efficiency
at which the app gets you a cab. The direction
which it flows in completes half of “the arrow”.
The other half of “the arrow” is made by the
slanted text-box that got its inspiration from
the light-boxes found on-top of some cabs.
When combined with the checkered flag they
form “the arrow” and “the arrow”, (much like
most arrows) represents direction of motion.

8. app
a
cab
#fareFair.fareNow
app
a
cab
Colour Swatches
#3C3C3B #00FFFF #00CCCC
The colour palette is made up of web friendly
colour tones. I chose a dark colour for the
top half of “the arrow” to contrast and bring
out the thin white strokes of the logo’s type.
The bottom half of “the arrow” is in
blue because blue is often associated
with the coolness of the sky. Chosen to
stimulate feelings of security, order and
through of its non-invasive association,
create a sense of trust in the brand.
The payoff line was chosen based on
questionnaire insights that showed regular cab
drivers were chosen based on the customer’s
assumption of trust, reliability and openness
to negotiation of the chosen driver. A hash-
tag was used because of it’s association with
new media through it’s use in social media,
plus, they’re quite cool at the moment.

9. THE USER EXPERIENCE(UX DESIGN)
The term “User Experience(UX)” coined
by Dr. Donald Norman, is used to describe
how a person feels after Human Computer
Interaction with systems such as a website,
ATM machine or even a cool cab app. UX
Design involves anaylising the processes of a
computer system to determine how efficient
and pleasant the experience of using it is.
From this point all interface design and
function decisions were made from the
perspective of a user in the worst posiible
conditions. One of such was the app’s
responsive design that expands and
contracts to suit the size of the screen
it is being viewed on, made to cater to
both large and small screen devices.

10. DESIGN APPROACH
Research/Preliminary Creative/Wireframing Wireframes
The preliminary stage began with problem
definition and gathering of information
about the relevant stakeholders.
I had verbal interviews with drivers and
questionnaires for cab riders to learn their
needs and problems faced in comparison to
what the app was offering. I also asked about
the normal procedures of getting a cab and
inconveniences faced within the process. The
research got me insights on design related
information to improve the app’s functionality.
It was in this research that I learnt
customers and drivers alike find benefit
in the negotiation of fare fees. A feature
not originally a part of the app but added
to further enhance the user experience.
This stage is where I sat down and
attempted to provide the most feasible
solutions that a mobile application could
provide to the problem defined.
Users tend to prefer applications that are
easy to use and require the least amount of
input, especially since apps are often used in
environments that don’t offer apps their user’s
undevided attention i.e offices, shopping malls
and quick transit. Strapped with this and other
insights from “Mobile Phone Transformations”
(Dr. B. Chivanga), I attempted to provide
a solution that could get users a ride in
the least number of steps possible.
The wire-frames show the basic page
structure of the App in an attempt to single
out the main user path that will be necessary
for the user to achieve their end goal.
App A Cab
App A Cab
Login
Sign Up
Sign Up
Proceed
Username
First name
Type Destination
Pick-up point
Last name
E-mail address
Payment method
Password
Keep me signed in
Locate me
Locate me
Get a cab
Track Driver
Help
Share Experience
Fare Fee
$15.5
Accept
Decline
Negotiate
Set Destination
Fare Fee
Negotiate
Your Final Offer
Send
Negotiate
Your Driver is
Driver Arrival
Track Driver
Track Driver
Track Driver
You
Driver
Share Experience
Share
Facebook
Twitter
Google+
FAQ
Contact Us
Help
Getting a cab
Contact Us
FAQ
FAQ
Contact Us
Help
Locate me
You
Sign Up
app
a
cab
Driver’s Final Offer
Accept
Decline

11. THE USER INTERFACE(UI DESIGN)
The Main User Path App a Cab Destination Fare Fee
On the home page, the App a Cab icon is
found at the top of the menu as the user’s
first call to action. This icon initiates the
first process of the main user path that is
expected from regular users of the App.
This page is the second step of the main
user path which requires the user to write
down their destination and pick-up point
for their trip. The input fields have an auto-
complete function that lessens the burden
of having to know exact addresses.
This page then displays the fee for the trip
based on the distance between the destination
and pick-up point multiplied by App a Cab’s
fee to the kilometre travelled. Depending on
how the user feels about the fare fee they
have the three choices to choose from.

12. Driver Profile Track Driver Share Experience Help
Upon accepting the fare fee, the user is
shown their driver. Built as a solution to
the issues of cab passengers being robbed
by thieves posing as cab drivers, this page
is aimed at building trust with the user by
providing driver profiles. The profile displays
a number of the driver’s identification
particulars such that by the time the driver
arrives at the user’s location, the user is
already familiar with them. The colour and
vehicle type were especially added to help
with driver recognition in crowded areas.
Designed as a solution to the problem of
having to take a cab driver’s word on his
current whereabouts, this page allows
users to track their driver’s current location
with live updates on the map. The page
also shows the user’s location and their
destination highlighting the shortest
possible route by road. This is the end of the
mandatory pages required to get a cab.
This page allows users to connect the App
with their social media profiles. The page
will help create awareness of the App. Users
will be encouraged to share their cab ride
experience through incentives such as free
kilometres. The prefixed message(which
is editable) is meant for users who wish to
share their experience but have little time to
write a full message about it. Limited to 100
characters, the message is made to work
well across the selected social platforms
with the App’s payoff line as the hash-tag.
App a Cab is a service that lends itself to
the user and as such would be incomplete
without a help page. This page is for anyone
looking for assistance with how to use the
app through the Frequently Asked Questions
section and anything not solved by that page
can be directed to the App a Cab offices
directly through the contact us section.

13. User Testing and Feedback
Upon user testing and feedback I learnt that I
had to make some changes to the structure of
the interface to accommodate the space taken
up by the user’s finger when tapping buttons,
especially the radio buttons (i.e. “keep me
signed in” and social media share options).
CSS3 page transitions and button
response were added to increase user
interactivity and interface aesthetics.
The negotiation pages were added due to the process’ favour among cab stakeholders. Designed
with the app’s original ethos of effeciency - the negotiation process has been toned down to a
two step process that requires the user to place a single and final figure they are willing to pay.
Upon the user’s final offer the driver can counter offer with the minimum figure they are willing
to accept for the trip. If the user is satisfied with this figure they legible for pick-up, if not they
return to the home page and re-App a Cab for a chance to negotiate with the next available driver.
Negotiate: Your Offer Negotiate: Driver Offer
Facebook
Twitter
Google+
Login
Sign Up

14. CONCLUSION
Acknowledgements
I scripted this app in HTML5, CSS3 and Javascript languages as a proof
of concept. This combination of scripting completes the task at hand
but would not be ideal for the final distribution of the app to users.
The ideal app would have to be written in the relevant scripting
languages for the different mobile device operating system platforms.
This done to conform the app to the various usability mannerisms
associated with the different platforms, a decision I feel will make
the app much more intuitive to the user, both in look and feel.
This app was a user-end version of the app and a driver-side version of
the app based on the same design principles as the user-end version
would be required for the system to be fully functional. Timeframe
limitations resulted in only the user-end version being created.
“I would like to thank in no particular order:
B. Madzonga, G. Maurice, G. van de Ruit & Prof. I.S Mafundikwa for their
technical assistance, motivation and guidance in creating the App.
Dr. B. Chivhanga for lending tips and resource materials on his design approach.
The ZIVA 2014 graduating class for their input and ideas but
mostly for letting me use them as lab rats.
All participants in my research Questionnaires.
My parents, family and girlfriend for all their support.”
- Bheki

15. This booklet was written in
Roboto Light: Display Headings and Sub-Headings.
Roboto Light Italics: Illustration Captions
Roboto Regular: Body text, leading-24pt, Tracking-30.
Created in Adobe CS6: In-design, Photoshop and Illustrator.
Interactive CD Packaged in Adobe Director 12.
The App was scripted in HTML5, CSS3 and
Javascript using Adobe Dreamweaver.