Piki is a personalized loyalty cards app. In a simple, fast and secure way, clients can purchase and manage their loyalty cards and service providers can create new cards and analyze their use.
July-December 2020
A loyalty card, or punch card, is a unique payment option offered by businesses to their regular clients. These businesses usually provide a repeat service at a fixed price (Therefore I will refer to them in the case as service providers). The card allows clients to pay in advance to reuse the business services and receive a discounted price in return. Loyalty cards are one of the best marketing strategies to encourage customers to continue to use a business's services. Therefore, its use is very common.
Today, despite all the technological innovations around us, loyalty cards are left behind. Their use is relatively primitive and based on cardboard cards or sloppy documentation in Excel or phone notes. This causes a great frustration among service providers and clients who have difficulty managing and tracking data, lack of transparency, missing an opportunity to save money, confusion between all the different types of cards and more. The field is crying out for a digital revolution that will solve all these problems.
Meet Piki! The app allows service providers to connect with their clients by allowing them to purchase online loyalty cards in a simple, fast, efficient and secure manner. The Piki-Cards data and statistics are always with you, laid before your eyes with one click visually and clearly, any time you'll need it.
Store and manage all your cards easily in one place ☆ Have your cards always with you ☆ Analyze and track your cards data ☆ Save money ☆ Build a better business-customer relationship
1. Two different but similar interfaces
One of the first challenges was dealing with two different users - a service provider and a client. On the one hand, each user needs a different interface to suit his use of the app. On the other hand, these are two users who often meet and cross-reference information. Therefore differences in the appearance of the interface can impair the reliability of the data.
2. Huge variety of loyalty cards
After a little research on loyalty cards, I realized that there are many different types of cards. The challenge was to find the balance between customization and the common denominator. The card should allow versatility to meet different businesses' needs and be consistent with a uniform design line that will identify the card as a Piki-Card.
3. Feel like punching a real card
The loyalty cards used today are very much identified with their physical element. I wanted to embed this feeling in the app and make people feel like they have a real cardboard card, just inside the phone. In a two-dimensional interface, this is no small challenge. I had to find the right dose of the three-dimensional effect to not become ornate and excessive.
Interviews
To understand people's difficulties with the current loyalty cards system and their needs, I conducted interviews with five people. Three of them are service providers, and two are clients who consume services through loyalty cards. I built a set of questions that deals mainly with how the process is happening today and why it is so frustrating. Here are some of the key questions and answers:
Users' Quotes:
"I manage the cards in Excel, sometimes I make mistakes or forget to enter data."
"My clients constantly ask me to show them the data and I don't have time for that, it is difficult to pull out all the details."
"Sometimes there are inconveniences with customers who think the data I entered is incorrect."
"I do not know which cards are going to end soon so I can't notify people in advance to renew them."
"I forget or lose the card and then have to pay double."
"I don't always trust the information that the business owner enters."
"I want to know how many uses have left and get organized accordingly but I do not have access to the data."
Personas
Based on the interviews' findings, I created personas that express the main pain points of the users. Two of them are service providers, and one is a client.
Problem - User POV
To finally refine the problem we are dealing with, I used the method of defining the problem in stages from the user's point of view.
Service Provider Problem Statement:
A business owner who offers a repeat service for a fixed fee wants to allow his clients to use loyalty cards but has difficulty managing and tracking the data because he cannot update and see it in real-time, which causes missing sales opportunities, waste of time and discomfort with the client.
Clients Problem Statement:
A client who purchases repeat services for a fixed fee wants to use loyalty cards but has difficulty accessing the data because it is stored with the service provider, which causes a feeling of uncertainty and discomfort. In addition, he has a hard time using the card because he forgets or loses it, which causes a waste of money and a sense of frustration.
After understanding what problems we are interested in solving, I built a flow diagram that will help us make sure we have a solution for each of them.
At this point, I translated the steps from the flow into scratching screens. I was still at the layout level and did not go down entirely to the details just so we could understand what each screen contains and how to move from one to the other.
As I described initially, designing the card was one of the significant challenges in the project. I started by researching what the existing cards look like today - what they have in common and what sets them apart from each other.
I have found that almost all cards have the following common features: company name and logo, a catchy slogan, description that includes terms of use, a quantity of use, price and discount. The discount is divided into two types and can be either free uses or a discounted price. Based on this, I started designing the Piki-Card.
To meet another challenge I talked about, consistent design between different types of users with different needs, I maintained similar visibility between the different types of cards:
I debated a lot about the user's interaction with the card. Eventually, I decided that clicking on the card would lead to a separate screen where it would open, and actions could be performed. The decision was due to two main reasons:
1. Not to overload the user on the main screen and show him only the essential details.
2. Looking ahead, the card should have a separate screen. Thus, if new features are added and an additional button or text needs to be inserted, there will be no problem with space.
Two other things that were important to me to express in designing the card were:
1. Allow quick detection of the relevant card - I made sure that the profile pictures would be prominent enough in relation to the rest of the card to identify the correct logo in a quick scan.
2. Make it easy to understand how many uses are left - it was clear to me that there is no room for mistakes here. The user must not be confused between the punches he used and the punches he had left. Besides, I chose a striking color so that the card that runs out would stand out.
Onboarding Process:
Client POV:
Service Provider POV:
Concurrent with the branding phase, I began to gather inspiration for the design of the screens. Since the app is pretty unique, I had to think of other areas trying to do something similar and learn from. It was not easy, but in the end, I found what I was looking for - payment apps. Thinking about it, there are a lot of similarities! They take a relatively primitive daily action related to physical things (money) and turning it into digital. Many of these apps have values similar to Piki. They can also be a great source of inspiration for creating a three-dimensional card feel on a two-dimensional screen. I collected some such examples and together with the right choice of colors and topography, I started to design the screens.
Main Screen
Clients can see all their active Piki-Cards, search by service provider name, filter (by last use, how many uses are left, etc.) and see the history of expired cards. Clicking on one of the cards will take you to the card screen. A service provider can perform the same actions, only instead of business, he sees his clients. He has the option to remind the client to use his card if it's about to expire.
Card Screen
Here you can see the full details of the card. To use the card, you can simply press the orange button. A service provider cannot use himself but can ask the client to approve the use. At the bottom are the recent activities done with the card.
Activity Screen
A notable point in the research was the lack of data transparency and the difficulty of monitoring activity. This screen meets this specific need and makes an order for the user - what card was used, when, what was done and more. The information is presented in a chronological, clear and easy-to-understand way and includes filtering options.
Profile Screen
When a client enters a service provider profile, he sees his active cards and other cards for purchase. At the top, there is brief information about the service and an option to contact. At the bottom is all the client's activity in front of the service provider since the beginning of using the app. A service provider can see the cards of a specific client and all the activity performed.
Onboarding
This is the registration process of a service provider. Before the user has to choose whether he is a client or a service provider, he gets an explanation of the app to understand what these terms mean exactly. Then, if the user is a service provider, he fills in some details and is given the option to create a card. The operation is not necessary for registration and is at the end of the process, so the user gets an option to skip this step and complete it later.
Creating New Card
The card creation screens required a lot of thought in order to be easy and quick to use but would allow all the necessary flexibility. The user always sees a preview of the card at the top, and every detail he fills in is updated straight away. This way, he can see his card getting shaped step by step. The user starts by filling in necessary details such as the name of the card and price and then is given the option to add a discount (in percentages or free uses) or limit the time of use.
Buy New Card
A client who wants to buy a new card can reach it through the Market Place or through a service provider profile. The card shows the benefits it gives and the price compared to the original price. The only thing the user needs to do is fill in his credit information and that is it - he has a new card.
Create a Special Card
One of the needs that emerged in the research was to provide benefits to preferred clients who come a lot. Creating a special card is a feature for service providers that allows them to create a card with a special discount for specific clients. They simply select the clients from the contacts, fill in the card details and send.
Stats Screen
This screen was designed for service providers. Allows them to see interesting data about their business and how it functions. The data makes it possible to learn which card is the most successful, which client has the most interaction with their business and more.
I think the design meets the challenges it faces. It manages to meet the needs of both types of users and still maintains uniformity. It expresses the feeling of the physical card and makes it possible to create a wide variety of cards of a different nature but with a uniform and clear structure. Also, it manages to convey brand values and is characterized by ease and speed of use.
Piki was a fascinating project. I really enjoyed the research phase and think it was imperative to the process. Although sometimes it seems clear what problem we are trying to solve, a dive into the details and a conversation with users distills it into an accurate definition. I collected the pain points one after the other and were able to empathize with the users. Thus, I reached the planning stage focused and ensured that the interface would meet all the needs. The stakeholders of the project and I are delighted with the result. The feedback I received from them sums it up best:
"When we started, we knew we needed to find someone who would be open-minded, attentive and a true professional but also someone who knew how to express his opinion too. We had a big doubt if we could actually find someone like that, but no doubt you exceeded all expectations and much more. With your help, thanks to your listening patience and professionalism, we were able to create something that we had in my head that no one just could understand."
