COBY - Buy, together by Aris Dotti

University of Applied Sciences and Arts of Southern Switzerland Master of Advanced Studies in Interaction Design

COBY BUY, TOGETHER

Interaction Design Lab

Student

Mentor

supsi-dacd-lcv

Aris Dotti

Federico Lameri

Campus Trevano

aris.dotti@gmail.com

frog design, Munich

ch-6952 Canobbio

+41 79 687 64 67

federico.lameri@frogdesign.com

Lugano, July 21th 2016

Aris Dotti

Contents

This work is licensed under the Creative

Research topic definition

Scenario design and concept

CommonsAttribution-NonCommercial-

1.1

Research topic

3.1

User research

NoDerivatives 4.0 International (CC BY-

1.1.1

The mobile revolution

3.1.1 Insights

NC-ND 4.0).

1.1.2

Invisible money

3.2 Personas

To view a copy of this license, visit

1.1.3

Sharing economy

3.3

Onliness statement

https://creativecommons.org/licenses/by-

1.2

Rsearch question and hypothesis

3.3.1

Concept pillars

nc-nd/4.0/

1.3

Rsearch aim

3.3.2

Concept definition

1.4

Rsearch outcome

3.3.3

Create a payment wallet

3.3.4

Collaboration and gamification

Analysis of the State of the Art

2.1

Mobile payments

3.3.5 Features

2.1.1 Blockchain

More informations are available at

2.1.2

4.1 Moodboard

coby.arisdotti.com

2.1.2.1 Big players

4.2

Visual guidelines

2.1.2.2 An opportunity for small companies

4.3

Information architecture

2.2

4.4

Sketching session

2.2.1 Venmo

4.5

Wireframing and usability tests

2.2.2

4.6

Reinventing navigation patterns

2.2.3 Popmoney

4.6.1

Might the swipe be with youser

2.2.4 Paymit

4.7

UI elements

2.2.5

Facebook Messenger

4.8

UI design

Snapchat Snapcash

4.8.1

Hero flow #1

WeChat Pay

4.8.2

Hero flow #2

2.2.6

Group expenses management

4.8.3

Hero flow #3

Contactless payments

Person to person (P2P) Square Cash

2.3 Insights

Project development

4.9 Prototype 5

References

Coby

Research topic definition

1.1 Research topic 1.1.1 The mobile revolution The first Moore’s law, enunciated in 1965 by Intel’s co-founder stated that “the number of transistors in a dense integrated circuit doubles approximately every two years”. This has been true until 2013, nowadays technological development is even faster. Everyday technology is getting more important in our daily life, in our way to communicate and relate to people. For many years it was addressed to professionals, with the goal to improve productivity but something drastically changed in the last decade. Back in 2007 Apple introduced its iPhone Edge whose declared target were Blackberry’s users with their professional needs. IPhone failed on achieving these goals and BB user’s remained loyal to their brand but Apple reached a different, unexpected, kind of users with completely different needs. Probably some of this success is thanks to the community that find a way (called jailbreak) to install custom software on it thanks to the Installer.app first and Saurik’s Cydia later. They opened a new world to the mobile app market. One year later, July 10th 2008, Apple announced the AppStore which quickly became a global success and a complete game changer. The new iPhone target, as analysed by Nielsen and reported by Macitynet1, was represented by male under 35, single, interested in technology who used the device for listen-

ing to music, surfing the web, taking pictures and watching video contents. The magic of the Apps was that users were able to buy a product and extend its functionalities following their own needs. Most of available apps are games but many others allow to help the user in its daily needs: creating a grocery list, setting reminders, taking notes, sharing content and communicating with people on social networks, reading news, shopping, … Devices became the medium and internet the infrastructure on which human activities are based; from social relationships, to those business and institutional but also for the personal space. Between 2008 and 2009 the number of connected devices exceeded world population. Not only smartphone, tablets and computers but new “smart” devices like wearable and home automation devices. This allows M2M (machine to machine) communication, which is known as Internet of Things.

Source: Cisco IBSG, April 2011

1 RED. MACITYNET, Ecco l’identikit dell’utente iPhone europeo

Aris Dotti

The roadmap to innovation Most major payment innovations have occurred in the last 15 years

Coin cards Mobile check deposit P2P mobile payments Mobile banking Debit cards First branchless bank NFC Credit cards 1940

Online banking

ATMs 1950

1960

1970

1980

PayPal launched 1990

2000

2010

Mobile eWallets Tablet banking Source: Antonio de Pasquale, Fading Money, 2015

1.1.2 Invisible money UXLausanne2015 | #fadingMoney @myinteraction

It is in this context that we are changing our habits, our behaviours and approaches to things. “Money” is not spared from this huge change. For ages we have used to exchange a good or service with money. Although money is not going to disappear in a short period of time, they are experiencing an evolution. Tangible money is becoming everyday less popular and most of transactions are done digitally, invisibly. This is the fading of money. Online banking has been introduced over thirty years ago but after the smartphone revolution the innovation in finance started growing fast. From focusing on product and transactions the evolution started focusing on customer experience and information economy, in a world where everything is a service. Physical touchpoints like banks and ATM are getting less attractive, while everything is shifting to desktop and mobile devices – mostly smartphones. Customers wants the payment to be as seamless as possible making it just a required step before getting what they are really interested in: the good or service. Banks started creating a cross channel strategy by

Square mobile payments

adding additional touchpoints. In the same 13 - TheGoogle financial Brand time digital companies as AppleNovand entered the race creating a new business disrupting the market. New start-ups are trying to do the same rebuilding the market from the ground, like Venmo, Transferwise and Square. But this is not the only change happening: new currencies are getting created specifically for living in a digital world, such as Amazon Coin or Bitcoin (one of a multitude based on revolutionary Blockchain technology). What changes at first is the users: we are in a transitional phase but the youngest are digital natives; they were born in a digital world and have different expectations on things. They need seamless, real time and personal experiences. A payment shouldn’t take more than just a blink of an eye. Bill Gates said that “We need banking but we don’t need banks anymore. Do you think someday we can open bank account or ask for loan without physically have to come to the bank?”2.

2 Amberber, Emmanuel, ‘Banking is necessary, banks are not’ – 7 quotes from Bill Gates on mobile banking

Coby

Source: 10th Annual Cisco Visual Networking Index (VNI) Mobile Forecast Projects 70 Percent of Global Population Will Be Mobile Users, 03 February 2016

What users need is a built-in experience, seamlessly integrated into the device. Banking is changing because user’s approach to banking is changing. In this context start-ups are taking advantage creating many digital alternatives to banking, for examples with credit cards connected to a specific a app, allowing to easily track user expenses (see www.number26. eu). Most of them are designed to build services similar to digital bank accounts, others are focusing on the single user experience in relationship with a merchant, for example creating customised loyalty programs, other are creating experiences in new contexts. The market of mobile payments is at its childhood and possibilities are potentially endless, together with the chances to generate new needs for the user by changing their habits.

1.1.3 Sharing economy We live in the age of sharing economy, an economic model in which users are actually borrowing, renting or gifting goods to other users. This means users are constantly collaborating in order to achieve goals in an easier, quicker and cheaper way. There are services offering any kind of goods, being them physical or digital assets like cars, apartments, food, kitchen, friendships and even time. It’s all about collaborative consumption, building new relationships between people or making them stronger. One of the context that is still taboo when talking about “sharing” is “money”. Nobody wants to share its money, that’s an untouchable asset.

Aris Dotti

1.2 Research question and hypothesis

1.3 Research aim

How is it possible to design a seamless mobile payment solution that focuses on group expenses improving situations in which a payment must be done between two or more users? Most of todays actors are focusing on the payment process experience using smartphones in physical stores. Many are using proprietary technologies and therefor are not accessible to everyone. On the other hand, many of the money transactions we do are actually not with merchants and in stores but rather with other end users. None of the existing services is really well covering this important part of people’s daily life.

The goal of the research is to investigate what are the needs people have when talking about money exchange and “sharing” with other people. Instead of starting from the experience during the payment in a physical store, which means the relationship between the single customer who owes money and the merchant who receives them, I will start to research in a different area in which people need to make more complexes payment: groups of users. Payments that are due to other end users without intermediaries. I think there is a great potential which is still not expressed yet. Some scenarios I am referring to are the relationship between flatmates, when they need to split the grocery bill or the apartment’s monthly fee. When having dinner with friends at the restaurant and it takes 15 minutes for everyone to look at the physical bill and calculate how much they have to pay. Or when a friend is in charge to buy a group birthday gift and has to wait weeks for other friends to pay him back. Money is a very delicate topic nowadays; people are not rich, especially students and most of young people. This is the reason because the above mentioned scenarios could actually have impact on the relationship between people, on their friendship and most of all their faithfulness to each other. Since these are my assumptions, the first thing I have to do is understanding and well define what people’s problems and needs are.

Coby

1.4 Research outcome As a consequence of the user research the project goal is to provide a flawless product experience that solves daily problems. The outcome project is an advanced service based on a mobile application that solves userâ&#x20AC;&#x2122;s needs. It could be further developed introducing more touchpoints. The app will be prototyped using different tools allowing the understanding of the concept idea and main interactions.

Splitting the bill can be a payinful process.

State of the Art analysis

Aris Dotti

2.1 Mobile payments Mobile payments are one of today’s hottest topics. This kind of services identifies every platform and technology allowing payments or money transfer through a mobile device. Regardless for the communication technologies and the payment instruments adopted, the innovation point is the use of a smartphone or tablet: digital devices wirelessly connected. For example, instead of paying using cash, cheque or credit cards, the consumer can use its phone. In order to understand what is lacking in today’s offer and which are the opportunities I can work on, an analysis of the state of the art is necessary. There are five primary models for mobile payments1: Premium SMS / MMS in which the consumer is sending a simple SMS text message containing a payment request to a short code – a special telephone number used to address messages from certain service provider’s mobile phones. The charge is then applied to the phone bill by the carrier. Direct mobile billing can sometimes appear as a payment option during checkout at an e-commerce website. This model uses a two-factor authentication involving a PIN and a One-Time-Password to charge the purchase to the consumer’s mobile account. Its comfort and security is granted because it bypasses banks and credit cards companies. Mobile web payments on web pages or applications installed on the phone normally use WAP as underlying technology. The most

common systems include a credit card payment flow allowing the consumer to enter their card details to make purchases. Alternatively, many online companies like Google, Amazon and PayPal offer different services called online wallets - web services that allow users to store and control their online shopping information, like logins, passwords, shipping address and credit card details, in one central place2. Bitcoin is an online payment system developed in 2009 which uses virtual currency. One of the biggest advantages is that there are no middle men like banks to take additional transaction fees and purchases are completely anonymous. This system is still finding difficulties to get popular, tough small percentage of merchants accept it. Some people are purchasing bitcoins as an investment, hoping their value will increase over time.3 Contactless payments systems are based on devices like credit cards, debit cards or other mobile devices that use embedded chips to connect with a reading terminal. They are mostly used in physical stores to pay for purchases. Waving a compatible phone near a reader module allows the transaction without requiring authentication and the payment can be charged to a mobile or bank account or a pre-paid account. Most used technologies for making secure payments are Radio-Frequency Identification (RFID) and Near Field Communication (NFC). Another system is based on audio channels using acoustic features of cell 2 Online wallet, Wikipedia

1 Mobile payment, Wikipedia

3 Pan, Jennifer, What the heck are mobile payment systems?

Coby

Bitcoin index chart on April 22, 2016 (source: https://www.bitstamp.net/#fontpage-overview-info)

phones. These systems are called Near Sound Data Transfer (NSDT), Data Over Voice or NFC 2.0 and produce audio signatures that the microphone of the cell phone can pick up to enable electronic transactions4. Today industry is pushing the most towards the last two systems: the goals is making payment as effortless and fast as possible.

2.1.1 Blockchain The technology behind Bitcoin is a protocol called blockchain. According to many5, this is one of the greatest innovations in the last few years and it will surely change the world. Blockchain is a peer-to-peer network. This means that there is no intermediary between users: no banks, no controls. It makes the exchange of money completely secure and anonymous. The crypto currency, for example Bitcoin, is a simple file with an economic value. Owning this files allows to buy services or item in the network. On April 2016 there were about 15’500’000 bitcoins6; the number will grow until 2140 when they will become about twenty-one millions. One Bitcoin worth is about 450 US dollars. Blockchain is an algorithm that encrypts the valuable files. It’s like connected blocks that create a chain. Every blocks are protecting new Bitcoins. It’s like gold caves: gold is already there but it needs someone that 4 Metz, Rachel, Why Some Are Turning to Sound for Mobile Payments and More

looks for it and makes it free. People doing this job are called miners. In 2009 discovering new Bitcoins was really easy and their economic value was almost zero (people were giving them away for free). During the years, solving this blocks became more and more difficult and now an incredible computational power is needed to solve them; that’s why their economic value increased and will keep the trend. Every two weeks the complexity of these codes increases: the real innovation is the algorithm at the base of blockchains: it is self adapting according to the the quantity of blocks solved. This system is able to guarantee that every 10 minutes a block is solved, freeing 25 Bitcoins. It’s completely autonomous and keeps the right balance inside the system. Stefano Pepe, owner of a start-up working on blockchain, believes that “this is the first real application of artificial intelligence”7. Nodes are the part of the network validating transactions. They are replacing real world’s banks in checking the fairness of transactions. They are like registers recording every Bitcoins movement in order to avoid fraud or bugs. Being blockchain completely peer-to-peer and therefor open, everyone can be a node by simply installing a software. Security and privacy are one of biggest concerns nowadays. One of the biggest value of crypto currencies like Bitcoins is that they are completely secure and anonymous. From one side nodes are verifying each transaction making them impossible to falsify, from the other side this is very convenient for illegal commerce and backdoor market.

5 Jiwani, Ali, Three predications on the future of payments 6 https://blockchain.info/charts/total-bitcoins

7 Pepe, Stefano, Investire Bitcoin

Aris Dotti

Apple Pay

In 2015 about 500 millions dollars have been invested in start-ups using blockchain technology in different areas, not only financial markets but everywhere a third entity is needed to guarantee transactions. Opinions on Bitcoins and blockchain are very different, but the potential of a future unique digital currency is enormous.8

In the last years we saw an acceleration of the research and development processes and even if since 2010 we read that “this is going to be the year”, nowadays we are actually close to the right year. For the first time, demand and infrastructure are maturing and coming together to make mobile payments easy, secure and intuitive in a way that they never have been before10.

2.1.2 Contactless payments 2.1.2.1 Big players If blockchain might be seen as a revolution which will slowly take place in our daily life, many mobile communication companies recently understood that contactless payments are, de facto, the upcoming evolution and they started to ride the market. It has been since the mobile device revolution about a decade ago that this discussion started growing fast, industry watchers9 predicted that the ubiquitous nature of mobile devices signalled the end of the traditional wallet giving the way to a new technology embedded in mobile phones. So far it didn’t happen, we are mostly still using traditional credit cards and cash to pay for in-store purchases.

Many players entered the race and are working on their own payment solutions. It is easy to recognize some of them because they are labelled “[CompanyName] Pay”. They have a lot in common but they use different proprietary technologies. Mostly are designed upon NFC, tokenization and fingerprint readers. Examples are Apple Pay11, Android Pay12 and Samsung Pay13. While both Apple Pay and Google’s Android Pay make use of NFC for their transactions, Samsung Pay uses a different solution called MST, developed by LoopPay, a company 10 Morris, Glenville, THIS is the year of mobile payments!

8 Jiwani, Ali, Three predications on the future of payments

11 http://www.apple.com/apple-pay/

9 Pozin, Ilya, 3 Trends In Mobile Payments You Need to Know

12 https://www.android.com/pay/

About

13 http://www.samsung.com/us/samsung-pay/

Coby

Google Hands Off allows to pay witouth using the smartphone at all

Yoyo Wallet

acquired in 2015. This system allows a small device, as a mobile cover, to simulate magnetic cards for any normal POS terminal, enabling contactless transactions without any additional hardware requirement for the merchant (as the NFC readers)14. This technology is embedded in Samsung’s devices starting with Galaxy S6 (launched back in July 2015). Google in February 2016 announced a pilot program for its new Hands Off in San Francisco. All the customer has to do is tell the cashier he’s “Paying with Google”15. This is how it works: when the user’s phone is close enough to be recognized by the cashier’s point-of-sale system, his portrait picture and name will be shown on the cashier’s screen who will have to identify the customer’s face and ask him for his name. Google is trying to improve it letting its software do the security checks. The strategies behind Apple’s, Google’s and Samsung systems is to build customer

loyalty thanks to their ecosystem of services. Apple Pay wants to see Apple iOS system growth, Android Pay is for Google Android and Samsung Pay is connected to the Samsung Galaxy line of products. This means that apparently none of them aims to become a leader in mobile payment area, but rather to support the continued growth of the larger platform and vision16. This means that instead of focusing on the payment itself, the core point is the loyalty of customers, changing the way retailers offer products to them, creating users personalised experience. Yoyo Wallet17 co-founder and CEO Alain Falys says that “What is more interesting for us, is the question of the relationship between the consumer and the retailer. A lot of the big players today have a narrow focus on payment, but they aren’t bringing any added value beyond that. We are leveraging the untapped data from transactions to gain insights and create personalised marketing.”18 It’s the 16 Pozin, Ilya, 3 Trends In Mobile Payments You Need to

14 Soltanizadeh, Shahab, Time to Utilize Mobile Phones in Payment Industry 15 Velazco, Chris, Google kicks off a public pilot for Hands Free mobile payments

Know About 17 http://yoyowallet.com/ 18 Pozin, Ilya, 3 Trends In Mobile Payments You Need to Know About

Aris Dotti

Twint uses beacon Bluetooth LE technology

same idea as the old loyalty cards but reversed, in which users will receive personalised offers they can purchase in advance and redeem later.

For the European market a solution with a comprehensive mobile payment concept at its core is still lacking. Some19 suggest that it will be difficult for Apple, Google, Samsung and PayPal to become dominant, this gives many opportunities to new regional companies to establish themselves and create seamless payment interfaces for the end users. Switzerland is widely known for its banks and financial structure. Therefor is not surprising they are trying different innovative systems before the above mentioned tech giants overwhelm them. Two main actors are

trying to get the leadership: Twint and Paymit. Twint20 is powered by the Swiss Post. It works as a PrePaid system, which the user can manually or automatically charge when funds are needed. When in a physical store, the phone communicates with a Bluetooth LE enabled device, the user presses a confirmation button on the mobile app and the transaction happens. The innovation is that it doesn’t use NFC anymore (which is not supported by iPhone) but a more common Bluetooth technology which is compatible with most of the devices across every operating system. These small devices called beacons, based on the iBeacon protocol developed by Apple, broadcast their identifier to nearby portable electronic devices. The technology enables smartphones, tablets and other devices to perform actions when in close proximity to an iBeacon21.

19 Wilhelmer, Claudio, Will there be a dominant European

20 https://www.twint.ch/it/

2.1.2.2 An opportunity for small companies

Mobile Wallet?

21 Red. Pointr, Beacons. Everything you need to know

Coby

2.2 Person to person (P2P) A new market is opening and is related to every transaction between people, also called P2P (person-to-person). The first services covering this area have been launched a couple of years ago and now are growing faster than ever. A Business Insider forecasts report22 published in June 2015, shows the impact mobile will have on P2P payments. BI estimates that US annual peer-to-peer (P2P) payments reached over $540 billion in 2014. These payments were made by cash, check, digital money transfer, or other means. Mobile P2P payments are having a huge impact on this informal economy and diminishing the need for cash and checks. BI forecasts that mobile P2P payments will grow to $174 billion during the same period. That means that 30% of P2P volume will be paid via mobile, up from 1% last year.

P2P services as Venmo, Square and Paymit are already moving to the one that seems the next step: payments to the merchant. Differently from what Apple Pay and Android Pay are offering, P2P payments could help consumers to cut banks out of the payment process. Jordan McKee, an analyst at 451 Research says that “You could pay a merchant directly via your P2P app, completely circumventing

the payment networks. The attractiveness of this approach to merchants is apparent, since it would result in reduced fees”23.

I decided to analyse platforms that are related to both my main topic “payments” and “groups of people”. I found two big categories of services that are doing this in completely different ways: P2P payments services and services related to manage group expenses. P2P Services - There are many services allowing P2P transactions. Here I am interested into those providing a mobile app and integrating a social experience. For this reasons physical services as Western Union, Money Gram are not involved into the following benchmark. All the services analysed in the following pages are mostly available in the US only and using American credit/debit cards. For this reasons the following analysis are mostly based on online reviews and the service’s website. The fact that I wasn’t able to test the whole user experience doesn’t affect the way I am going to analyse the features they offer. Group expenses management - There are a few services out there allowing to manage group expenses like Splitwise, Splittable, Walnut, Settle Up and Split. These services are focues on keeping track of group expenses and calculating who owes money to someone else.

22 Heggestuen, John, THE PEER-TO-PEER PAYMENTS EXPLAINER: Why tech companies and banks are offering a service that doesn’t make money

23 Hamblen, Matt, Apple’s P2P mobile payment service would ‘create a shockwave’ in the industry

Aris Dotti

2.2.1 Venmo24 Venmo is a service launched in 2009 and acquired by PayPal in December 2013. Today it is leader in P2P payments: in the first quarter of 2016 saw a payment volume of $3.2 billion, up from $1.26 billion in the same quarter in 201525. When Venmo was launched it was strictly prohibited to use it for purchasing items in stores, only payments between friends were allowed. In January 2016 PayPal announced is expanding the ways people can us it to make purchasing in other apps using the Venmo account, for example for buying sport tickets or ordering from meal-delivery apps. This will bring the service closer to what Apple Pay and Android Pay are offering26. 24 https://venmo.com/ 25 Del Rey, Jason, Venmo is growing ridiculously fast 26 Del Rey, Jason, Venmo to Take On Apple Pay and Android Pay With In-App Purchases

Payment experience - After opening the app, the user is prompted with the payments feed. Creating a new payment is made easy by an interface similar to those of sending an sms. Insert recipients, add a short text message and a money amount. Instead of the “send” button two options are provided. “Request” or “Pay”. When clicking “pay”, the payment is immediately sent to the Venmo account of recipients, when requesting for money the will need to first accept the transaction in order to make it happen. Social - Venmo’s headline is “Make and share payments”. The app is mostly focused on a social feed which shows a stream of payments made in the user’s network and worldwide. This feature is interesting not only because it keeps the service alive, reminding users that other people are using it but mostly because it shows what people are paying for making it a form of social advertising. The user can “like” or “comment” every entry,

Coby

just like an Instagram post. Every social interaction between users is build on payments that already have been made. Technology - Venmo service only needs an internet connection to transfer money between users, which means no need of physical contact between devices. Price - Users need a Venmo balance that is used for transactions. They can link credit and debit cards, and bank accounts to it. Transactions between Venmo accounts are fee-free while when using credit cards there is a 3% fee for each transaction. If the user wants to withdraw money from its Venmo balance to its bank account he needs to manually do that and the operation will take about 3-4 days. Compatibility - Available for Apple iOS and Google Android.

Good Payment made easy Free social advertising Social interactions on transactions Bad Social only after the transaction has happened Focus on single user, not the relationship with other users (groups) No added value to purchases Manual calculation of payment amounts â&#x20AC;&#x192;

Aris Dotti

2.2.2 Square Cash27 Square Cash is a platform by Square Inc. allowing P2P money transfer. Square company has been founded back in 2009 and offers several softwares and hardware payments products including Square Register, Square Reader, Square Capital and Square Payroll. Payment experience - The app is focused in private money transactions. At first it is possible to select an amount on a big green screen, then click on “request” or “pay” buttons. After this the user can select recipients and give a short payment reason “for: Dinner” and click the “pay” button. To send money to other people there are three different ways: entering their phone number, email address or $Casthtag, which is a special name directly associated to the user, which allows to send money directly to that specific user. 27 https://cash.me/

If the recipient doesn’t have a Cash account yet, he will receive an email or a message in which it is asked to enter its debit card number. Social - Square Cash is not really interested into the social experience. It allows to send and receive money with a short description. That’s it. There a history to see all transaction happened with specific users but no other interactions. The $Cashtag allows to pay and get paid by remaining anonymous, with no need to give other people private datas such mobile number and email address. Technology - Only an internet connection is required, no physical interaction between persons. It is possible to use the service even without an account by providing a debit card number. Price - When creating an account the user is requested to register its debit cad number, this way sending money is fee-free

Coby

and the received money go directly to its bank account. This makes the money transaction effortless but requires a couple of days to be completed. Business can use Square Cash at the price of 2.75% per transaction. Compatibility - Available for Apple iOS, Google Android and web browser.

Good Payment made easy Works without an account $Cashtag as an identifier without the need to know sensible informations Bad No social features Focus on single user, not the relationship with other users (groups) No added value to purchases Manual calculation of payment amounts

Aris Dotti

2.2.3 Popmoney28 Payment experience - The payment experience is not really different from those offered by Venmo and Square Cash. The interface is similar to those sending a message: insert recipients’ name, email or mobile number, a money amount, a short text and click the “request” or “send” buttons. Popmoney integrates a couple of features that make it different from the others: reminders and recurring payments. Social - There is no focus on social interactions in the app, which is made for money transfer only. The recurring payment option opens a little bit to the relationships between friends and money making it more than an occasional need. Technology - A mobile internet connection is required, no physical contact be28 https://www.popmoney.com/

tween devices is needed. To send and receive money users have to register their debit card number or bank account. Price - A $0.95 fee is charged for all transactions. Compatibility - Available for Apple iOS, Google Android, Windows Phone, web browser and some American banks’ website. Good Reminders Recurring payments Integrated in some US banks website Bad Not really different from the other apps.

Coby

Aris Dotti

2.2.4 Paymit29 Paymit is an app launched in summer 2015 by UBS and Zürcher Kantonalbank, developed by SIX Payment. Using peer-to-peer protocol users can make or request money in real time to other users. Being an open infrastructure makes it growing fast and many other national banks started to support the service. The user’s mobile phone number is directly linked to its bank account or credit card so this is the only information other users need do send him money. The service was launched with the focus on small money exchange between friends and is now trying to expand in physical stores. The interaction is not as seamless as using 29 http://www.paymit.com/

Twint, since it requires the scan of a QR code which identifies the merchant and the manual typing of the due amount. After the UBS app, payment has been developed for other banks as well and now apps are available for Zürcher Kantonalbank, Banque Cantonale Vaudoise, Luzerner Kantonalbank and Reiffeisen. Beside them a standalone app called Paymit SIX allows sendind money using the user’s credit card instead of bank account. Paymit is allowing other developers to integrate its technology in their apps. Payment experience - The user experience is not really different from the softwares previouvsly reviewed. First thing is to decide whether to send or request money. Then, emphasis is provided to the amount that is going to be sent or requested. Then the user must

Coby

choose a recipient using its mobile phone number (without knowing if it is using the Paymit app as well). It is possible to send a picture and a short text message. To avoid unvolountary sending, it is necessary to swipe a button to the right. Social - There arenâ&#x20AC;&#x2122;t social features, only a summary of past transactions in chronological order. Technology - A mobile internet connection is required, no physical contact between devices is needed. To send and receive money users have to register their debit card number, credit card or bank account, depending on the app used. Price - All transactions in Paymit are completely fee-free. Compatibility - Apps available for Apple iOS and Google Android.

Good Transfer money is extremely easy and fast, being directly linked to the bank account.

Bad No added value to transactions Donâ&#x20AC;&#x2122;t involve the relationship between friends and money

Aris Dotti

2.2.5 Facebook Messenger30 Snapchat Snapcash31 WeChatPay32

Payment experience - Payment is just an addition to these platforms, not their core feature, which is texting with other people. After setting up the debit card information, sending money is as simple as sending a picture. Just click on the dollar icon, enter an amount of money and click the send button. Social - Social networking is the core feature of these services, allowing users to have conversations. Payments are integrated as an addition during conversations, making it simple and natural to send money but they don’t go deeper into the relationships between “friends and money”. Technology - A mobile internet connection is required, no physical contact between devices is needed. To send and receive money users have to register their debit card number. Price - By linking a debit card to the user’s account, all transactions are fee-free. Compatibility - Available for Apple iOS and Google Android.

30 https://www.facebook.com 31 https://www.snapchat.com/ 32 https://pay.weixin.qq.com/wechatpay

Good Transfer money is easy No need to download another app Bad No added value to transactions Don’t involve the relationship between friends and money

Coby

Facebook Messenger

Snapchat Snapcash

WeChat Pay

Aris Dotti

2.2.6 Group expenses management Splittable 33 Spittable is a software available on iOS, Android and web browsers. It is completely focused on shared living, “keeping track of everything people in your house are spending money on – from rent to toiler roll, utility bills to nights out”. The history of payments makes easy to remind when, what has been paid and by who. The “All Squared Meter” makes easy to have an overview of “who owes whom”. Splittable doesn’t allows to transfer money between users and is limited to shared expenses in flatshare. In October 2015 Splittable raised $1.2 million funding to “further build out the software and increase marketing”34. Splitwise35 Splitwise is available on iPhone, Android and web browsers. It is focused on the relationship between single friends or groups. It is possible to manually add an amount and decide whether it has to be splitted equally, by percentual or by quote. Splitwise covers a wider range of scenarios and users than Splittable but it is still limited into calculating amounts of money and not covering the full payment process.

Split36 Splitwise service is available on both iPhone and Android phone. Its goals are essentially the same as the previous Splittable and Splitwise: splitting costs with different people. Differently from those, it is not focused on the relationship between “user and friends” but only in “groups of friends”. The homepage is divided into “accounts”: groups of people related to different topics. Every friend can belong to more than one account - for example Nick belongs to both “USA trip” and “BBQ”. These accounts are helpful to keep track of different projects with the same friends. There are summaries and balance settlement inside every “accounts” but a general summary outside projects is lacking.

These are just some of many apps involving group expenses management. I tested some more, finding out they are all pretty much the same with different UIs.

33 https://www.splittable.co/ 34 O’Hear, Steve, Household Expenses App Splittable Raises $1.2M Funding 35 https://www.splitwise.com/index

36 http://culpin.info/

Coby

Splittable

Spitwise

Spit

Aris Dotti

2.3 Insights I got the main insight while looking for services to analyse. Although mobile payments are growing faster and faster, there isn’t yet a platform to simplify the full process of group expenses. For these benchmark analysis I had to split into different categories, which sounds strange. Most of the time P2P services are used for bills paid in advance that needed to be splitted, which means there is a delay in time between the original payment and the splitting itself. Common scenarios are “You owe me $10 for the cinema” or “I owe $25 for dinner”. These kind of payments assume that a user did a first payment and later he is asking to split that amount. None of these P2P software is actually helping in calculating the owned amounts and the discussion around them. That’s why the second category I analysed is focused into the calculation of splitting bills but none of them is offering a simple and seamless way to actually transfer those moneys. I think there is a gap that could be filled in, as if these services are only doing half of the job, which makes them incomplete. Other technologies previously mentioned like Apple Pay, Android Pay and Samsung Pay make the original purchase simpler but it is focused only on single users. Right now, when doing a group purchase the user would need three different: 1. Make purchase 2. Split the bill 3. Transfer money between group participants

Popmoney

Splittable

Venmo

Splitwise

Facebook Messenger Snapchat Snapcash Square Cash

Walnut

WeChat Pay

Settle up

Google Wallet

Split

Satispay PayPal Paymit

Android Pay Apple Pay Samsung Pay

Twint

Purchase There isn’t a platform covering the full process of group expenses.

Time

Coby

Time What is more critical in this process is the time it involves. Making a purchase using Apple Pay is very quick. Using Splitwise to calculate the owed amount is quite quick, even tough it has to be done manually (and itâ&#x20AC;&#x2122;s easy to forget to do it, since not directly connected to the payment process). To transfer money between all the participants usually takes more time because it has to be done manually between single users. Time is an important variable in the economic world. When purchasing in a store, the consumer has to pay for it immediately, it is not possible to delay the payment. Why should it be possible to infinitely delay it when owing money to friends? This is a critical point. When a user doesnâ&#x20AC;&#x2122;t get its money back, its mood changes. Trust in friends gets lost and friendship can sometimes be broken. Wasting time is wasting money and wasting friendships. Opportunity To design a service allowing to merge this long three-steps process into a single, quick process.

Scenario design and concept generation

Aris Dotti

3.1 User research In order to validate my assumptions and understand if the gap founded earlier really needs to be filled in, I interviewed five different users. The discussion was lead to cover most of their journey about payments. From online or physic store shopping to their preferred payment method, in order to understand what can be improved. I researched about the process when doing payments in groups, understanding who usually pays, how the splitting calculations is done and how the â&#x20AC;&#x153;reimbursementâ&#x20AC;? happens. What I was most interested in is how the relationship between people changes when talking about money, how they feel when owing money or when somebody owes them and how they react in these situations. Users have been chosen for their different age range, profession, passion and needs.

Coby

Pamela Dotti

30 years old, married HR manager Salary CHF 50.0000/year Sport, socializing

“After getting married we created a new, shared bank account. Now in my wallet I always have two credit cards and two debit cards, which sometimes can be painless: I could accidentally pay with the wrong one and forget about splitting the payment.” “At the end of the month I always double check the credit card bill: it’s not I don’t trust my husband but.. well.. erm...”

Aris Dotti

Mattia Piccoli

27 years old Business consultant Salary +CHF 50.000/year Sport, music, travel Technology addicted

“Digital wallets are interesting but I would need a compelling reason to prefer them to the credit card.”

“I hate having many money in the wallet. Last time I bought a group birthday gift, at the birthday party I ended up with CHF350.- in my wallet. I was afraid of losing them.”

Coby

Michelle Savoia

22 years old Freelance illustrator Salary CHF 12.000-50.000/year Travel, art, music

“I often forget when I owe money to someone, it’s not that I don’t want to pay.. I’m not stingy”.

“I try to avoid anticipating money for everyone, I know that often they don’t come back.”

Aris Dotti

Luca Cetti

28 years old Studing Middle school teacher Salary CHF 0/year Sport, socializing

“Since I don’t have a salary I can’t have a credit card. I need to use my mom’s one and write down every expense I did, so she can check them on the bill. Quite annoying.”

“I really would need an easy way to save money because I don’t have a salary. I try to do it by mind but with bad results.”

Coby

Emanuele Dias

25 years old Master in IT Salary CHF 0/year Cooking, AI, robotics Technology addicted

“I use a prepaid credit card but I always need to charge it in advance, which takes a few days.”

“When people owe me money I don’t dare to ask them, I just hope they remember but.. It’s not always like that. That’s frustrating.”

Aris Dotti

3.1.1 Insights With over seven hours of interviews I started reviewing all my notes, trying to makes sense out of them. I found out different needs and different painpoints between users but mostly I was able to validate my assumption. The relationship between people change when talking about money. Generally, if the user owes money to someone, he feels really bad and

ashamed, trying to solve the problem as soon as possible. On the other hand, when somebody else owes money to them, they get frustrated. Often they close an eye on it because they prefer to avoid awkward conversations and donâ&#x20AC;&#x2122;t want to put in risk their friendship, sometimes they are afraid to look stingy. Nobody found a solution to face the problem from a different prospective, yet.

Coby

Time

“I need a more efficient group payment experience” “I need a faster group payments process” “I need the money I’m owed as soon as possible”

Emotions

“I need group purchases to be less frustrating.” “I don’t want friends to think I’m stingy.”

Control

“I need to know what I’m going to pay for.” “I want to be able to decide how much I can invest.”

Saving

“I need an effortless way to save money.” “I need more awareness on my potential saving.”

Aris Dotti

3.2 Personas Starting from the insights I got and putting some empathy, I create different personas. All of thme have different backgrounds, differenet needs and different behaviorus.

Coby

Aris Dotti

Coby

Mary 20 years old Student in communication Flatsharing

Shy Precise She cares Not really rich

History

Goals

Mary is a Swiss Italian young student in communication at Zürich University. There she is sharing the apartment with three people: two bachelor students and a PhD student. Living with people she doesn’t know is not always easy; Mary is not very extrovert and becoming their friend is not an easy task, even if she would like. Each of them has its own life and friends, which makes it look like they are not really interested in better knowing who they are are living with. Mary is the younger, and when she moved to the apartment the other were already living together. She doesn’t have a job, her parents are sending her money for living each month. With them she has to pay everything concerning the apartment like the room rent, internet and light bill, groceries and every other expense: a drink with friends, school consumables, …

Mary wants to live in a friendly environment She needs to have her money available because every cent counts.

Challenges Sometimes her flatmates forget to give her money back. She doesn’t want to ruin the relationship with them and doesn’t dare to ask them for the money. She doesn’t want to look stingy.

What can I do Help her communicating with her flat sharers without the risk to look stingy. Give her value for being precise despite to the others. Easily split the bills without complains from others.

Aris Dotti

User neeeds • • • • •

Pay the bill Make the payment in time Share it with flatmates Can’t prepay for everyone Doesn’t want to remind everyone

“This is really annoying for me because every cent is important. I’m not rich, I need them, but I don’t want to look stingy and risk to ruin the relationships in the apartment: that would be even worse.”

Created with Storyboard That for arisMAIND Image Attributions: Sticky Bits - Personal Bar Code (https://w w w.flickr.com/photos/fauxpress/5519073109/) by Jannie-Jan License: Attribution (http://creativecommons.org/licenses/by/2.0/)

Coby

Payment Needs Would use a credit card Would offer to others Timely in paying bills

Painpoints No regular income Doesn’t have enough money She has to pay in advance for everyone

Opportunities Multiple payment option Shared wallet

Split calculations Needs Can’t spend more than what she owes, every cent counts. Her room is smaller, she doesn’t want to pay more

Painpoints Flatmates always round the amount and pay less. Flatmates make bad splittings and she has to correct them Opportunities Automatic splitting

P2P transaction

Needs She needs her money asap She hates to ask for money

Painpoints Flatmates often are paying late She doesn’t want to seem stingy and avoid awkward discussions

Opportunities Friendly auto reminders

Aris Dotti

Coby

Michael 27 years old Works in IT

Security freak Disorganized Often at the restaurant

History

Goals

Michael was born in Bellinzona in 1989, a couple of years ago he moved to London for work, he is an IT professional. He loves the town but it’s difficult to get used to so many people: he always walks with a hand on his wallet, being afraid of theft. Michael is really passionate about technologies and innovation. He likes being an early adopter but as a professional knows all the security issues in using credit cards or digital payment as Apple Pay. He doesn’t like to have too much cashes in his wallet and instead of credit cards he prefers using a PrePaid Card, in that way he always know how much he would eventually lose. Often he goes out for dinner with friends but every time, when paying the bill, it becomes painful. He doesn’t drink wine, so he doesn’t want to split the bill equally but only pay his part. Paying its own food always takes ages because everyone has to do calculations and get the right money amount to put on the table, which he never has.

Security when paying digitally. Always know what he spends, keeping an eye on the bill.

Challenges He always has to make a transfer on the PrePaid card a few days earlier. So he always has to plan an expense. He never has the right amount of coins for paying friends.

What can I do Help Michael in paying securely without using coins and without the need to charge his credit card. Help him knowing how much he has to pay as fast as possible.

Aris Dotti

Michael is having dinner at the restaurant with his friends.

After dinner, Michael stands up and goes to the cashier. This time he doesn't want to waste time splitting the bill.

He takes his phone out

User neeeds • Pay the bill at the restaurant • Avoid wasting time in calculations • Choose what to pay for Friends

Colleagues

New payment

Tennis team

Girlfriend

“I hate the moment of splitting the bill. Last time it took 20 minutes before everyone calculated its amount and paid.”

He selects the group "friends".

BILL TO PAY PIzza Spaghetti Spaghetti Salad Coke Tea

Your total: CHF 9.90 Pay your part

Hits "new payment" button.

He takes the phone out of h

Coby

Payment Needs Avoid using coins and cash Prepaid Credit Card Would love digital wallets

Painpoints Sometimes doesnâ&#x20AC;&#x2122;t have the right amount Takes time to recharge Afraid of security issues

Opportunities Two-ways security Different devices Crypto values

Split calculations Needs Wants to check the bill

Painpoints If many people it takes ages

Opportunities Digital bill

P2P transaction

Needs Give money to friends

Painpoints Never has the right amount Often forgets to owe money, his friends think heâ&#x20AC;&#x2122;s stingy

Opportunities P2P crypto currency compatible

Aris Dotti

Coby

Diana 24 years old Unemployed

Unemployed No salary In charge to prepay for everyone

History

Goals

Diana graduated in philosophy a couple of years ago. She decided to follow her passion, knowing this would lead to a big difficulty in finding a proper job. In fact, after many months of search, she still hasnâ&#x20AC;&#x2122;t find it. She is registered to the Unemployed Fund and receives a minimum money amount for living. In the meanwhile, she found a temporary job which occupies about the 20% of her time. Summer is now coming and since she has a lot of free time she would like to organize some party in her garden. She wants to make it the main meeting point for the holidays but she needs to make it more attractive, for example by buying deckchairs, a pool funny games and a relax area with bar. Obviously all of this costs money, which she doesnâ&#x20AC;&#x2122;t have yet. For this reason she needs her friends help in order to collect funds.

Raise funds between friends to make her dream happen.

Challenges Reach as many people as possible: people that already are her friends or for making new ones. Let everyone know what their money is used for, for real.

What can I do Design a friends funding platform in which is easy to contribute.

Aris Dotti

User neeeds • Create a new project • Raise funds from friends • Let them know how their money have been used

“Being helpful makes me feel realized but I can’t afford to remain without money.”

Created with Storyboard That for arisMAIND

Coby

Payment Needs Buy expensive items to create the relax area.

Painpoints Doesnâ&#x20AC;&#x2122;t have enough money.

Opportunities Having more money at her disposal, coming from different friends.

Split calculations Needs Everyone must be able to decide how much to donate.

P2P transaction

Needs She needs to have the money before the payment process.

Painpoints A lot of time could pass before she meets her friends to give her money. People need to know how their money is going to be used. Opportunities Let everyone pay their part during the purchase, even remotely.

Innovation is not giving people what they want but what they need

Aris Dotti

3.3 Onliness statement

COBY

/kə–baɪ/

Is the only advanced service designed for young people to collaborate on group purchases by giving a different approach and perspective to money and sharing.

3.3.1 Concept pillars Give a new perspective on money and payments, making them less a taboo topic and an untouchable asset. Collaboration between users is foundamental to reach the goal.

Perspective

Collaboration

Designing the gamification of money makes them more approachable and fun creating an engaging reason to share them.

Gamification

Sharing

Coby

Normal, slow, process

The usual group purchase processis very complex and long: a) A member of the group must purchase the itme. b) Then he has to communicate to friends how much they owe him. c) Finally they can give him money back: sadly some are quicker than other, some always forget to owe and everyone pays in different ways which makes a pain keeping track of who paid already.

Coby

Using Coby everybody pays its part directly to the merchant within twentyfour hours from purchase. No more IOU, time wasting and ruined friendships.

Aris Dotti

3.3.2 Concept definition Coby is based on the concept of temporary shared wallets. Every payment, both in the digital or physical world, is simply a wallet shared between the user and the merchant. Each of them need a Coby account, linked to one or more payment methods (for sending and receiving money). Coby is an intermediary between these two users; they are the â&#x20AC;&#x153;ownersâ&#x20AC;? of the wallet, since they created it, together. By creating a wallet they are making a deal: the customer accept to pay the whole amount to the merchant when the time runs out, after 24 hours. In this amount of time the user can invite other friends to join the wallet. When the time finishes, the money is transferred from every partecipantâ&#x20AC;&#x2122;s account to the merchant one.

In this way, independently from being only one user or tens, the merchant will always get its money. In this amount of time users need to collaborate and play together. There are other two more typologies of wallets in which users are not forced to share a wallet with a merchant. They can share it between other people, creating a project wallet to raise funds from friends or strangers or they can create a saving wallet, accessible to the owner only. In this case, when making payments with friends a percentage of the spared amount is transferred here (see Collaboration and gamification).

Coby

3.3.3 Create a payment wallet There are two ways to create a new payment wallet with a merchant. POS It can be done using BLE technology by placing the phone close to the merchantâ&#x20AC;&#x2122;s POS (point of sell). For this, the merchant need to be equipped with a new device, which would involve different costs and probably could be avoided by many. Scan code Despite being considered almost dead, QR code is a powerful technology that doesnâ&#x20AC;&#x2122;t require any specific hardware, which makes it immediately compatible with every smartphone. A Coby code is generated for every payment and to confirm the creation of the wallet, the user needs to scan it using the Coby app. The QR code alternative can be used both online or printed on bills.

Aris Dotti

3.3.4 Collaboration and gamification To create a different perspective on money and the transaction process it is necessary to design a new and engaging experience. One of the most effective way to make a topic easier to approach is creating a gamified context around it. Money is one of the less sharable assets: users need to have a compelling reason to share it. Secondarily, from the research I found out time is the main variable / reason why negative emotions are joining relationships between people. We need to design a game which rules are implementing all of these aspects: Timing is important Collaborating creates benefits

Every point represents the amount of money the user is ready to risk to pay. When creating a wallet, the owner takes the risk to pay the whole of it so he gets the highest score. While friends are joining, the amount they â&#x20AC;&#x153;riskâ&#x20AC;? to pay is lesser and lesser, for this reason the available points decrease every time.

By joining a wallet, the user makes other people save; the more other people are joining, the more he can save on his private saving wallet.

The quicker, the more points

The more people join , the more they save

Coby

Example scenario

Mark bought a birthday gift for Anne, the total cost is 60$. He is ready to risk paying that sum so he gets 60 points. Hopefully his friends are joining the payment making him paying less.

Luke is happy to collaborate and decides to split equally with Mark. Each of them will have to pay 30$. Since Mark spared 30$ Luke is rewarded with 30 points.

Later Isa joins the wallet. Each of the cobyers will pay 20$. Her collaboration made Mark and Luke spare 10$ each and she’s rewarded with 20 points.

60$ 0$ 60pts

60$

+60pts

60$

-30$

30$ 60pts

+30pts

0$ 30pts

60$

-10$

30$

20$ 40$

60pts

-10$

20$ 10$

30pts

+20pts

20$ 0$

20pts

When the wallet time is over, the amount everyone has to pay is transferred to the wallet (20$ each) and withdrawn to the merchant’s account (60$). 20% of everyone’s spared amount is transferred to their own saving wallet.

60$

20$

20$ 40$

60pts

20%

20$ 10$

30pts

20%

20$ 0$

20pts

20%

Aris Dotti

3.3.5 Features A list of feature Coby needs to offer in order to achieve its goal and that must be kept in mind for the service development.

...

Compatibility

Flexibility

Cobyâ&#x20AC;&#x2122;s goal is not to replace existing payment services. Therefor it is compatible with many of them, giving the user complete freedom to choose its preferred one.

Coby can be used to pay merchants in any occasion, both on online (using QR code) or physical stores (using BLE beacons).

Accessibility

Temporary

Downloading the Coby app or creating an account is not necessary to pay using Coby. User can accept an invite and insert their payment details using a web browser (either mobile and desktop).

Wallets are temporary. This engages users not to procrastinate their actions and making the process faster.

Coby

Gamification

Collaboration

Creating a different perspective to payments thourgh gamification. Visual and written languages needs to be fun and relaxing. Charts and point earning will show who is the best Cobyer between your friends.

Collaboration between users is a key point. The more partecipants to every wallet, the less everyone will need to pay.

Pay a merchant

Group funding

Coby can be used to pay a merchant. In this case the walletâ&#x20AC;&#x2122;s owner is the merchant itself. It sets the time limit and automatically withdraws money when time is out.

User can create a wallet to fundrising before making the payment (or a list of payments). Every participant can make an offer or split the remaining amount. At the end, money goes to the wallet owner.

Saving wallet Everytime the user participates to a public wallet a certain amount of the payment goes directly to a private wallet the help funding a userâ&#x20AC;&#x2122;s dream. The more he pays, the more he saves.

Project development

4.1 Moodboard Colors and typography are very important in the process of designing a UI. A moodboard is helpful in order to understand how to visually convey a message. The message Coby wants to give is based on the gamification of money, making the whole topic simpler to approach and less taboo.

Pastel Relax Gamify Calm

4.2 Visual guidelines Based on the moodboard I started developing the identity of my brand/app. This is very important, in order to understand how the product values need to be communicated. A strong visual identity is the starting point from which the service UI will be designed. From the moodboard, I was able to design a first color palette and study the logo and icon.

The first, complex, color palette.

Studies for Cobyâ&#x20AC;&#x2122;s logo by applying the first color palette.

App icon studies.

COLLECTIVE BUYING

Some user test made me realize that this color palette wasnâ&#x20AC;&#x2122;t communicating my values in an efficient way. Instead, they appeared to be old, static and serious.

I did several more tests and researches, realising I was using definetely too many colors. I needed more contrast and brightness in order to communicate the freshness and innovation relying on Coby concept.

I ended up with a second color palette made of two principal tints, plus a third one for texts and a forth one to create more contrast in particular situations.

The latest color palette

Sea serpent #3FC4CC rgb(77, 189, 198)

Sandstorm #F3CA40 rgb(243, 202, 64)

Davyâ&#x20AC;&#x2122;s gray #4C5454 rgb(76, 84, 84)

Bittersweet #FF715B rgb(238, 111, 94)

RELIABLEWARMCLEARSWEETSOCIALSUNSHINESTRONGCONTRASTFRIENDLYFRESH

The payoff is really important. Since the name of the app is not self explaning when it’s saw for the first time. Literally, COBY derivates from the words “collaboration” and “buy”. The payoff needs to be clear, simple, efficient and coherent with the product pillars.

The first version, “collective buying”, is effective in explaining the CO and BY words but it sounds difficult to pronounce, which doesn’t really represent values as simplicity, calm and emotions.

“Collective” or “collaborative” are not the right words to communicate something pleasant and done with semplicity. And, they are not emotional at all, for this reason i think that “together” is a much better word.

COLLECTIVE BUYING

PAY TOGETHER

“Pay” actually explains what the app does: it let’s people pay together for things but the verb is a bit scary: to pay is something that people doesn’t like, what they love is “to buy”.

BUY, TOGETHER

The font I decided to work with is called Jaldi. The reason is, it perfectly suits the values of Coby, appearing a bit rounded and playful but still being well designed and well contrasted which makes it perfectly readable on digital devices. It reminds of abused fonts as Gotham and Brandon Grothesque. “Jaldi is the Hindi word for soon, and the typeface family is a contemporary sans-serif Devanagari with subtle rounded corners. Designed by Nicolas Silva and Pablo Cosgaya, Jaldi was made to match the Latin design of Asap, named after the

acronym “As Soon As Possible,” which is included as the Latin component. Asap is based on Ancha, designed by Pablo Cosgaya and Hector Gatti in collaboration with Andres Torresi. This family is specially developed for screen reading and use on the web, and like Asap is has a special twist: Jaldi offers a standardized character width for all styles, which means that lines of text always remain the same length. This useful feature allows users to change type styles on-the-go without seeing any text reflow.” (source: Google Font Specimen)

A super title text size bold 34pt A normal title text size bold 21pt A section header bold 13pt A paragraph regular 13pt axim et et facearunt aut explit ipsapitio opta alignih iliam, voluptus diti dolore, voluptae voluptas et assit, quatis et aut es mos reic totati repror sit est que velit prate nimporest explabo. Ut invendit ut rem culparc ipsunt atur, ellaborum ex eossita vel ipsum es sa pliti voluptas volor sandipsa andenditat et velendempore inis expelibus.

Aris Dotti

Launch app

Onboarding

New account

Wallets list

Discover

Payment

Saving

New wallet

Wallet details

Messages

Team

Wallet details

Coby

4.3 Information architecture In order to start the design process, is foundamental to understand how the service will work and how the user will navigate through it. The information architecture describes the main pages and the hierarchy of navigation.

Leaderboard

My network

I want to keep Coby as simple and friendly as possible, for this reason I reiterated multiple times from designing the UI to revising the whole information architecture.

Account

World

Overview

History

Settings

Aris Dotti

4.4 Sketching session The first prototyping tool used for designing the Coby service is hand sketching. Low fidelity wireframing is really helpful in order to understand how the user should navigate through the app and which informations every screen should contain, reviewing when necessary the whole information architecture.

By analyzing a series of best practices and common UI patterns for mobile experience, these preliminary sketches helped me understanding the user flow and design a new navigation pattern.

Coby

Aris Dotti

4.5 Wireframing and usability tests After some user testing with sketches I moved to designing a digital wireframe using Sketch. These allowed me to begin understanding the spaces in which I was working on, the layout of the screen and discoverability of elements.

Discover

My wallets

New wallet

Leaderboard

Wallet - feed

Wallet - details

Wallet - Chat

Profile - settings

Select Coby - Split

Select Coby - Offer

Select Coby - Receipt

Confirm payment

Profile

Aris Dotti

4.6 Reinventing navigation patterns Every major mobile operating system has its own UI guidelines. Google’s Android uses Material Design while Apple’s iOS is using Human Interface. What I am aiming for is not to simply design based on common UI patterns. This for two main reasons: they are not perfect and they create inconsistence experiences between operating systems. They are both very detailed and meticulous guidelines with specifications for every element but they are not always perfectly working. Ok, perfection doesn’t exists but that’s what Apple and Google are trying to achieve, using diametrically opposite patterns. On the left, Facebook Messenger on iOS, on the right on Android.

When examining one of the most popular app, Facebook Messenger app, it becomes obvious how different the navigations are. On iOS, the navigation bar stands on the bottom, while on Android it’s on top. Instead the “new message” call to action on iOS is on the top right corner, while on Android is on the bottom right. This leads to a ambiguous experience when changing from a device to another and could dramatically decrease the overall user experience.

New message button

Navigation pattern

New message button

Coby

Another abused call to action is the hamburger menu. A great way to hide content behind a barely clickable button. Firstly it is often placed in corners difficult to reach with the finger, making difficult to interact. Secondly it hides the content behind a quite anonymous icon: sometimes it is the main navigation, sometimes the less used options, sometime something different, wich creates a lot of inconsistence. Last but not least, when

Hamburger menu in Palabre.

opened it often create a lot of visual noise. In Palabre, for example, the content is still on sight, obscured, behind the new opened layer. This layer creates a hierarchy, telling the user that “this” layer, which stays in front of the content, is actually the main layer – but then, for some reason it’s hidden. The content layer (which as a user I would consider the main one), is still barely visible, which means it creates visual noise.

Aris Dotti

When designing a layout for a book, every designer knows that the content should never be placed exactly at the middle height of the page for several reasons: to increase it’s importance while standing out from the page symmetry or because this is the less reachable area for the user’s eye or because it’s an area often covered by the hands holding the artifact. The content should always stay on top to be appreciated and enjoed by the user, everything on the bottom becomes secondary. On a single page layout, which could be the screen of a device, the ratio doesn’t change: content should be positioned higher than the center. There are several geometric rules to find exactly where it should be, for example the golden ratio.

Coby

On most mobile apps UI, the content is not placed in a relevant position. It just stays there, between UI elements. In fact, often it stays between the top bar and the bottom bar, just like a sandwich. The top one is commonly used as a title bar but since it contains buttons

it becomes interactive which makes it part of the UI better than part of the content. In this way, on the opposite side, many call to actions and interactive buttons are even difficult to reach when using the device with a single hand.

How to design for thumbs in the Era of Huge Screens by Scott Hurff (source http://scotthurff.com)

Aris Dotti

CONTEXTUAL MENU MAIN ACTION (CONTEXTUAL)

My idea is to apply basic editorial layout design rules to the user interface, putting everything which is not pure content on the bottom, which, of course, is the most reachable area when using a mobile device. A digital device is not the same as a printed artefact but the way a user “looks” and enjoys it is mostly the same. The eyes are

never guided to the bottom of a page (digital or printed). For this reason I think that placing here everything that the user “knows to want” is a good solution. He needs call to actions only after he “read” the content: he knows he wants a button, so his eyes have a compelling reason to go down to the bottom of the page.

Coby

Clear app by RealMac in 2012.

Swipe options in Mailbox for iPhone, 2014.

4.6.1 Might the swipe be with youser RealMac back in 2012 released Clear, a simple ToDo list which introduced a totally new way to interact with apps. Swiping is one of the most simple gestures; it can be better than touching a single element because it allows to be imprecise on the touching surface. Today it’s widely used in mail apps where swiping directly on a message leads to different options, depedending on the swipe direction and lenght. What I try to do is to use the same gesture for the navigation pattern. The bottom bar contains the main action (contextual to the content of the screen), which basically means “go forward to the next”. It indicates a vertical movement inside the information architecture; why not to use it to go back as well? A short swipe to go back one step, a longer swipe to go back to the beginning (revealing the menu). Though the gesture is well known by the users, this would create an atypical navigation, which is good for two reasons. Firstly it is completely coherent with Coby’s values in giving a different perspective to users. Secondarily, it would surely fail the first user tests (and it did). But ehy, back in 2009 Don Norman tests revealed iOS devices usability is horrible. The first time a user tries to use an iOS device (or Android, or probably any

other smartphone/tablet) it feels completely lost. Nevertheless new patterns introduced by Apple are today well known by everyone and people probably couldn’t think them in a different way. When something is “different” from what users hare used to, it doesn’t necessarily mean it is bad. The approach I am proposing in my design needs the user to get used to it. Which could result in a “game changing” pattern or just “garbage”, depending on the market.

Tap on screen MAIN ACTION (CONTEXTUAL)

Short swipe to the right BACK

MAIN ACTION (CONTEX

Long swipe to the right MAIN NAVIGATION

MAIN ACTION (CONTEX

4.7 UI elements There are recurring UI elements that helped me in describing the behaviour for the system in every moment and the color that has to be used.

Layout grid.

Evolution of the main navigation menu

Contextual menu

Call to action states (normal, pressed, disabled)

Main call to action

Main navigation swipe

Icons and illustrations Icons and illustrations are very important. Visual images are the fastest way to convey a message. They need to be coherent with the user target and the product values.

Feelings on a friendâ&#x20AC;&#x2122;s status. These buttons doesnâ&#x20AC;&#x2122;t make change the page.

Actions related to a specific payment.

Wallet icon

Saving wallet

Discover

Time

Reward

Connecting to POS

Coby option #1 Equally splitting

Coby option #2 Pick from bill

Coby option #3 Free offer

Coby completed

4.8 UI design The tool used to design the UI is Sketch developed by Bohemian Coding. This software allows to design pixel perfect UIs in a single file, in this way itâ&#x20AC;&#x2122;s possibile to keep all the app screens (artboards) on sight. I designed more than 40 screens in order to implement them in a prototype.

View of the working area in Sketch.

Welcome screen (scroll for homepage)

92 New wallet options

4.8.1 Hero flow #1 In the next pages are described the main actions to solve my personaâ&#x20AC;&#x2122;s needs.

Pay at the restaurant

User neeeds Pay the bill at the restaurant Avoid wasting time in calculations Choose what to pay for

Homescreen

Connecting to POS (automatic)

93 New wallet details

Choose items to pay

Payment completed

94 New wallet options

4.8.2 Hero flow #2 Split the electricity bill

User neeeds Pay the bill Make the payment in time Share it with flatmates Canâ&#x20AC;&#x2122;t prepay for everyone Doesnâ&#x20AC;&#x2122;t want to remind everyone

Homescreen

Scan Coby code

95 New wallet details

Equally split the total cost

Payment completed

4.8.3 Hero flow #3

Homescreen

Join a wallet When receiving an invite to a wallet it is possible to accept it directly from the notification. It is possible to join later by the homescreen, selecting the desired wallet and click â&#x20AC;&#x153;joinâ&#x20AC;? from the details view .

Homescreen

Wallet details

Equally split the total cost

Payment completed

Wallet ended, payment confirmed

Onboarding

100

Homepage and wallets

101

102

Wallet details

103

104

Coby options

105

106

New wallet with POS

107

108

109

New wallet with Coby code

110

Leaderboard

Profile

111

112

Notifications

113

114

115

116

117

118

119

120

121

122

4.9 Prototype To be as quick as possible in the creation of a prototype I decided to use the Marvelapp. com service. Here I was able to quickly link my screens and update them when occurred. To prototype micro interactions I used Adobe After Effects. It allows to easily create beautiful transitions in no time. From here I exported the animations in a GIF file and imported in Marvel.

123

References

126

Aris Dotti

Amberber, Emmanuel, ‘Banking is necessary, banks are not’ – 7 quotes from Bill Gates on mobile banking, YourStory (January 22, 2015) http://social.yourstory.com/2015/01/quotes-bill-gates-mobile-banking/ Del Rey, Jason, Venmo is growing ridiculously fast, re/code (April 27, 2016) http://recode.net/2016/04/27/venmo-is-growing-ridiculously-fast-q1-2016/ Del Rey, Jason, Venmo to Take On Apple Pay and Android Pay With In-App Purchases, re/code (January 27, 2016) http://recode.net/2016/01/27/venmo-to-take-on-apple-pay-and-android-pay-with-in-app-purchases/ Hamblen, Matt, Apple’s P2P mobile payment service would ‘create a shockwave’ in the industry, ComputerWorld (November 23, 2015) http://www.computerworld.com/article/3005212/mobile-payments/apples-p2p-mobile-payment-service-would-create-a-shockwave-inthe-industry.html Heggestuen, John, THE PEER-TO-PEER PAYMENTS EXPLAINER: Why tech companies and banks are offering a service that doesn’t make money, Business Insider (June 29, 2015) http://uk.businessinsider.com/the-peer-to-peer-payments-explainer-why-tech-companies-and-banks-are-offering-a-service-thatdoesnt-make-money-2015-6?r=US&IR=T Jiwani, Ali, Three predications on the future of payments, Medium (November 5, 2014) https://medium.com/@alijiwani1/three-predications-on-the-future-of-payments-7a69de11b51a#.76m33hk2s Metz, Rachel, Why Some Are Turning to Sound for Mobile Payments and More, MIT Technology Review (August 20, 2013) https://www.technologyreview.com/s/518091/why-some-are-turning-to-sound-for-mobile-payments-and-more/ Morris, Glenville, THIS is the year of mobile payments!, Medium (January 14, 2016) https://medium.com/mobile-travel-technologies/this-is-the-year-of-mobile-payments-fbceb7a67d27#.1ixtyrtf8 O’Hear, Steve, Household Expenses App Splittable Raises $1.2M Funding, TechCrunch (October 28, 2015) http://techcrunch.com/2015/10/28/splittable/ Pan, Jennifer, What the heck are mobile payment systems?, Logic Solutions (February 23, 2015) http://www.logicsolutions.com/what-is-mobile-payment-systems-ecommerce/ Pepe, Stefano, Investire Bitcoin, Flaccovio Dario ed., November 01, 2014 Pozin, Ilya, 3 Trends In Mobile Payments You Need to Know About, Forbes (September 10, 2015) http://www.forbes.com/sites/ilyapozin/2015/09/10/3-trends-in-mobile-payments-you-need-to-know-about/#c7aad8b36195

Coby

Red. Macitynet, Ecco lâ&#x20AC;&#x2122;identikit dellâ&#x20AC;&#x2122;utente iPhone europeo (July 7, 2008) http://www.macitynet.it/Ecco_ldentikit_dellutente_iPhone_europeo/ Red. Pointr, Beacons. Everything you need to know, Pointrlabs (accessed April 25, 2016) http://www.pointrlabs.com/blog/beacons-everything-you-need-to-know/ Soltanizadeh, Shahab, Time to Utilize Mobile Phones in Payment Industry, Medium (July 12, 2015) https://medium.com/@shahab6/time-to-utilize-mobile-phones-in-payment-industry-a5df1f138454#.enkbuwhqe Velazco, Chris, Google kicks off a public pilot for Hands Free mobile payments, Engadget (March 02, 2016) http://www.engadget.com/2016/03/02/google-hands-free-payments-pilot/ Wilhelmer, Claudio, Will there be a dominant European Mobile Wallet?, TheFINTECHBook on Medium (May 03, 105) https://medium.com/the-fintech-book/payment-2-0-the-race-to-become-your-mobile-wallet-has-begun-678f0bb5d7c2#.2pfxfzbgd

Wikipedia Mobile payment, Wikipedia (accessed April 25, 2016) https://en.wikipedia.org/wiki/Mobile_payment Online wallet, Wikipedia (accessed April 25, 2016) https://en.wikipedia.org/wiki/Online_wallet

127

Authors Student Course Mentor

Aris Dotti CAS4 – Thesis project Federico Lameri, frog design

Year

2016

Abstract

Coby is a smartphone application whose goal is to simplify group purchases. When making a payment, both in store or online, the user and the merchant create a new shared temporary wallet. The game begins and the user invites friends to join the wallet, collaborating with him to achieve the payment. The sooner they join, the more points they get and the more people joins, the more everyone saves. When the time is over, the payment is transferred directly from each participant’s account to the merchant’s one. This concept takes money and payments to a complete different perspective where a payment is a group task and collaboration between users is fundamental. Timing is very important too because it leads to a better placement in the leaderboard. “To pay” is something nobody likes, by making it playful and fun people have a strong compelling reason to do it. This solves one of the biggest issues in the usual process where emotions are often involved, making people look stingy, breaking friendships and relationships when a user doesn’t pay back what he owes.

The usual process is divided into three steps: a) One user makes the purchases, paying in advance for everyone b) The user calculates the splitting costs and communicates them to the participants c) Every participant pays back the user There are multitude of softwares and technologies in each of these areas. Many, like Apple Pay and Android Pay are trying to make money fading by putting a digital version of the traditional wallet in the hands of users, creating a contactless purchase experience. Others help users to split the costs, like Splitwise, while others like Venmo and Facebook are introducing person to person (p2p) transactions. None of them are solving the group purchase in an effective way. Coby solves the problem at the root, making a three step process simpler and quicker in which every user pays directly to the merchant twentyfour hours after the purchase.

Interface and interaction modality

Coby is a smartphone application. The project outcome is a prototype based on Marvelapp which can be enjoyed on a browser or installed on Android using the attached apk file.

Technology

The tool used to design the UI is Sketch by Bohemian Coding. Micro interactions and animations are designed in Adobe After Effects. The prototype is based on the Marvelapp service.

User experience

The UI has been designed in order to convey the concept pillars, therefore the look and feel is playful and joyful but in the same time simple and clear. The navigation pattern and UI layout create an atypical experience in usability, which is coherent with the â&#x20AC;&#x153;different perspectiveâ&#x20AC;? pillar.

Research and development context

Coby could be further developed in many ways but the most promising seems to be the integration with existing payment options like PayPal. They have many common aspects and could be complementary each other.

License

Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)