Mobile App Design

Integrating an efficient mobile check out experience for users and designing features to monetize a freemium app.

TEAM

Sai Ravada

DURATION

8 weeks

Overview

Two years ago, BookIt launched as an app that allows users to read books online for free. After building a healthy user base of free users, the company has decided to evolve to a freemium model with new features that can be monetized.

BookIt’s existing signup flow has no call to action – neither during registration or throughout the free experience – that allows the user to have an opportunity to subscribe to the premium product.

Defining Business Goals & Problems

Book It’s goal is to monetize their app by creating a premium version of their product. They currently have a healthy user base that use BookIt’s free model and the company is looking to create attractive features to incentivize users to upgrade their plan. The problem is that the company does not have any premium features and the app’s sign up flow does not include any call-to-actions for users to be able to upgrade.

Plan of Action

Identify methods and solutions currently available in the industry to convert a free product to an experience that users want to subscribe to for a monthly fee.
Build upon the current feature set to create an improved product.
Integrate CTAs for users to subscribe to the premium product within the free experience & the registration flow.

Competitive Analysis

Based on industry research, YouTube, Spotify, and Pandora are three successful companies within the industry that include both free and premium versions of their products. To gain a better understanding of how their business models work and what incentivizes users to upgrade their plan, I conducted heuristic evaluations of each company’s mobile experience. I focused on understanding what kind of features are included in the paid experience and how the company utilizes CTAs to prompt customer conversion.

Findings

Based on my research, there was a pattern in the kind of features that each of the company’s offered to their premium subscribers. These features included no advertisements, personalized recommended content, and access to the user’s media when offline. While a user on the free version of the app is able to access all of the same content that a premium user may be able to, their experience is slowed down with advertisements and hindered with a limited number of skips.

In addition to the clear incentive for a premium plan, each of these companies included a prominent CTA for users to upgrade their plan throughout the whole free experience.

User Flow

After conducting the industry research, I observed that the sign-up and conversion process for most companies within the industry include a CTA when creating or signing into their account. Additionally, the prompt for users to upgrade includes the available, premium features. Based on this information, I mapped out the user flow for BookIt’s user experience.

Wireframing

The user flow above includes three specific red routes: new user registration, signing into an existing account, and the checkout process. The user flow serves as a guide for the following low-fidelity wireframes.

New User Registration

These screens outline the process of a user who is registering for a new account. They’ll be prompted to enter their email and then create a username and password. In the case that the user enters an invalid username or password, there will be prompts to guide them. After completing the registration process, the user will see an option to subscribe to BookIt’s premium product.

Signing into an existing account

These wireframes below follow the user flow of an existing user signing into their account. After the user has successfuly signed into their account, they will be prompted to subscribe to the premium product. If the user does not want to sign up at the moment, they are able to cancel out of the prompt and will land on the homepage.

Check Out Experience

This wireframe covers the checkout process user flow. When the user is prompted to subscribe to the premium product, they can click the subscribe button and will be taken to the screen that asks for payment method. Once the payment method is entered and approved, the user can successfully subscribe.

Design Process

While designing the high-fidelity screens, I found that the UI still had some room for improvement. By creating multiple versions of one screen, I was able to narrow down which design would ultimately create a better user experience.

The promoted features don’t stand out against the white background. In this case, they don’t look appealing to considering users.

These text boxes do not have an adequate amount of space around them, causing the text to look cramped and the UI to look messy.

The CTA at the bottom of the page did not stand out against the white background. It should be forefront, so it catches the user’s eye.

Final Version

Prominent Plan Options

Placing the monthly and annual premium plan options as the first thing that users can see ensures that the pricing information is clear. Additionally, the user can see that choosing one of these plans is an action that needs to be completed.

Premium Features

Using boxes in similar color and shape creates a sense of uniformity for the user. Additionally, the physical space between the different features allows users to easily parse the text and comprehend it in a simple way.

CTA Position

Based on the Gutenberg Principle, the optimal placement for a button is at the end of the user’s scanning path. Since users scan a page from top down, they are looking for a call to action at the bottom. The easily accessible CTA will benefit user conversion.

Final Screens

Based on business objectives and industry/competitor research, I designed these final screens. Since BookIt’s goal is for their users to convert to the premium plan, the priority was to create a user experience with appealing and beneficial features and implementing CTAs that would increase customer conversion.

Usability Testing

To test the efficiency of the design, I conducted five remote usability tests through Zoom. The process involved having the users share their screen while they completed designated tasks using the interactive prototype. I was able to observe the users’ interactions with the app in real-time and receive feedback. The goal of testing was to identify any critical issues with the features or overall usability of the three red routes.

The results of the first round of usability testing revealed three critical issues.

Issue 1: No access to account after log-in.

Once a user created an account or signed into an existing account, there was no option to view/upgrade their plan. The solution to this is to add an ‘Account’ page in the menu bar. The menu bar is accessible to the user throughout their whole app experience, meaning that the user will always be just one step away from accessing their current plan information.

Before

After

Issue 2: Missing cardholder information.

During the check out experience, the ‘Cardholder Name’ input box was missing. This was an easy fix, but a critical mistake since the cardholder name is a necessary component of the check out process.

After

Before

Issue 3: Guest users were allowed to upgrade their plan.

Users who are not signed in must be prompted to create an account/sign in prior to upgrading their account. This was an edge case that was missed during the original design process. Since unregistered users should not be able to upgrade their plan, the solution to prompt them to sign in before subscribing to the premium version.

User Flow Before: Home page > Upgrade account > Add payment info

User Flow Now: Upgrade Account > Sign in/create account > Add payment info

Reflection

This project allowed me to focus on a specific feature of an entire mobile application. Having a narrow scope gave me time to perfect very specific aspects of the registration flow and be precise about all of the UI elements. I paid extra attention to what consists of an efficient user flow during checkout processes.

As expected, the importance of user validation was emphasized throughout this project. User testing revealed critical errors that I had made and gave me the opportunity to fix them based on real time feedback. Additionally, usability testing gave me more insight on edge cases that may not be accounted for during the design process.

If this were a real-life scenario, my next steps would be to conduct another round of usability testing and implementing those changes.