EV logo
Loading...
EARL VARONA
Facebook icon
LinkedIn icon
YayImages subscription page

YAY IMAGES

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/or download stock images.

Summary

Since the search page is YayImage’s main service page, it is the most important page of the site. It is also 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
  • Interaction Designer
  • Visual Designer
  • Front-end Developer
Tools
  • Adobe XD
  • Adobe Photoshop
  • Adobe Illustrator
  • Pen and paper

User Personas

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

Female user

Alice Henry, 24

Freelance Designer
Puerto, CO

Bio

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

Goals
  • Wants to quickly find a high quality image for design
  • Wants to be able to save images in a folder for future use.
Frustrations
  • High quality stock images are very expensive
  • Hard to find a specific stock image
Male user

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 concept 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
  • Understands some design concepts but it’s not his primary skill
  • Doesn’t own any complex 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
Log in and registration
Check-out
Share
YayImages subscription page user task flow

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 like 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 in order to convert them from the pricing page to the subscription check out.

YayImages subscription page task map
YayImages subscription page sketch wireframe

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 checking out.

1

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

2

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 afterwards.

YayImages subscription page digital wireframe 1
YayImages subscription page digital wireframe 2
3

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

4

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

5

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 process.

Visual Elements Design

The brand’s goal is to create the identity that targets young designers, marketers, and content writers. The use of muted gray with the 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) in the website could help make the brand feel more fun and friendly. In addition, using san serif for typography adds support to the brand’s identity by keeping the site looks clean and modern.

Color Palette

YayImages subscription page color palette

Typography

YayImages subscription page typography

Iconography

YayImages subscription page 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 very important because this is where the majority of the business’ revenue will be coming from. Security and trust are key factors to 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 features 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.

YayImages subscription page pricing
YayImages subscription page sign up or log in

Sign up or Log in

The sign up / login form comes after the pricing page to capture the user’s basic 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 reduce clutter but also improve and clarify the information that often deters users to make any decisions. The first step is to ask the user for the plan and payment information (the plan 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 addition assistance (or opportunities) to the user.

Step 1:

YayImages subscription page step 1

Step 2:

YayImages subscription page step 2

Step 3:

YayImages subscription page step 3

Step Markers

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

YayImages subscription page step markers

Clear Call to Action

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

YayImages subscription page clear call to action

Confirmation

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

YayImages subscription page confirmation

Thank You

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

YayImages subscription page thank you

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 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.

Marica Degnan

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
Jan Ole Kjellesvig

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
Dave Anderson

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
Hino Banzon

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

Hino Banzon

Product Developer, MTRO App
Oddbjorn Sjogren

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
Walter Ramirez

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
Linda Laegreid Johannessen

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

Linda Laegreid Johannessen

Founder & CEO, Yay Media AS
Yun Choe

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
Ashanthi Mathai

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

Ashanthi Mathai

VP of Marketing, Specialists On Call
Anonymous male profile image

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
Paul Klinger

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

Paul Klinger

Director, Sevenoaks Retreat Center
Jeff Feiertag

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

Jeff Feiertag

IT Coordinator, MCFRS
Arthur Magida
Quotation mark icon

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

Arthur Magida

Author, The Nazi Seance