ParKam BI Tool

UI Design, Feature Redesign, Branding & Marketing 

The Project

ParKam's BI tool was designed for parking lot operators and city control rooms to help them get a better understanding of their parking assets, and generate value from this data. The main features on the BI are:

  • Real-time parking availability map
  • Occupancy & activity heatmap (per hour/day/month)
  • Parking enforcement - real-time alerts and history of parking violations
  • Occupancy reports

My Role

  • UI/UX
  • Branding
  • Icon design
  • Wireframes
  • User research

BI - Early Version

(2016)

cc_2016

While the data we were able to show on the BI was impressive and valuable for our users, the UI was outdated, messy (no information hierarchy), inchoerent, with virtually no branding whatsoever. In a nutshell - a very problematic user experience. 

It was decided to split the re-design process into 2 steps:

  1. Adjustments to the existing version - Icons, colors, typography, new login page - any small segment I could change or redesign within the exisitng UI structure. The following screenshots already include most of these adjustments.

  2. Building a new version - a complete re-design with additional features, and a new look & feel. Scroll down to see more on that. 
login_parkam02
CC_new_menu_about
maps-jer
cc_old_2016_c
cc_old_2016_b
cc_old_2016

BI Re-Design Process

(2017-2018)

Going into this process, I had set myself a few goals for the new UI:

  1. Show Me the Numbers - more data widgets on every section, showing relevant status data (numbers, charts, statistics) in a more prominent and graphic way, even at the expense of the maps.  
  2. Flexibility - the new layout and grid will suit various types of data display, for any future data we might add.
  3. Dashboard Screen - create a new screen display showing the key performance indicators and the most relevant data for our users. 
  4. ParKam Branding - the old version could have been any company's BI tool, so it was important for me to reflect the company's brand in the UI as well.
Screen-Shot-2020-01-06-at-14.51.37
SG
Grid_style_3_and_1
Grid_style_dashboard_A

The grid included 4 columns, to be used more frequently as 2 columns. Either 2/2 or 3/1.

Grid_style_2_and_2
Grid_style_dashboard_B

Another structure designed to include many variations is the 4 cubes layout, which can turn into 5.

Grid_style_4column
Grid_style_dashboard_C

The Result

Login-Copy
Parking_dashboard_latest
Parking_for_cisco-Copy-5
Parking_Reports
CC-merge-about
Parking_Heatmap-02
Enforcement_ongoing_APRIL2018
Enforcement-reports
Enforcement_history
400
403
BI_full
website_imagemaking_3D_strips
control_center_city
cc_print

Live Data on the BI

(real parking sites)

Screen-Shot-2020-01-05-at-15.01.54
image4
Screen-Shot-2020-01-05-at-15.03.35
image3

BI Manual

(2018-2019)

Once the new version of the BI was built and the company gained more customers we needed to create a manual for first-time users of this tool. Attached is one of the latest versions we had sent clients (in English) as part of our product onboarding process.