Subscription Page Design

Project Overview

About the client

YayImages is a small start-up company based in Oslo, Norway looking to change the way people use stock images online. They provide subscription-based services where their members could easily stream and download stock images.

Summary

Since the search page is YayImages' main service page, it is the most crucial page of the site. It's packed with features and functionalities that some users might or might not need when using the service.

Objective

To design the subscription page process that guides the user from viewing the pricing details to the subscription checkout.

My role

User Experience Designer
Product Designer
Front-end Developer

Tools

Adobe Photoshop
Adobe Illustrator
Pen and paper

User Personas

During the discovery phase, we’ve determined that although we would love to target all users, focusing on a few would be ideal in developing our base. With this in mind, I’ve developed the two primary user personas to help us determine our focus on the types of users we would like to target first.

Alice Henry, 24

Freelance Designer
Puerto, CO

Bio

Alice is a freelance graphic designer who just recently graduated from college. She's a creator who specializes in print designs like flyers, brochures, and posters. In her free time, Alice loves to experiment with new design concepts. She's pretty up to date and pretty skilled with design technology software like Adobe Creative Suite.

Goals

Wants to find a high-quality image for design quickly.
Wants to be able to save images in a folder for future use.

Frustrations

High-quality stock images are costly.
Hard to find a specific stock image.

David Wei, 31

Marketing Specialist
San Jose, CA

Bio

David is a marketing specialist for a small marketing agency. He’s been in marketing for many years, so he understands the value of time, quality, and frequency when it comes to managing a campaign. He’s not a designer but understands some design concepts, especially for email, social media, and website content.

Goals

Wants to find an image for marketing campaigns quickly.
Wants to be able to edit the image on the spot.

Frustrations

He understands some design concepts, but it’s not his primary skill.
He doesn’t own any sophisticated editing software.

Requirements

After creating the user personas, I reviewed the features and functionalities that the subscription page needs to have, and then I organized them according to their importance and complexities. This allows me to figure out the best way to create the task flows, making it easier for the user to go through the process of choosing the subscription plan and checking out.

Subscription comparison

Subscription features

Check-out

User Task Flow

The merging of the user personas and the subscription page’s features and functionalities led to the development of the user task flow. In this process, I was able to isolate each of the tasks and organized them in steps in linear form. The subscription page is basically one task but in two different user states instead of registered and unregistered users.

Page Tasks Map

The task map is the page’s task flow with only two different user states. This map clarifies the journey the user needs to take to convert them from the pricing page to the subscription check out.

Sketch Wireframe

Sketching with a pen and paper helped me to quickly develop a wireframe for the subscription page. With the tasks map, and features and functionality list, I find it easier to draw and experiment with the layout on paper first before creating it digitally. Overall, this process saves me plenty of time.

Digital Wireframe

After I feel confident about my sketches, the next step is to convert it digitally. Having a low fidelity wireframe makes it easier for me to duplicate certain elements and share my work for review. For this project, I want to focus on simplifying the process of conversion by breaking the process into actionable steps that slowly lead the user to check out.

The company has five different subscription options that users can choose from. Having the options laid out side by side helps with the visual comparison.

The sign up / login box is a bit tricky to design because it has many different entry points and user states to consider. In this mock-up, I want to focus on the pricing page entry point, which gives the user the option to sign up (for new users) or login (for existing users).
Note: Users can sign up for the free trial subscription, which makes them existing users if they decide to do a paid subscription afterward.

Dividing the payment information form into sections not only helps organize the information but also helps the user process the steps in sequence.

The Confirmation section of the subscription process helps provide security to the user with a summary of the subscription information before finalizing or confirming the subscription.

The Thank You section will not only show appreciation to the user and confirmation that the process is complete, but it is also an opportunity to lead the user to another method.

Visual Elements Design

The brand’s goal is to create an identity that targets young designers, marketers, and content writers. The use of muted gray with cool colors like the different shades of blue as the primary color could make the brand feel more modern, trendy, and clean. Also, adding the yellow and green colors as the secondary (or supporting colors) on the website could help make the brand feel more fun and friendly. Also, using san serif for typography adds support to the brand’s identity by keeping the site looks clean and modern.

Color Palette

Typography

Iconography

User Interface Design

The subscription UI is a combination of pages, modals, and windows that form a process that takes the user from viewing the pricing plan and into subscribing (or checking out). This process is critical because this is where the majority of the business’ revenue will be coming from. Security and trust are crucial factors in the success of this page.

Pricing Page

YayImages has five different types of subscription plans. However, since the majority of their features are identical, simplifying them and focusing on their differences would be more ideal than showing all of the elements in the pricing box (additional features are displayed below the fold but not displayed in this example). Also, placing the plans side by side makes it easier for comparison.

Sign up or Log in

The sign up / login form comes after the pricing page to capture the user’s necessary information. This form comes with a few designs (which are not shown in this example) that are based on the user’s states (logged in user, new user, and existing user that is not logged in). The other thing to consider is the log in via social media like Facebook or Twitter.

Subscription

The Subscription section is divided into three steps. This division not only reduces clutter but also improves and clarifies the information that often deters users from making any decisions. The first step is to ask the user for the plan and payment information (this method can be automatically generated based on what the user selected in the pricing page). The second step is to confirm that all of the information from the previous step was accurate. The third and the last step is to show appreciation and also provide additional assistance (or opportunities) to the user.

Step 1:

Step 2:

Step 3:

Step Markers

Adding step markers to clearly guide the user would help the subscription process run smoothly.

Clear Call to Action

Using a clear call to action button would help the user know what to expect next.

Confirmation

The Confirmation section allows users to make changes or confirm that the information is accurate. This not only reduces user errors and frustrations, but this also helps the user feel more comfortable that the right decision was made.

Thank You

The Thank You section has three primary purposes. First, it shows the user appreciation. Second, it provides the user with additional assistance and guidance, and third, it promotes other opportunities.

Take Away

Using steps really simplifies the process, and it’s especially useful when dealing with decision making. In Psychology, I learned that presenting a person with too many options often paralyzes that person from making any decisions. This notion gets worse when that person has to make a decision with the cost involved (or higher fear of losing). Using steps or segments that clearly defines a few options instead of many improves the chances for that person to make a decision.

His attention to detail and willingness to go the extra mile in making sure the job is done correctly...

Marcia Degnan

Creative Director & CEO, Vivid Creative, LLC

He has done a tremendous job and every piece of design we receive is very well thought through.

Jan Ole Kjellesvig

Founder & COO, Yay Media AS

Earl has a great design sense. The visual communications he creates for clients are fresh, engaging, produced strong results..

Dave Anderson

Marketing Director, Yay Media AS

His designs are effective and elegant and he’s always thinking about the User.

Hino Banzon

Product Developer, MTRO App

On several occasions we have given him a vague idea of what we are trying to achieve and he has come back with truly unique and great ideas.

Oddbjorn Sjogren

Founder & CTO, Yay Media AS

I found him to be an extremely dedicated and caring individual and one that is adaptive to many situations...

Walter Ramirez

UX/UI Designer, Specialist On Call

He’s trustworthy, and has a great personality, making him a pleasure to work with.

Linda Laegreid Johannessen

Founder & CEO, Yay Media AS

It was a pleasant working with Earl. He was always very responsive and we are very pleased with his work.

Yun Choe

Office Manager, Oak Endodontics

Earl worked very collaboratively with my team and delivered a high quality product.

Ashanthi Mathai

VP of Marketing, Specialists On Call

He quickly grasped the nature of our business and was able to translate that information into our unique web design...

Ricardo Hunter

President, Head Injury Rehabilitation & Referral Services

Earl is the best! He explains things in ways that even I can understand...

Paul Klinger

Director, Sevenoaks Retreat Center

I’m consistently impressed with the quality of his work.

Jeff Feiertag

IT Coordinator, MCFRS

He was especially careful to get a sense of the tone I sought so it would reflect my sensibilities and personality...

YAY IMAGES