Get People To Pay Before Using App Ux Design

Designing a subscription management application: UX/UI Design case study

Introduction

We live in a digital era where most of the content that we consume is moving to digital format and, there are many companies from which we consume the content online.

But there is always(mostly) a free version and a paid version where free versions have certain restrictions like ads, less content, or no content at all which makes us subscribe to their services by shedding some money.

So what subscriptions are all about

If you still don't know and you haven't subscribed to any online or offline subscription it is

subscription (noun)

1: an arrangement to receive something, typically a publication, regularly by paying in advance.

2: to pay money to get (a publication or service) regularly I subscribe to several newspapers/magazines.

So we have cleared what a subscription means let us get to know more how and why did I want to do a subscription management application design.

Why subscription management?

A few months ago I was having a conversation with one of my friend it went something like this.

Me: wassuppp??

Friend: someone logged into my Netflix account I am not able to use my subscription.

That's how I felt the urge to create something which will help people to manage and share their subscription.

The image I got from my friend when he/she was not able to use her Netflix account

User Research

So to conduct the user research, I created a google form and sent it to my friends who might be using any subscription and from the people I sent it to I got around 26 responses and 2 people were ready for a user interview

Google form responses (Primary Research)

The set of questions which I asked were

Name
Age
profession
Subscriptions you have enrolled (multiple choice so they could select)
other subscriptions if any
What difficulties do you face in maintaining your subscription (MCQ so they would choose)
Describe your issues (if anything was not available)
if anyone was interested in the interview asked their details so I could contact them

Responses for above Questions.

Distribution of users age (26 responses)

Distribution of subscriptions among users (26 responses)

Distribution of users (26 responses) Xaxis = user count

Insights from the filled up form

Most subscribed platform

Issues / Pain points faced by users

Remembering the end date — 19/26
Sharing with others — 7/26

User Interview (Secondary research)

User interview was conducted via video call so that the user could express their feelings and difficulties about subscriptions they use As I told earlier I had 2 User interviews.

For the interview, I did not have any particular flow or set questioner and just wanted to listen to them speak up and rant about what they were facing up with subscriptions and the results are down below.

User 1

With user interview, the user spoke more about their difficulties than in the form which I provided them to fill up which gave me a brief idea of what they facing which is required to know before I start the design.

Insights and suggestions from the user

Push notification reminder when auto-renewal will help in getting to know when the amount is going to debit from the account.
Different payment options (yearly and monthly).
Screen time tracking so that the user can know which subscription is being less used by them.

User 2

To sum it up from the User Research as whole these are summarised pain points of the users

Remembering the end date.
Sharing with others.
Automatic money deduction (recurring payment).

Ideas to implement for the pain points

Remembering the end date
— push notification reminder when a subscription is about to end (the user should be able to set the notification time interval when to get the reminder for payment).
— progress bar or circle progress for the end date of subscription.
— Usage of subscription to monitor the usage for suggestions.
Sharing the subscription
— Number of people using the subscriptions and the devices using the services.
— sharing subscription from the app.
Automatic money deduction
— payment through the app itself.
— One-time pay for a whole year.
—push notification when the subscription is about to end for recurring payments.

Problem Statement

So after all the research and the insights, I am writing down the problem statement based on the user research because it initially started as an idea to solve issues with subscription and after user research here it is.

To design an application which solves the issues related to online subscriptions like Sharing, Payment and managing the subscription.

UI Design

For the designs, I tried to do a complete iOS design so that I could get hold of the Human Interaction Guidelines and start to master them.

Some assumptions which I made for creating the designs

Since this is a complete personal/pet project, I assumed that I have a revolutionary API which is going to fetch me all the details and make my job easier.

It is not easy to develop the functionalities unless the companies have a way to give out the information which I want.

So let us start talking about some design !!!

Homepage

The Homepage view can be considered in two parts first one being upcoming subscription which is about to end and second one subscription which has been expired/missed and needs to renew these two views can be toggled in the homepage.

The cards on this homepage and what do they consist of

Name: The name of the subscription.
Logo: Corresponding logo of the Company/Service.
Price: the price of renewal.
The number of days remaining to end the subscription.
Progress bar: Consists of four colours which ideally represents four weeks of a month.

Why a progress bar?

Collecting back from the research I did users have this tendency to forget when the subscription is about to end and this creates panic when you try to use the product then get to know that the subscription has ended.
Visually I felt a progress bar would do the work of getting to know when the subscription is about to end and would inform the same to the user.

Deactivated state

Whenever a subscription ends and needs to renew it moves into missed view where the colour of the card changes to black and white.

One thing that was majorly done on this page is to show the user the remaining days of the subscription and let them know what state they are in.

Subscriptions

Since all subscriptions can not be on the homepage there was a requirement for a separate page so here is that page which shows all the subscriptions from one place and you can add any new subscription.

From the previous card layout on the homepage, almost everything remains the same except there are two other things were added, which are sharing and visual representation of the number of people using the subscription.

Coming to the card there are 3 types which I considered those are

monthly
yearly
free trial

Differences in the type of cards

monthly — similar to the ones in homepage

yearly — Here the progress bar is divided in 12 months and not in 4 weeks

free trial — From a business point of view, I did not want the users to share a free subscription so there is no option available to share it but one can know how many days the subscription has left to complete I wanted it to look different so there is no status bar and has a big free trial badge on it.

let us get to know what will happen when someone wants to view a subscription card

Homepage and the subscription page do not show all the details this page shows them all and the required information to change a few functions to manage the whole subscription.

Here are a few things which you can change and help you manage the subscription

payment reminder
people who you shared with
devices using the subscription
Usage suggestion if a subscription is less used

Okay, let us manage the members, devices and reminder of a subscription.

The person who manages the whole subscription has the power to kick a member or a device out at any given time if ever there is an issue.

You can now ask me how do I add a subscription and here is the way you can do that the steps are as shown below.

select the subscription provider
add your mobile number or email which is used for the subscription
wait in peace and let the application find it

visuals of adding a subscription down below

Sharing the subscription

Sharing is the most frustrating part of any subscription because you share your details to one person there is a chance that person is going to share it to someone else and then chain goes on this might frustrate the person who pays for his/her subscription can not use it because of screen restrictions of few subscriptions.

To solve this one can share the subscription from the application to different social media platforms as text which consists of email id/phone number and password this is low-key how people do the sharing thing with others.

But I have a great idea on how it can be done it is a bit technical but can be understood easily.

my engineering degree helped me give this idea this requires companies to operate very well with the API

So the idea is to send an encrypted text which will be added in the email id/mobile number input and the decryption key in the password input which will make you difficult to share it again and it would be a one time key consider it as a lock and key type of system where the key is destroyed after using it once.

Things that were solved in subscriptions are

— progress bar or circle progress for the end date of subscription.
— usage of subscription to be kept a count of usage so that the sub can be removed if not being used.
— Number of people using the subscriptions and the devices using the services.
— sharing subscription from the app.

Account

Account has all the required which should be there in the accounts page something new here is that you can change your country as different providers have different prices in a different country and the currency changes as well this was added to make this application for a global audience and not restricted to the local audience.

Payment

Payment can be done in two ways

Monthly
Yearly

Here the application takes care of your renewal every month and you can keep enjoying your services also there can also be a discount on yearly payment which will make users pay here.

Notifications

Notifications keep updating the user about the status of their subscriptions

There are three different kinds of notification one can get from the application

Payment reminder which is manually set by the user
Recurring payment notification to know that the money is going to debit because it is always better to know and stop it before the payment completed
New device login information

🖤DARK MODE 🖤

APP LOGO

TESTIMONIAL

After completing the whole designs and research I went back and showed 2 interviewees what the think

Behind the scenes

Conclusion and future scope

The data which I collected consisted only of the age group of 18 to 30 it would have been great to know what a 30 + year old person faces to manage his/her subscription, This would help me know and understand what every age group faces difficulties in.
adding a way to get payment from shared members through the application itself.
Had a bit of learning curve to get to know the guidelines of Human Interaction Guidelines which made me slow down a little bit while designing the screens.
The screens were constantly beings seen by a couple of my friends who are iOS users which helped me change a few things while designing them I guess that's the reason it is always said to get the user onboard before the application is developed and released this helped me to designs the screens better.

Articles and resources which helped me in designing the iOS UI

My first case study

People who helped me during this project

Shravankumar H

Raghu Raj Rai

I am Open to work as a Product Designer | UX/UI Designer if you are someone who is hiring and liked my work please contact me My details are down below

Thank You for Reading My Case study please share it if you liked it