CHICAGO

CITY CYCLER
MOBILE
APPLICATION
Author: Vlada Mashkovich
HCI 454: Information Architecture

CHICAGO CITY CYCLER:

A COLLISION ASSISTANT
After completing a content inventory and information
architecture design for the web, it became clear that a
mobile iteration containing the same information would be
too burdensome for the small device and the mobile user.
Instead, information was selected that would be a better fit
for a portable device and a user on the go.
The following mobile application creates a collision assistant
for a cyclist in distress after a collision. The application takes
the user through the paperwork and steps recommended to
complete after the accident. The result proper information
collected helps the cyclist ensure that they receive the
proper legal and medical assistance as well as file a proper
insurance claim.

PERSONAS
USER THAT HAS JUST
GOTTEN INTO AN
ACCIDENT, IMMEDIATELY
AFTER THE ACCIDENT
*The screens provided focus on this
persona

USER THAT HAS BEEN IN

AN ACCIDENT IN THE
PAST, IS CHECKING UP
ON CLAIMS FILED
*Further exploration needs to be
completed to accommodate this persona

This application is designed to aid the cyclist that has just been in an
accident. Because it is incredibly difficult to deal with paperwork immediately
after an accident due to stress and adrenaline, the Chicago City Cycler
Collision Assistant walks the traumatized cyclist through the necessary steps
that they have to take. The mobile application ensures that the cyclist
completes all the required paperwork and steps to be able to receive
insurance claims such as damage reimbursement and medical
reimbursement, if eligible. The application also provides police assistance to
make sure that all of the legal documents are properly handled. The
application also provides any medical assistance in case of an emergency.

This application has the potential to be used as a record keeping tool for
previous collision claims and benefits. Since much of the information entered
for the purposes record keeping and transfer to the various entities involved in
an accident (police officers, insurance providers, etc) is stored in this
application, this information can also be retrieved in the future. Often,
insurance agents and medical providers ask for insurance claims at a later
time after the accident. If any legal services are needed to deal with the
accident, information of police claims and any evidence needed can be
accessed from this application.

SCENARIOS

USER THAT HAS JUST

GOTTEN INTO AN
ACCIDENT, IMMEDIATELY
AFTER THE ACCIDENT
*The screens provided focus on this
persona

Immediately after a collision while on their bike, Sean is confused and

stressed out and doesnt know what to do next. He opens the Chicago City
Cycler Collision Assistant and is comforted that he is provided for when he
really cant think well for himself. The application asks him whether or not he
has moved off the road. Sean realizes that he hasnt because of all the
confused so he moves to safer place, and confirms that he has done so in the
application. Sean thinks about whether he wants to call the cops, and sees
that the nearest officer can arrive in around 5 minutes and thinks that wont
bee to much time. He calls the police and confirms that he does indeed want
to call the police to help him. Sean doesnt think that he needs an ambulance
and presses No Thanks. Sean looks at the map showing him where the
police officer hes requested is and presses next. Prompted by the Collision
Assistant, Sean collects the drivers contact information, drivers insurance
information, sees that the police officers information is already recorded, the
vehicle type information, and takes down the contact information of the nice
lady that has offered to help him after witnessing his accident. He takes
pictures of his injuries, the damage to the car, and the damage to his bike. At
this point the police officer arrives and he shares with him all the information
that he has collected. After the police officer collects everything he needs and
a claim is place with the drivers insurance, Sean walks his bike home knowing
that he did everything he could do in this unfortunate situation.

SCENARIOS

USER THAT HAS BEEN IN

AN ACCIDENT IN THE
PAST, IS CHECKING UP
ON CLAIMS FILED
*Further exploration needs to be
completed to accommodate this persona

Miranda has been in an accident a few days ago and her bike got damaged
and her right shoulder has been hurting. At the time of the accident, an
insurance claim has been filed with the drivers insurance and shes waiting to
get confirmation on what the insurance can award her to get her bike fixed
and get chiropractic assistance for her shoulder. An insurance agent calls her
to confirm the claim ID and some of the details of her accident. Miranda
opens up the Chicago City Cycler Collision Assistant and shares the details
needed with the insurance agent. The insurance agent pulls up the
information on Mirandas collision claim and tells her that she has a some
money provided by the drivers insurance company that she can use to get
her bike fixed or get a new bike. She also tells her that she has some money
provided by the insurance company that she can use for chiropractic care.
The agent tells Miranda that she should share the agents name, contact
information, and insurance claim number with the chiropractor. Miranda
records that information into the Chicago City Cycler Collision Assistant for
reference at the chiropractor. The agent tells Miranda that they will be sending
her a check to fix/replace her bike. Miranda is thankful that she can get the
financial and medical assistance she needs.

INTRODUCTORY SCREEN
The introductory screen introduces the
purpose of the application and informs the
cyclist about what service it is about to
provide for them. The application takes
them through the recommended steps they
need to take after a collision.

GET OUT OF THE ROAD

The first recommended step for the cyclist
to take to make sure that they have moved
to a safe place, and away from traffic on the
road. The cyclist confirms that theyre out of
the road and out of harms way to move
forward.

CALL THE POLICE

It is strongly recommended that the police
are called to properly assess every
accident. It is recommended on this screen
that the cyclist calls a police officer to their
location. This page transmits the cyclists
location to the closest available police offer.
This page acts as a summon more than a
call to the police.

CALL THE AMBULANCE

It is recommended that an ambulance be
called only if necessary. This page allows
the user to calls an ambulance, but urges to
exercise restraint because its expensive
and irresponsible to do so without merit.
This page acts as a summon to the closest
available ambulance, rather than calling the
ambulance by phone.

SUPPORT ARRIVAL MAP

After the police and/or the ambulance are
summoned, a map appears showing their
proximity to the location of the cyclist. This
map is live an updates as assistance gets
closer.

INFORMATION COLLECTION
To ensure that all the required information is
collected in order to ensure the best
insurance awards, provide the necessary
legal proof, etc. these series of accordions
walk the user through collecting all the
necessary data about the accident. This
also expedites the police officers job when
they get to the scene.

EVIDENCE COLLECTION
These series of accordions walk the cyclist
through collecting an evidence of their
injuries, damaged cause to the drivers
vehicle, and damage caused to their bike.
This also ensures that all the necessary
legal proof is collected to ensure that
proper liability it taken and an adequate
insurance award is given.

WIREFRAMES
INTRODUCTORY SCREEN

GET OUT OF THE ROAD

Ability to access the user profile is

present on every page.
Conciliatory text to add
personalization and introduce the
focus of the application.
Text explaining the purpose of the
application and what the user is set
out to accomplish.
Blurred subtle background using
calming colors to create a more
relaxing atmosphere.

Text depicting the recommended

action for the screen.

In an accident?
We hope youre okay!

Well take you through

all the steps you need
to take in this situation

Are you away

from the road
and other
vehicles?
Yes

No

For your safety, please move out

of the road and away from harm

Interaction indicating whether the

recommended action has been
completed. Because it is strongly
recommended to get out of the road,
the user has to swipe the button to
Yes or click Yes to indicate that
the action has been done
Small text describing the rational for
the recommended action, for the user
that would like to know why.

Progress identifier is present on

every page.

Screen tradition: Swipe or screen tap

Next Screen: Get Out of the Road

Screen tradition: Swipe button to

Yes or click Yes
Next Screen: Call the Police

WIREFRAMES
CALL THE POLICE

CALL THE AMBULANCE

Because it is highly advised that a

police officer be present at every
collision, the text is attempting to
nudge the user to call the police
rather than being neutral.

Unlike calling the police, calling the

ambulance should only be done if
necessary. The text describing the
action tries to convey hesitation,
asking the user whether the
ambulance is needed.

Similar to applications like Uber,

the estimated time for arrival
appears. The text also shows the
user that it wont be that much of
an inconvenience to call.
The action Call button, works less
like a telephone call, but more like a
request button, similar to Uber and
Lyft.

Its recommended
that you call the
police to assess
the accident.

Do you need an
ambulance?
8 minutes away

5 minutes away

Call

No Thanks

No thanks

Call

Its recommended that police be

called with every collision

Though it is recommended to call

the police, the user also has the
option to opt out. The opt out text
is considerably smaller than the
action Call button
Small text describing the rational
for the recommended action, for
the user that would like to know
why.

Please refrain from calling an

ambulance unless necessary

Similar to applications like Uber,

the estimated time for arrival
appears. In case of an emergency,
the text calms the driver by
showing the help will be arriving
soon.
Because the ambulance shouldnt be
called unnecessarily, No Thanks is
featured instead.
The action Call button, works less
like a telephone call, but more like a
request button, similar to Uber and
Lyft. Because we dont want users
using this option unnecessarily, it is
understated.
Small text describing the rational
for the recommended action, for
the user that would like to know
why.

Screen tradition: Click Call or No Thanks

to advance to the next screen.

Screen tradition: Click Call or No Thanks to advance to the

next screen.

Next Screen: Call the Police Confirmation Screen (next slide)

Next Screen: Call the Ambulance Confirmation Screen (next slide)

WIREFRAMES
CALL THE POLICE
CONFIRMATION SCREEN

Because emergency resources are

scarce, the user has to be sure that
he wants to call the police, so a
confirmation page is present in an
overlay over a dimmed Call the
Police screen. This follows
immediately after the Call the Police
screen.

CALL THE AMBULANCE

CONFIRMATION SCREEN

Its recommended
Did you mean
that
you call the
to request police
police
to assess
assistance?
the accident.

Did you mean

Do you need an
to call the
ambulance?
ambulance?
8 minutes away

Because emergency resources are

scarce, the user has to be sure that
he wants to call the ambulance, so a
confirmation page is present in an
overlay over a dimmed Call the
Ambulance screen. This follows
immediately after the Call the
Ambulance screen.

5 minutes away

Because because this choice should

be strongly considered, the user has
to take an action and swipe the
button to Yes or click Yes to
confirm.

YesCall No

YesCall No

No thanks

No thanks

Its recommended that police be

called with every collision

Please refrain from calling an

ambulance unless necessary

Because because this choice should

be strongly considered, the user has
to take an action and swipe the
button to Yes or click Yes to
confirm.

Screen tradition: Swipe button to Yes or click

Yes, or click No.

Screen tradition: Swipe button to Yes or click

Yes, or click No.

Next Screen: Call the Ambulance (previous slide)

Next Screen: Support Arrival Map

WIREFRAMES
SUPPORT ARRIVAL MAP
Icon displayed at the top of the
screen after assistance has been
called that houses the map for future
reference. The user can see that the
map lives that as there is a carrot
blow it, opening up the map.
This map is live. It updates as the
assistance gets closer.

Icon displays the proximity and

progress of ambulance assistance
requested. Icon is identified either by
medical colors (red) and/or medical
icon (cross).

Icon displays the proximity and

progress of police assistance
requested. Icon is identified either by
police colors (blue) and/or police icon
(shield).

Icon displays the location of the

accident. Icon is identified by a pin.
Next

Next button advances the user to the

next screen

Screen tradition: Click Next

Next Screen: Information Collection

WIREFRAMES
INFORMATION COLLECTION

Next button advances the user to the

next screen

Screen tradition: Click Next

Next Screen: Collect evidence Screen

Insurance Information

Police Records
Vehicle Information
Collision Location

Car Damage

Witness Information

Bike Damage

Other

Other
Next

Next

Respective pictures are stored within

each subsection. Pictures can be
viewed by clicking on the image.
Pictures can be deleted by clicking
the
button.

+
+

Name
Phone

Injuries

Each header includes a series of

entries, populated by the automated
entry process or manually by clicking
each field. Once information is
already present in the header section,
fields can only be populated
manually.

Drivers Information

Accordion screens that group

different required information.
Clicking the
opens an accordion,
and clicking the
closes an
accordion. Clicking on the section
header opens an overlay that takes
the user through the text entry
process.

Accordion screens that group

different required information.
Clicking the
opens an accordion,
and clicking the
closes an
accordion. Clicking on the section
header opens an overlay that takes
the user through the text entry
process.

EVIDENCE COLLECTION

Next button advances the user to the

next screen

Screen tradition: Click Next

Next Screen: Done screen

WIREFRAMES

The user can close out of the window

overlay by pressing on the
button
and return to the Information
Collection accordion screen.

The user can close out of the window

overlay by pressing on the
button
and return to the Evidence Collection
accordion screen.

Requested information text

Text entry field

EVIDENCE COLLECTION
PICTURE ENTRY OVERLAY

INFORMATION COLLECTION
DATA ENTRY OVERLAY

Drivers Information

Drivers Information
Name
Drivers
Phone
Address

Name

Injury

Type of image text.

Camera image display

Insurance Information
Police Records

Proceed to next entry screen

Take image button

VehicleNext
Information
Collision Location

Collision
Location
Done

Insurance Information

Insurance Information

Screen tradition: Click Next to view the next entry screen/

prompt. At the end of section the Next button will be
replaced by a Done button.
Next Screen: Next prompt or back to Information Collection
accordion screen.

Done taking pictures for image type

subsection

Screen tradition: Click Done

Next Screen: Evidence Collection accordion screen

WIREFRAMES
INFORMATION COLLECTION
DATA ENTRY OVERLAY

EVIDENCE COLLECTION
PICTURE ENTRY OVERLAY
Active user icon profile/settings menu
over muted background text and image

Text indicating that the activity is

completed

Youre all done!

YoureProfile
all done!

Text explaining potential next

steps

Please wait for police

and/ or medical
assistance to arrive.
Your records
can be accessed
by clicking on your
profile icon.

Please Claims
wait for police
and/ or medical
assistance
to arrive.
Active
YourMaps
records
can be accessed
by clicking on your
profile icon.

Progress bar indicating that

activity has been completed

Ability to change profile information

Ability to access past accident
claims
Another place to open active
assistance maps

RESOURCES

CYCLING INFORMATION

DIGITAL ASSETS

Carmichael, C. (2014, May 30). 7 Things You Should Do When You Crash Your Bike
- CTS. Retrieved April 12, 2015, from http://trainright.com/weekend-reading-7things-crash-bike/

Mionsky, B. (n.d.). Bike Accidents: What to Do After the Crash | Nolo.com. Retrieved
April 12, 2015, from http://www.nolo.com/legal-encyclopedia/bike-accidents-whatdo-after-30255.html
"What To Do In Case Of A Car Accident." What You Should Know In Case Of a Car
AccidentAllstate. Allstate.com, 2012. Web. 12 June 2015. <https://
www.allstate.com/tools-and-resources/car-insurance/in-case-of-a-caraccident.aspx>.

http://www.freepik.com/free-vector/colorful-iphone-covers_757108.htm

http://www.freepik.com/free-vector/colorful-abstract-sunsetbackground_764948.htm

http://aegeank.com/sketchactive