Mobile App: 21Moves
In-App Offering & Paywall Screen Designs

Home Screen

In-App Offering

End of Flow

Paywall Screen

Overview

Client: 21Moves - A Rubik’s Cube solving app leading at a top 2 spot in the App Store with over 3 million users and a rating of 4.7.

Part 1: Create an in-app signup for a partnership between the app and an educator as a new offering.

I led the design process from start to finish with research and ideation that I turned into mockups and prototypes all while presenting for feedback to both stakeholders (the app owner & the teaching business owner). I created a flow from the home screen that introduces the user to the offering, explains the teaching company, and a sign up for inquiry.

Part 2: Refresh the paywall screen.

After part 1 of the project, the app owner asked me to create a new paywall screen that highlighted social proof of the app's success. I started with a largeamount of competitive research and worked through two ideas to present to the app owner. We landed on an arrangement that highlights testimonials from real app users and easily decipherable packages.

Job Title: Product Designer

Timeline: 3 months

Tool: Figma

Part 1: In-App Offering Flow

Sign Up Flow Process Overview

Identify Goals of the Project & Conduct Research

Goals:

Need new home screen for new flow
Identify who, what, and why to sign up for classes
Flow options - separate screens for sign up vs. all in one
Blend the two companies in branding and UI
Create a responsive design for all screen sizes

Research Highlights:

With the goal of creating conversion, a call to action at the top is most successful.
Including an informative video showcasing the legitimacy of the partnership will be the most effective tool to communicate trust in the partnership and most space efficient.

Create Initial Low-Fi Design

Combining all of the stakeholders proposed ideas with the research findings, an initial round of designs was created. This included a few different flows and layouts. Having multiple solutions acted both as a process to find the best solution as well as a visual tool for talking points.

Present & Review

Flow 1 - All-in-one with sign up on one screen.

Pros:

Easy to see everything
Less clicks

Cons:

Too long
Information can feel lost

Flow 2 - Two screens separating the offer and information with the sign up

Pros:

Easy to digest

Cons:

Requires action from the user

Key Takeaway: Seeing the design brought up the conversation to simplify the offer. The action of the user was too complicated for a younger audience requiring parent permission. This also allowed for a condensed all-in-one screen.

Also, this process created a styling direction that both stakeholders could agree on.

Revise, Talk with the Engineers & Mockup Hi-Fi Prototype

Putting all of these above thoughts and revisions into action, the flow was shortened and condensed into one screen. With a few final tweaks and consultation with the engineer, we decided on a final design.

Part 2: Paywall Screen Redesign

Idea 1

Idea 2

Final Design

Paywall Redesign Process Overview

Understand the Goal & Research Paywall Ideas

Goal presented by the app owner: Create a paywall screen that focuses on social proof.

This started with research on paywall screens for offers in a similar structure and industry that showed things like ratings, testimonials, and counts.

Distill Ideas from Research

Research Findings:

Testimonials from the app store gave the strongest sense of social proof and were most compelling.
A horizontal stack of different subscriptions created a grid-like pattern for the user to easily compare offers.

The next step was elected a few options to wireframe with the 21Moves content to work off of in a design review.

Build Out Two Ideas

In the collaborative environment, the most efficient process was to fully design two hi-fi ideas with a few different details. We discussed the positives and negatives of each landing upon the most simple version.

Main Takeaways

1. A visual example can be the best way to communicate with the stakeholders or client.
2. Other ideas will arise during the process and it is so helpful to point to a visual reference to work off of.

The proposal came with ideas from both stakeholders of the partnership as well as my own. In our initial meeting we threw out a lot of ideas and needs where some ideas were aligning and others came from different perspectives. After I mocked up the ideas presented and we all agreed it was too chunky and complicated. We had a conversation about the user and their habits which highlighted a need to change, but even more it led to a change in the details of the partnership. I kept referring back to the simple fact that the most typical user is a child and will require parental involvement for any action in signing up, a different arrangement of content as well as process was needed. The next version of the designs better reflected parental involvement by starting with a free inquiry by email.