Experience Map vs Customer Journey Map: Choose the Right Tool for Your Business Needs

Your pricing page is the final destination of your clients in their customer journey. If your potential customer has done the whole way down the funnel and now is thinking about making the final decision, you just can’t fail to get users to click that “buy” button. 

A well-designed pricing page encourages and directs your prospect to make their choice and subscribe. But what should a good SaaS pricing page design be like? 

As a pragmatic SaaS design agency, we identified essential components that most pricing pages possess and picked nine best practices that popular SaaS companies use to optimize each element and create a pricing page that works. Most of them have a simple layout, clearly show the product’s value, and create trust between a company and user. Without further ado let’s dive into the details of how to create an evocative and effective pricing page.

Key pricing page elements

*Small intro* Before thinking about how to design your pricing page, you should develop a strategy that matches the value of your company and the needs of your customers. If you’ve already done it - good job and let’s move further, if not - read about the most efficient SaaS pricing models, choose the one suitable for you, and come back here.

Now let’s get back to our main topic. 

Having analyzed different SaaS websites we singled out five key components of a pricing page that promotes higher conversions.

1. Plan options. Think about your customers and how they can benefit from your service to come up with appropriate pricing offers. 
2. Prices. Make clear pricing that explains to the customer what they pay for and what they receive for the money paid
3. Main features. People don’t want to read loads of text, they need to understand what each plan is about by quickly looking through the list of main features.
4. Testimonials or popular companies’ logos. Add credibility with the help of your user’s success stories and recognizable companies’ logos
5. Frequently asked questions. Leave no place for hesitation by providing the viewer with all the information they may need to make a buying decision

Let’s take Asana’s (software for project management) pricing page as an example. 

Seems like it’s quite easy to complete an effective pricing page. Unfortunately, simply putting all the elements from the above list on your page won’t work. Designing a converting pricing page requires good knowledge of human psychology in general and the needs/preferences/pain points of your target audience in particular.

Combining thorough user research with best design practices will help to create a pricing page that speaks product’s value and encourages the prospects to push the “subscribe” button.

Best practices for creating a pricing page that works

Regardless of what you’re selling, a simple time-tracking app, or a complicated all-in-one sales & marketing solution, start your pricing by knowing who your buyers are. In other words, create buyer (or customer) personas. If you think I’m talking about fancy slides with vague concepts, you may have already prepared for one of the C-team meetings, that’s not the case. You need buyer personas created based on thorough quantitative analysis of sales and customer survey data. As a result of this exercise, you should understand what price certain groups of customers are ready to pay for your product, and these insights will underlie a value-based pricing strategy.

Did you get the point? Great, going further.

One buyer persona - one price plan

A pricing page is a place where all your efforts spent on user and market research pay off. As soon as you define your target audience the next step will be to offer them the best-match product. It should be a no-brainer for your customers to understand which of your products is specifically tailored to solve their problem. 

The smart way is to name the price plans after the customers’ group. For example, it can be a “Bootstrapper - Startup - Professional - Enterprise” plan.

You can also tie the pricing package names and the jobs to be done. It can be something like “Launch - Power Up - Scale.”

Each plan’s price should consider how price-sensitive the target group is and what value they’re willing to pay for.

‍Notion’s designers have done a great job presenting small illustrations to characterize each buyer persona: starting from a girl in the headphones that stands for a plan for personal use, ending with the orchestra conductor that represents the solution for an enterprise. Besides illustrations, each plan has a short clear description. For example, the personal pro plan has the following characteristic “For power users who want to do even more”.

Build pricing that scales 

The scalable pricing concept is based on a value metric, which presents what the customer pays for - per seat, per user, the number of minutes, etc.

Whereas buyer personas, which we discussed above, are crucial for the sales funnel and adequate price plan packing, the value metric allows to differentiate prices and expand revenue along with the increasing value customers get from your product. Put it another way, if a customer gets more value, you can also grasp a part.

The graph below will help explain this thought.

Look at the blue rectangle. It shows the market you cover with your fixed price. You give a specific value and get paid for that value. But actually, you can embrace all that striped area, setting different prices and being price-flexible. To make this simple yet brilliant scheme works, you should flawlessly determine where your customers gain value from your product without tangling them with too diverse and complicated pricing.

Three is the optimal amount of pricing tiers

If your pricing page offers just one plan the main task of those who visit your website will be to decide if to subscribe to your service or not, but if you have two and more pricing tier potential customers will think which plan is better to choose.  

Yet, more than four plans can confuse the prospect with too much information, while your task is to make each offer easy and quick to scan. That’s why the best practice is to create three plans for different buyer personas.

A good example here is Dropbox. Clean and minimalistic design, which is common for the whole Dropbox’s website, lets the reader quickly scan each offer and understand the main features of each plan. As well, the visitor can easily check the price difference between monthly and annual subscriptions with the help of two buttons at the top of the page. Finally, each tier has a noticeable call-to-action button that informs the user about a free trial period. 

Improve page design and user experience

SaaS products are usually complex and have wide functionality, so it is difficult to explain everything to a customer and keep the page clean and clear. 

All the hard work will be in vain if your pricing page doesn’t look right. It should not only have a neat and user-friendly design but also be easy to read and comprehend. Ask our designers how to build a beautiful pricing page, and they will brainstorm a bunch of options to choose from. We also have some hints for the SaaS pricing page design you can check.

What you should pay attention to when building your pricing page is that:

• People don’t read; they scan
• People don’t like complicated things they can’t get by a quick look
• And finally, people hate cumbersome wordings and giant feature lists

Regarding the last point, when your future customers land on your pricing page, they expect to see a concise feature comparison facilitating them to make a purchase decision. They don’t actually need a dozen functionalities on your list as they care about 2-3 main features and probably a couple of more specific ones. 

Focus on having these three price strategy pillars on your pricing page:

1. Positioning based on buyers personas you created before
2. Packages that contain features crucial for a particular customers group
3. Price plans aligned with values and customers’ willingness to pay for them

For example, take a look at the Evernote’s pricing page.

 The plans’ structure is clear and comprehensive. The prices are adjusting dynamically depending on the customer’s IP address. The concise feature comparison is easy to understand. For those who need more details, the extended features list is available.

The FAQ is organized in a drop-down list. Below the FAQ section, Help center and Contact us icons invite to connect in case of additional questions.

Eliminate uncertainties

It’s natural for those who make a purchase decision to doubt. Luckily there are several common ways, which we've highlighted before,  that can help you reduce clients’ uncertainty (FAQ, testimonials, recognizable company logos).

Here are some more details you may want to consider implementing on your pricing page.

FAQ and support

In the “Anatomy of a SaaS Marketing Site, it is stated that:

• 76% of companies enable the “Contact Sales” option on their pricing pages
• 66% of pricing pages have an FAQ section
• 13% embed a live chat functionality

Among the points above, we would emphasize the FAQ as these three letters will assist you in beating another three ones - FUD that stands for fears, uncertainties, and doubts. 

People feel hard parting with money, so your task here is to mitigate discomfort. 

Firstly, identify the reasons that hinder your potential clients from buying your product. You can do this by surveying your leads and customers. Once you uncover the objections, list the most common ones and handle them with your answers. 

Currency converter

Showing the product price in customers’ local currency is good but not enough. You will do a great job adjusting the price based on the value the product may have for the different markets. 

According to the survey ProfitWell conducted, those SaaS companies that implemented currency and pricing localization grew much faster than their competitors who didn’t bother to execute such adjustments.

Your pricing page is a point where the hours of your hard work bring customers. Treat it accordingly.

Start with the most expensive plan

According to CXL research, people tend to read the first two plans on the left side more precisely and there is a higher chance that the visitor will choose the most expensive offer if it is listed on the left.

Take a look at Mailchimp’s pricing tiers order:

 The most expensive plan goes first. So that when the customer sees $299 for the premium plan, $14 for the standard plan seems a beneficial and fair price for this offer. Additionally, Mailchimp highlights the “Standard” plan with a yellow stripe that adds value and perfectly matches the general website design style. 

Highlight your recommendation

When the user hesitates which plan to pick, featuring “most popular” or “recommended” plan helps to eliminate the buyer’s confusion. 

When deciding which plan to highlight, always choose the one that you know would bring the most value to the majority of your customers. 

Check the pricing page of ActiveCampaign.

The “Professional” plan is highlighted both with “Most popular” label and bright blue color. This way ActiveCampaign promotes more clicks at this option. 

Show your value proposition

The visitor doesn’t have to scroll down the whole page and read everything you put there to understand the message your SaaS company wants to communicate. They should understand the value of your service after the first glance on the pricing page. 

For example, Grammarly (writing assistance service) provides a simple, yet efficient pricing table clearly listing the features of each plan. As well, pay attention to the bold black title on the white background “Elevate Your Writing”. One short sentence reveals the value of pricing on this SaaS platform. 

Foster upfront and annual payment

Whereas monthly bills can be more attractive to your customers, upfront and annual payments are what you have to focus on for you as a business. Upfront will secure a healthy cash flow, and yearly contracts ensure long-term customer relationships.

And also be careful with the discounts. Offering the price cuts too often, you won’t be able to sell at regular price. The frequent deals create the expectation in customers’ minds that they should wait for the next promotion.

Take a look at Sales Cloud (by Salesforce) pricing page. All price plans encourage annual payment. CTAs are clear with an explicit hint to take a free trial. 

‍

How to understand if my pricing page is effective?

The above practices together with examples of popular SaaS companies will give you useful ideas to start designing your own pricing page. But you should remember that your product is unique: what works for Dropbox or Mailchimp, may not work for your SaaS.

And that’s OK, your SaaS pricing page doesn’t have to be perfect on the same day you release it. To understand that you are doing everything the right way, you have to keep testing the page until you find the right combination of each element, starting from page layout and ending with the correct CTA color.

In case you need proficient help in designing an effective and beautiful pricing page for your SaaS Eleken is ready to be your design partner. Take a look at our recent SaaS projects or  drop us a line to have all your questions answered.

It’s so human to take for granted those things we got used to. Acute eyesight, good hearing, ability to read and understand, freely move and easily communicate. But what if to think for a moment that many people among us interact with the world differently? As of 2019, 37,5% of the world’s population (and that’s more than two billion people!) live with some kind of disability. A terrifying number, right? It can be permanent disabilities or temporary impairments; however, none of them makes life easier. 

Every day experiencing functional difficulties, using the web became a challenge for those who need assistance and a special approach. Every day businesses lose many potential customers just because the latter can’t properly use websites to achieve their goals. 

This article will talk about why user interface accessibility is vital for both people and businesses, how to make UX design accessible, and what UI design accessibility guidelines to follow. And to start with, let’s recap what we know about accessibility.

What is accessibility?

Accessibility evaluates a product from the perspective of whether people with different abilities can easily use it. Accessibility in user interface design expands the users’ coverage enabling as many people as possible to understand, navigate, and interact with the digital product. In a broad sense, accessibility serves not only those who have a certain kind of disabilities but also all users, making their user experience seamless and hassle-free. 

The universal design became the accessibility concept embodiment pursuing the goal to create a “one size fits all” design admissible for all users regardless of their physical or mental condition.

Different types of disabilities

Working on accessibility in UI/UX design, it’s crucial to keep in mind that, besides permanent disabilities, people often experience temporary or situational deterioration of their condition.

For example, the sight issues can vary from total blindness to color blindness, low vision, or impossibility to distinguish website content on a mobile device under the bright sunlight. 

‍

Usability vs. Accessibility

There is one distinct commonality between usability and accessibility. The poor user experience for the general audience creates much more difficulties for people with disabilities and impairments, making the interaction with a website or app inaccessible.

Inaccessibility shouldn’t necessarily be related to some kind of users’ disabilities. 

A product can become inaccessible for certain groups of people when:

• It has a non-intuitive user flow and/or unclear instructions
• The price is too high
• Product usage requires a specific cultural context that not all users can understand
• Some social groups (for example, aged people) lack the background knowledge to use the product

Why should we make design accessible?

As I mentioned above, the number of people having some kind of disability is impressive. Considering how many troubles they may have daily to lead a normal life, why not try making their interaction with the web less complicated but more productive? The UX designers can create a user experience beneficial for everyone who uses digital products regardless of whether they have permanent disabilities, temporary impairments, or situational difficulties. 

It’s impossible to create a customer-centered design without empathy. Working on accessibility in UI, designers should put themselves in a user’s shoes and walk through a customer journey, trying to understand the possible gaps in user experience.

And if we see UX accessibility from a business perspective, making your website or app accessible to as many people as possible will lead to:

• Bigger audience coverage
• Better search results
• Faster loading time

Also, accessibility is a driver for innovations. For example, Google is working on a non-language processing tool that should process sounds and intonations, benefiting people with auditory impairments.

If you’re still not convinced whether you should make your website accessible, here is the information for your consideration.

In 2006 the National Federation of the Blind had a lawsuit against Target, an American retail corporation, regarding Target’s website inaccessibility. As a result, the corporation paid six million (!!!) fine and committed to ensuring the use of assistive technologies on their website to make it accessible not only for blind people but also for users with various disabilities.

And one more note. In 2017, US federal and state courts received 814 accessibility lawsuits under the non-discrimination laws. Things are getting serious, you see.

UX accessibility standards and guidelines

Assuming you’ve recognized all the importance of accessibility and now you’re wondering if there are any accessibility guidelines for UX designers to adhere to. Sure, they do exist and devote a separate paragraph. 

The two major sets of accessibility regulations in the United States are WCAG (Web Content Accessibility Guidelines) and Section 508. 

WCAG represents the world-accepted standards for the accessibility of websites and apps. 

It states that accessible design should be:

• Perceivable: a user should be able to perceive the information presented on a digital resource. For example, people with low sight must be given a possibility to read written words by a screen reader
• Operable: keyboard navigation must be an alternative solution to using a mouse or a touchpad
• Understandable: a website’s information and user interface must be understandable and meet users’ expectations in terms of content and operability
• Robust: the website must be advanced enough to be compatible with assistive technologies

Section 508 standards must be applied when working on governmental projects. It’s a set of requirements that need to be satisfied for the project to become legally compliant with accessibility guidelines (as they’re articulated in WCAG). So, if you’re designing a project for the private sector with no relation to state or federal programs, follow WCAG guidelines. In other cases, you should refer to Section 508 requirements.

How to make design accessible

While there are many things to implement for creating an accessible design (use this checklist for reference), you can primarily focus on some of them. 

1. Check your current accessibility status

You can do this using the AXE Chrome extension. This tool performs web accessibility testing according to WCAG guidelines and gives you an “accessibility compliance” score. Based on the results, you decide how much effort you’ll need to make your product design accessible.

2. Ensure sufficient color contrast

The most widespread accessibility problem is the low contrast between text and background. According to WHO, around two billion people worldwide have more or less severe visual impairments caused by various conditions and diseases. Just imagine how many people you will help just by implementing slight text contrast adjustment to your design.

WCAG Visual contrast requires a 4.5 to 1 contrast ratio between text and background. To quickly check a color contrast level, you can use the Contrast app or WebAIM contrast checker. 

3. Support color with other elements

When you outline essential information with color only, people with low visual acuity or colorblindness face difficulty figuring out what your content says. 

Use labels, bold text, underlines, italics, icons, font weight, and size to make your message understandable for people with visual impairments. 

The complex content as charts and graphs, should always be accompanied by text and labels. Using the color only to distinguish the data creates complications for your visually impaired audience and makes interaction with your website frustrating. You can use a Color Oracle app to check how people that can’t distinguish colors see your design.

4. Use focus indicators

When you select a webpage item, it usually becomes highlighted with an outline. The name of this outline is a focus indicator. It shows what element a keyboard is focusing on and where you’re when navigating a website. Focus indicators can be used for links, form fields, buttons, and any other webpage elements that should differ from the surrounding items. These indicators help users with visual impairments who need screen readers or people whose mobility is limited due to injuries or specific illnesses.

Designing for accessibility, it’s crucial to make focus indicators visible to facilitate users’ interaction with your website.

5. Add alternative text to images

If a person has low sight or just doesn’t have time for reading the web content, they can use screen readers, which convert text into speech. As screen readers work only with written words, webpage images require textual description called alternative text that describes what the image is about and how it relates to the content. You can write alternative text within the <alt> attribute or just explain the image with the surrounding context. 

It’s a bad practice to write like “picture” in the <alt> text as it won’t help listeners understand the essence. Try describing as detailed as possible what’s happening on the image and how it’s connected to the overall text. However, if the image is just an illustration and serves for pure decoration, you can put an empty <alt> attribute “saying” the screen reader to skip it.

Google is now working on the AI technology that will describe pictures with 94% accuracy. But until they make it happen, the task of UX designers (and content writers as well) is to provide users with accurate and concise image descriptions.

Also, WCAG recommends keeping the text lines up to 80 characters and avoiding using justified text to enable zoom options.

6. Establish content hierarchy

Headings and subheadings form the structure of the text and help readers understand better the logical order of the narration. Bigger font titles attract more attention and serve as content milestones based on which the main idea can be easily perceived. 

When developing a website, it’s important to use proper structural HTML elements such as <h1>, <h2> and similar. tags to form the content hierarchy. Browsers and screen readers “communicate” with HTML elements receiving the information they contain and process it properly. Thus, don’t use HTML tags just to outline some webpage item with no meaning and, on the contrary, don’t style headings with bigger font and bold text where the <h> tags must be applied.

7. Enable keyboard navigation

Keyboard navigation is one of the most significant accessibility features. It’s helpful for people with motor impairments, poor muscle control, and visually impaired people that use screen readers. The navigation has to be logical and intuitive, correlating with a page’s visual flow. 

For example, the Tab key should be able to move through all interactive page elements like links and buttons. The Enter key should select an element and confirm information input. Try navigating through a website without using a mouse or a touchpad and check if you can take necessary actions only with the help of a keyboard.

8. Test the design with real users

Once you’re done designing for accessibility, use accessibility-testing tools (like, for example, Color Oracle mentioned above) and ask users with different capabilities to check your design.

What else can you do for your product’s accessibility?

1. Ask a third-party UX audit provider to conduct an accessibility audit and find out if your product corresponds to WCAG 2.0 guidelines and meets assistive technologies requirements 
2.  Assign somebody from your internal team to go through your design and check if it meets principal accessibility standards (you can use the checklist from this article as a reference)
3. Mind accessibility during the UX research stage, verify your design assumptions with people who are willing to help, and assess what you can improve in your design for better usability and accessibility.

A final word

Designing for accessibility will definitely require more effort following established standards and guidelines. However, by making your product accessible, you can help more people benefit from the web, increase your product’s audience, and avoid legal issues concerning inaccessibility. If you need any help with creating the accessible design, let’s talk. Also, check our article with inclusive design examples to see how brands adhere to accessibility standards.