ParKam App

UI Design, UX, Prototyping, Usability testing

The Project

When I first joined ParKam (late 2016) the company already had a lean demo version of the app, with the following design. There was no initial UX process (wireframes/prototype) that I could go back to for reference.  

It was clear from the get-go that we needed to take the existing demo version to the next level in terms of UI, user flow and general user experience.

My Role

  • UI/UX
  • Branding
  • Usability testing
  • MVP definition
  • Wireframes 
  • Prototyping
  • Icon design
  • Marketing

Demo Version

(before my time)

app_screens_oldparkam

Prototyping, Wireframes, Flow Chart

After reviewing it myself and gathering some feedback from users and ParKam's management team I proposed to take a step back before tackling the UI issues of the demo version.

With the app's MVP in mind, additional features that we wanted to add and a better understanding of the product I created a prototype with wireframes and an initial flow chart for the app.

Selected Wireframes

wireframes_ppt_03_version12
wireframes_ppt_03_version14-1
wireframes_ppt_03_version19
wireframes_ppt_03_version115
wireframes_ppt_03_version13
wireframes_ppt_03_version15
wireframes_ppt_03_version111
wireframes_ppt_03_version118

Initial Flow Chart

flow_diagram-1

UI Designs

Version 1 (2017)

Once we had a clear vision of the app's MVP version and the roadmap to follow I started working on new UI designs.

One of the main differences compared to the demo version was the decision to use rounded shapes for buttons, icons and other elements throughout the app.  

Instructions Iconography

Custom iconography for the navigation instructions, based on the rounded graphic approach for the entire UI.

Screen-Shot-2019-12-31-at-20.14.43

Color Palette

I decided to use the following color pallet of gradients, based on ParKam's existing brand (blue gradient).

pallet-2

Car Size Icons

car_sizes

Selected Screens - Version 1

app_screens_v1

Onboarding Screens - Version 1

app_screens_onboarding

iOS Version 1 - UI Flow Chart

Flow_ios_V1

Android Version 1 - UI Flow Chart

Flow_Android_V1-1

Additional Selected Wireframes

features and alternatives we decided to keep for future versions (after MVP)

app_screens_pay

Payment Screens Mockups

01-5

Parking Radius Settings Mockups

02-2

New Features & UI Iterations

(2018-2019)

navigation_system-4

Once we completed our MVP version of the app I started working on desigining new features and iterating existing screens in order to improve our UX and flow.

iPhoneX-Mockup_nav3
iPhoneX-Mockup_nav5
app_screens_2018-1

Product Scope Document

(2018-2019)

In 2018 we did not have a product manager in the company, and so I created a document describing the entire flow and scope of our mobile app.

It included UI/UX description for each segment on the various screens, as well as the logic and definitions implemented by our developers.

It is updated regularly as we add or change features in the app.

0010
0025
0023
0029-1

The Full Product Scope Document (slide gallery)

In 2019 we decided to send an email to our Israeli users with the latest updates and new features on the app:

0519_email_ios