Project Image

ICBC Reports Case Study

Role: Product Designer, User Research, Visual Design, Prototyping
Duration: 1 month (Jan 19. 2021 - Feb 18. 2021)
Type: Academic Project
Tools Used: Figma, Adobe Illustrator, Google forms, Google Sheets, Maze
ICBC Reports is a mobile app that ensures a smooth transaction when dealing with an automobile accident. Through this app, clients can easily and safely upload their accident and witness report information to streamline their claim process and ensure all details are correctly saved.

How can I better help people who have been or recently been involved in a car accident?

As a fairly new driver and someone who has never been in a car accident, the thought of being involved in one terrifies me. For the initial app idea, it was centered around finding a way for people to easily collect the correct information needed after they’ve been in an accident because of the high level of stress and anxiety that comes with being in an accident. This would ensure that all necessary information was filed and organized for later use when filing a claim with ICBC. By doing so, this would hopefully allow for ICBC to streamline their procedure in claim processing so that their clients can move forwards from the accident.

However after conducting background research, the problem question was reframed to:

“How can people easily collect accident information and/or submit witness reports without forgetting any crucial details?”.

Conducting a survey to gain perspective

On average, it is estimated that a person will be involved in a car accident every 18 years or around 4 total in a lifetime. From the 2015-2019 data provided by ICBC, it was seen that the yearly majority of hit & runs in BC occur in the Lower Mainland.

Therefore, I conducted a survey asking survey takers whether they had ever been in a car accident and the level of information that each person remembered to collect. The goal of this survey was to see if and where people needed help when collecting information detailing the car accident as well as to see how often people act as witnesses in incidents. In my survey pool of 14 people, the majority of the participants were in between their 20's and 30's with a larger part being females. Many of the participants had been driving for more than 5 years and just under 80% had been involved in a car accident. 100% of the participants are insured under ICBC insurance.

From the survey results, it was found that the majority of people remembered to collect the drivers name and contact information (which is great!). However, many of the participants had never acted as a witness for an incident or submitted a witness report. From this information, it was seen that there was an opportunity for more to be done in terms of contacting witnesses and getting their information for settling claims.

survey info
Survey information: Survey infographic showing the information survey takers remember to take when in a car accident. Most remember to take down the other driver's name and contact information.

Coming to a conclusion from the research

From the research collected, it showed that many people already knew what to do when in a car accident. Therefore, creating an app that ensures people do not forget details is not 100% necessary. After looking at the number of hit & runs that occur on average in BC, there felt a need for more people to help settle any remaining unsolved incidents. Just from the news involving hit & run incidents, the family of the person hit are asking for witnesses to help solve the case and bring peace of mind. In some cases, witnesses and witness reports are crucial in deciding who is at fault in an accident if it was not immediately clear or if the incident was a hit and run.

Therefore, by creating a way for people to easily submit witness reports from their phones, hopefully more people would be willing to act as a witness to help those families. By modifying the problem statement, I shifted the app away from submitting an accident report to submitting a witness report.

Understanding my audience

Proto Persona

From the survey and research conducted I create the proto persona: Civilian Cara. She is an on the go mom who relies heavily on traveling by car to get place to place and run errands.

Proto Persona: Civilian Cara is an on the go mom who works and lives in Vancouver, British Columbia. This proto persona shares her goals and frustrations with the ICBC Reports App.

Customer Experience Map

In this scenario, Civilian Cara witnesses a hit and run involving a biker and a car. She chooses to use the ICBC Reports app to submit a witness report.

customer experience map
Customer Experience Map: In this journey map, it shows the steps Cara takes from remembering the app, downloading it, creating an account, submitting a witness report, and recommending it to the bike rider in the incident. This map also contains the opportunities that arrise with each step.
The paths of ICBC Reports

In order to better visualize the overall app and the steps needed to take in order to submit a witness report, I created a corresponding site map and task model. In the task model is shows the steps to create, save, view, and share a witness report.

task flow
Task Model: In this task model, it shows the screens users would take from the welcome screen to sharing a witness report. It shows how a user can either create a new report or view a previously saved one.
site map
Sitemap: This site map shows the individual sections of the app: my account (green), accident reports (yellow), witness reports (orange), and creating an account (blue).
The formation of ICBC reports

Initial Sketches

With the initial sketches, they were made with pen and paper. This allowed me to freely draw whatever initial layouts that first came to mind. In the very first sketches, I had initially planned to include preventative articles on the landing page, however those were removed in later mock ups so that app solely focused on accident and witness reports.

sketches 1 sketches 2 sketches 3
Initial Sketches: In these sketches, it shows my initial ideas for the app. These images include sketches of the original homepage, screens for creating a witness report, viewing the report under my reports, and sharing the report.


Once I had completed the initial paper sketches, I used Figma to quickly mockup and rapid prototype the wireframes. I then used the rapid prototype to conduct user testing through Maze.

wireframes initial
Wireframes: This is the wireframe flow chart showing the path from the homepage to viewing the report in my reports. The red arrows indicate the buttons which the users would click to get the the next page.

Maze User Testing

In Maze, I had 4 friends test my rapid prototype. I had not told them prior to testing what my project was about or the goal of the app. In the app, they were asked to create a witness report and share it via email.

Prior to having my friends test my prototype, I had thought that the path sequence to get from the homepage to sharing the report was straight forward and easy to figure out. Although the prototype had not been 100% finished with complete functionality, I was optimistic that they would be able to complete the task smoothly. However, that was not seen after getting back the results.

From these user tests, I found three main takeaways:

  1. Give more clear instructions of tasks and background of the app. Do not assume that users will understand anything without clear instructions.
  2. Add labels to icons to help decrease the number of misclicks. Although you may know what each icon symbolizes, never assume the users do.
  3. Give the users multiple paths to reach the same outcome. Eg. give the user the option to share a report in more than one place.
maze results
Maze Results: Following user testing with Maze, the results showed that the majority of misclicks were caused by lack of instructions and icon labels. An example is seen on the homepage, it was shown that the tester attempted to add a witness report through the search icon and tried to get to the homepage when they were already on the homepage.
Bringing ICBC Reports to life

Mockups using the data collected from user testing

After the Maze user testing, I revised my mockups to include the changes emphasized from the takeaways. The main change that occurred was the addition of labels for all icons to avoid any future confusion.

wireframes before wireframe after
Revisions: A comparison of the wireframe used in testing to the revised mockup. The red boxes show the areas in which icon labels were added.
first mockups
Mockups I: These were the first mockups made following the revisions from user testing.


After the mockups were complete, I prototyped them to present for my final assignment. However, I continued to work on them after everything was submitted. I felt that the one month duration given to research and design was not enough to create something that I was truly happy with. Therefore, I continued to tweak the design and layout of the mockups to something that I was more satisfied with as well as something that followed Google’s material design system better.

final mockups
Prototype Screens: After mockup completion, I further revised the screens to include welcome, loading, and onboarding screens.
Looking back at my one month journey

Challenges & retrospectives

  1. Learning curve for figma and google material design system took longer than anticipated
  2. Would have liked to reword survey or conduct interviews to further understand individual experiences and needs
  3. Come back to the original question of “How can I better help people who have been or recently been involved in a car accident?

Looking toward the future:

Something that would be interesting if this app was ever created in real life for ICBC would be to explore how the information would be connected between the client and ICBC? I think the process that ICBC would take to ensure that their customers’ information is secure but still easily transferred from the app account to the ICBC claim reviewer would be interesting and would allow me to learn more about the technicality scope when building an app.