Redesign of Calculation Options

City Coin App

 2020

Overview

Colu is a platform, powered by a mobile app, delivers a city coin that engages city residents with city rewards, thereby helping cities achieve their goals.

The Use

The app is used for payment in various businesses across the city. Many of them are bars, restaurants or cafes.

A Lack was Discovered

While using Colu in order to pay part of a bill, I got tangled up in summing my part's cost and adding the tip. I thought it could be solved by a simple solution.

Before

IMG_4691.PNG.png

After

X - 24.png

The Problem

The payment tool is built as a standard numeric keyboard that limits advanced calculation options. The computational experience can be improved in order to provide an experience that is human-centered.

Research

To gain an understanding of Colu's users group, I conducted interviews with three of them. In addition, I learned from my own experience with the app. 

The diagram below shows thoughts and moments that were revealed in interviews and their impact on the characterization.

"I use a calculator while using Colu."

Add calculator's elements.

‏‏צילום מסך (19).png

"It's not so easy to calculate these things after a beer."

Add basic computational aids.

Simplifying- 

Selecting only computational

 elements that are must.

"Usually I need to pay for more than one item on the bill."

Add a summary tool.

+

"When I tip, I ask the waiter to add a percentage. "

Add an automatic percentage calculator.

%

"A way in which I as a tourist can learn the local custom regarding tips."

The tool will offer tip percentages according to the local norm.

Tip's Levels common in Tel-Aviv:

10%

12%

15%

20%

Had in Mind While Working

  • Keep the app's aesthetic language, in terms of colors and preserving layout- a keyboard structure.

  • Stay at the same page to reduce unnecessary clicks. 

  • Local tip's levels offered.

  • Only must computational elements.

#49DEB6

#000000

Solution 01

There are two main needs that have emerged from the research and will be met by designing the following tools. They will provide a user-centered accessible calculation experience of adding and tipping.

 

The first enables the most basic math action of addition. The second, allows simple and automatic tip percentage calculation suited to the local norms. Both are integrated in the existing keyboard layout of the app itself. 

Frame 2.png
X - 4.png

Want to Try It?

No One is Perfect- Some Problems

  • There is no immediate visual representation of the accepted tip ranks.

  • The slider gives a sense of an inaccurate amount that may create discomfort in the user, since the user's money is embodied in it. 

  • Such a tool is usually used for amorphous terms like emotion or in a multi-stage hierarchy, like those of Google Flights and Instagram. 

​ Google Flights price slider:

צילום מסך 2020-09-17 185004.png

​ Instagram:

Instagram-emoji-slider-2-419x745.jpg.opt

Let's See What Others Did

In some other products that make the tip-giving experience accessible, the solution is different then a slider .

  • All set each tip level in a separate button.

  •  Using different percentage of screen size. 

In Lift, for example, the functionality of the tool is explained in the buttons themselves and therefore creates a more compact design.

Lift

image (1).png

Uber

22TECHFIX1-superJumbo.jpg

Gettaxi

unnamed.png

Solution 02

  • Separated buttons.

  • Immediate visualization of the local existing tip levels.

  • Maintains aesthetic language and keyboard structure.

  • Reducing unnecessary clicks- integrating in existing page. 

X - 24.png