Home > User Experience > Project showcase: Split the cheque

Project showcase: Split the cheque

Project showcase: Split the cheque


In this article we’ll tell you how we’ve managed to create 149 design screens for the mobile application, icons, 2 dashboards and a landing page not having a clear proposal, client’s brief and functions list. Welcome to our showcase, hope, you’ll find it interesting!

Shot of the project, made by Nick Zaytzev and Jane Gordeeva in TheRom

Client’s idea was to create an app for cheques splitting in bars, restaurants, etc between guests sitting together. It’s quite a good idea actually to pay with those you came just through one app. It would solve numerous every-day difficulties for anyone, who ever wanted to drink some beer in the company of friends.

“Despite a bit amount of functions of the app, we’ve chosen one-screen approach, when all main functions and links on the inner pages are placed on the home screen and any action is made from this screen directly. Secondary functions and pages are placed in the burger menu, that has less priority. It allowed to keep the attention of the user on the main features and functions and cut the user flow down” , — art-director of the project, Nikita Zaytzev

Shot of the project

The client had neither a screen map nor a user flow. However, he had old app screens other designer done. And step by step, having no estimation and set workflow (client rejected the necessity of these things), we’ve opened time&material contract and started our cooperation from the 8th of June — our days.

“it was app redesign, the previous flow was completely not clear and we had to create many things from the very beginning, improving the design at the same time” , — designer of the project, Jane

When you have no guarantees and this is a new client, you can secure yourself with few things:

  1. Work only with time&material
  2. Use Figma, so the client can watch the process — despite the fact we separate work, shared and sales files, we shared file every day to keep a client posted about the progress;
  3. Make permanent follow-ups and show small results every day;
  4. Look if the client is interested in the project.

We’re skipping UX Research stage and wireframes on purpose in this article because we just didn’t have them in our project.

For the brand new solution we’ve started right with UI — strange, right? We’ve still wondered how we did that project!

Screenshot of the project

Main tasks, that cross-platform app had to complete were:

  • add friends to the self-made community in the app to split cheques;
  • understand, in what places and restaurants you can use this app;
  • get cheques in the app;
  • view transactions history and pay the cheque inside the system.

“from the very beginning there were many design versions, we’ve decided not to make a design too complicated and chose one of the simplest options, where only one colour and emojis were used” , — designer of the project, Jane

Such an approach allowed us turning the payment process into the game.

The search of the restaurant in the app

All the places we’ve highlighted with different colours and classified on:

  • fast food
  • cafes
  • restaurants
  • pub
  • vegan food

In this way, the user could quickly find a place interesting to him.

A card of each place had such info as:

  • location;
  • a chance to get a route from the current location;
  • what presents can the client get from paying the cheque through the app;
  • similar places.

Getting and splitting the cheque

How can a user, sitting in the restaurant, get a cheque on the phone? We’ve used all common things to solve this solution, first of all, a camera and a keyboard of your smartphone.

Here are the ways to get a cheque:

  1. Scan QR code with the in-made camera of the app;
  2. Type in the number of your table manually;
  3. Get a code from the administrator.

To separate a table number input from the input of the tips, we’ve added a field on the bright background on the top of the screen, where the user will be entering a table number.

A code from the administrator visually will be different from the table number — each number is shown on the separate field and the bottom of the screens there is an option to copy the code.

But you need to make sure, that it’s your cheque you got in the app. For that, we’ve made a coming cheque similar to Wallet cards. Appearing on the top of the screen, the cheque has all the required information about the order positions and a total amount to be paid. After checking the amount, the user can accept or delete the cheque. The same things are going on when the user retrieves a cheque from his friends.

To split the cheque, we’ve included for the user several options at the same time:

  1. choose friends from the floating panel, that’s opening on the bottom of the screen after approval of the cheque;
  2. choose an option to pay by yourself, that’s important if you’ve come to the restaurant alone or want to pay for your friends.

“We used floating panels, it’s quite common, but still new pattern”, — designer of the project, Jane

After the friends are chosen, all of them appear online on the page of the choosing positions in the app, that needs to be paid. Simply tapping on the position, next to the total amount you can see your profile photo. Others invited to the cheque sharing do the same.

In the case you ordered for example 4 beers or 3 lattes, arrows “more” and “less” appear under the position in the cheque, to regulate the number of goods you need to pay.

When positions are chosen, users can see how much they will pay and an updated cheque with amounts to be paid for every user. Next step is to input the amount of the tip or choose from the offered options. Or you may not leave them at all — that’s up to you.

Payment is realized from the bank cards, added to the profile previously.

Balance

To track wastes and cashback, that users may receive using an app, there is needed to:

  • choose a card you paid from;
  • type in what amount was wasted;
  • choose where you were splitting a check (choose a place);

After app generates automatically a chart with days and wastes. For the data visualization, we used a bar chart, showing the wastes and days. Users can choose time frames to be shown: week or year.

Gifts

Splitting cheques in different places, user start getting bonuses for free dishes. For examples, for 7 transactions you can get a free steak or for 3 transactions — a salad.

To keep user posted about transactions, we are showing in the app not only current available gifts on the floating panel, but also upcoming gifts and progress bar with the transactions left until the next gift.

The app became our first part of this project only. Later, we worked on the dashboard for users and restaurants and materials for investors attraction.

“admin dashboards was one of the most complicated tasks, as similar solutions were not presented on the market before or there was limited access only, that’s why we had to create many functions ourselves” , — designer of the project, Jane

But we will talk about it in more details in the next article…

P.S. Even if there are no similar solutions on the market, even if your client can’t help you with required data and you have no workflow for the project, genius decisions can come to you on the UI stage. Designer — is not just a pixel-mover, it’s someone way more creative!



Source link