I worked with the team at Parkd for a year from 2016 to 2017. While early work involved designing experimental apps around vehicle fleet tracking, we eventually decided most traction was with a small 3 day hack to automate parking payments.

Initial quick prototype

A preview of the main screens, designed at a fast pace to give the developers something to work with.

How Parkd works

At it's simplest, Parkd allows drivers to pay for their parking via an app. Using your location, it'll know the pricing/rate of the relevant parking spot. Elsewhere in the app, you can then view your parking activity and receipts.

However, Parkd also offer an OBD device that can be plugged into nearly all modern vehicles. This allows Parkd to be fully automatic, with parking sessions started and stopped without touching a thing. The app can than be used to browse past activity, adjust payments, and peruse other information.

Designing Parkd

In terms of individual views, Parkd is a fairly small app. A lot of the design work centred around reacting to different circumstances and notifications (there's many scenarios that can affect a parking session).

React Native was utilised to make multi platform iOS and Android development easier and quicker. This meant interface design couldn't be too opinionated towards either platform.

A minimal dashboard

It was decided from the start that the map should be a focal point of the UI, as it can be used to show the different parking zones close to the driver.

At the bottom, we just pull through the super high priority details. When a parking session is active, more details are accessible by tapping the block's arrow icon.

Your parking history

Once a parking session is complete, the driver is shown a receipt with the details of the park.

These are also accessible at any point from the parking history view, where sessions can also easily be marked as a business expense.

Navigating the app

I'm generally a big advocate for tab based navigation in mobile apps, but this was one occasion where a hidden hamburger nav made a lot of sense. Ultimately, the home screen is what will be used by drivers 75% of the time. It didn't make sense to constantly force links to the other views in the main screen.

Notifications

We wanted to create an interface that could be utilised for any notification. While early versions used slide down banners, these didn't work so well for notifications where actions are required. So we opted for modal style alerts that can't be ignored.

Park and Forget

Onboarding and setup of the Parkd OBD device

As mentioned previously, Parkd can be extended via a plug in device that automates all your parking activity. This requires a bit of setup within the app, which uses a step-by-step introduction and activation flow.

Creating a website

With the app virtually ready for submission to the two stores, I travelled over to Antwerp to work on the Parkd website.

Some key screens

Parkd homepage

The cities page

The business page

The careers entry page