grid01

Clipp

Clipp set tab screen Clipp venues screen Clipp tab screen

The team at Clipp created an app which allows you to safely and securely pay at bars and restaurants. They approached Matt And Design late 2014 to address some existing UX issues as well as develop new features for the next release of the app.

We decided to focus on iOS first allowing more time to work on Android whilst the iOS app was in review. This insured the update would be ready for the crucial summer party season in Australia.

01

Fixing Notifications

The Clipp app requires both location and notification permissions. The trouble was that it wasn't entirely clear why; and this created a huge drop-off point for users. They'd get to the permissions screens select 'no' and then be stuck.

We decided to use a technique called pre-permission dialogs, preparing the user and explaining why permissions are required.

View Prototype
Showing the Clipp notifications screen
02

UX Patterns

Previous versions of the app used a slider to set the tab limit. Though a common UX pattern they received a number of complaints about the interaction; Tap target size and a fixed number pricing tiers—7 along the length of the slider.

We chose to revert to buttons, one to increase the value and one to decrease. There's also the option to tap the value in the centre to type in your own amount. We ran short of time to implement this feature, though it's not a critical feature and could very easily be added in later versions.

I built a quick prototype with Framer to demonstrate these benefits to the team.

The after version of the Clipp set tab screen
  • 01
    Increased tap target size 150%. Larger than the 44dp recommended in the HIG and much larger than the thumb element on the slider.
  • 02
    The action buttons are now in fixed positions and it's much clearer how they relates to the value shown in the middle.
  • 03
    Users can set their own tab limit by tapping the value rather than being limited by the amount of stops on the slider.
03

Tab Summary

Most of the time in the app is on the Tab screen. It's where you share a tab, what you show the staff when you order and where you see what you've already ordered. This creates a very information dense screen and as new features are added it would only get worse.

In the same way we use headings and paragraphs to make blocks of text easier to read we use visual hierarchy in interfaces to make them easier to digest and locate information. We went to great lengths to organise the elements on this screen, removing unnecessary elements whilst promoting more important ones.

04

Dark Interface

One of the primary use cases for the app is in bars and pubs—both low light situations. Although not part of the original brief I explored a version which was better suited for these sorts of environments. The idea is that a darker interface more closely mimics the dimly lit environment requiring less adjustment for your eyes.

After showing the mockups to the team we agreed it was important enough to fast track for the next release. On the surface it sounds like a simple change, though it requires going through each screen to recreate the design and assets. I took this as an opportunity to refine many of the assets.

The new dark version of the Clipp app
4.5/5 star ratings in the app stores

So far the response has been really positive. Since the update late 2014 the app has received an average of 4.5 / 5 across both the App Store and the Play Store.

  • Really impressed at the UI and experience. - Fabio Dos Reis
  • Intuative interface, totally frictionless. - Barnacle2011
  • The Uber 'customer experience' of bars… - McDiver

Team

  • William Law — Engineer
  • Emma McDaid — Marketing
  • Toby Llewellyn — Community Manager
  • Stuart Hunter — CTO

Role

UI, UX and prototyping. Strategic planning and communication between team members.


That's it for this project…

View all projects or get in touch