RingGo Parking App redesign

Whilst using the RingGo parking app for Android, I experienced a few usability issues that I thought could be improved upon. I also thought that the UI could be simplified and modernised and that this would be a good project for me to try out the early access version of design and prototyping software, InVision Studio.

RingGo-Animation-S8

I conducted some quick usability testing with friends who had recently used the Android app, and many of the same issues were experienced.

I have highlighted the UX/UI issues on the screens of the existing app below. Select the pencil icon for further details on each:

null

Search and location/map icons are placed high to the right with low contrast, which results in them being difficult to access.

Recent Parking section includes any current residents permits, but no user action is possible.

null

Location name and number given low visual priority.

null

Controls to select or add a new vehicle are unclear.

Location name / number is given low visual priority.

null

Labels are given visual priority over the more important user information.

The following features/improvements were identified and sketched out:

  • Combined search and parking location number box
  • Making location function more prominent
  • Removal of permit from recent parking
  • Clearer information heirachy
  • Placing key actions lower down the screen / more towards the centre
RingGo-sketches-1a
RingGo-sketches-2a

Testing with paper prototypes suggested there was little need for a menu bar at the bottom.

Users mentioned they did use the menu in the existing app to change profile and vehicle details, but this was needed infrequently. Therefore the decision was made to leave the menu hidden, accessible by an icon at the top of the screen.

Recent parking was also seen as less important, with many users saying they rarely parked repeatedly in the same location (excluding home address etc). The primary screen was thus simplified further by removing this.

High-fidelity designs were created in InVision Studio, with transition animations between screens.

Loading-2
1.Home-park-search
2.Location - Map
3.Location - List
4.Location
5.Confirm-pay

It was relatively straightforward to create the screens and animations in InVision Studio. Although it still does have some bugs that need ironing out at time of writing, I think I'll be returning to the software soon to investigate more complex animations.

RingGo-Animation-S8