Tag Archives: value

11 Surprisingly Awesome Popup Design Examples – Scored by The Delight Equation [Tool]

I admit it. I’m a geek. Or am I a nerd? Definitely not a dweeb, but probably a keener (that’s a Canadian term).

One of my favorite things to do (as a marketer) is to reverse-engineer marketing experiences – good and bad – to define an equation that can be used to score them. It’s primarily a heuristic exercise, but I find it’s an incredibly helpful way to analyze a design, especially when it has the ability to leave you with a simple checklist of things to consider to make it better.

In the past, I’ve created The Clarity Equation (for value propositions), and The Testimonial Equation (for customer social proof).

For today’s post, I focused on popup design examples that exude positive characteristics, to create The Popup Delight Equation.

What Makes a Popup Design Delightful?

Hands up if you thought “That’s an oxymoron.”? I know, I know, how can a popup be delightful? Well, just like any other aspect of marketing and web design, it’s all about the details, and finding those magical ways of combining what makes your brand special, with a dose of responsible interaction design.

I see delightful popups all the time, usually because the copy is hilarious, or the design is surprising.

If your perception of a popup is one of those ugly WordPress template type things with three big green checkmark bullet icons (see below), and a Johnson box (those fat dashed red lines that resemble a coupon cutout), then no, that’s not delightful. That’s just shitty.

It is possible to make a popup delightful, and it’s not that hard if you know which aspects of interaction and visual design are required to do it right. Which brings me to…

The Popup Delight Equation

The equation (shown in the image at the top of the post) is broken down into 7 principles; Clarity, Control, Creativity, Relevance, Charm, Value, & Respect.

Each principle has a few checklist questions that build up a score between 0 and 1 (you can choose 0.5 for any of them if you like) for a maximum score of 7. These are then combined and turned into an overall percentage score as shown below:

EXAMPLE POPUP DELIGHT SCORE
CLARITY CONTROL CREATIVITY RELEVANCE CHARM VALUE RESPECT TOTAL
0 1 1 1 0 1 0 57%

I’ll explain each of the delight principles, and then I’ll get to the popup designs.
(skip to the examples)

Principle #1 – Clarity

The clarity principle represents how easy it is to understand the offer presented by the popup. First, there’s the immediacy factor, can you read and understand it very quickly. The second part concerns the use of a primary “hero” image and whether it helps or hinders visual communication.

Clarity = ( Immediacy + Hero ) / 2
Immediacy Can you explain what the offer is after looking at it for only five seconds? Yes 1, No 0
Hero Is there a primary image (not a logo) that shows what you will get (or who you will get it from)? Yes 1, No 0
If it’s a generic site-wide offer like a discount that doesn’t need an image, score 1.

Principle #2 – Control

The control principle represents a visitor’s ability to fully control the experience. This includes being able to easily accept, reject, or discard the interruption.

Control = ( Close [On] + Close [Out] + Close [Esc] + Continue + Cancel ) / 5
Close [On] Is there a close button (typically an x) on the popup? Yes 1, No 0
If it’s a fullscreen “Welcome Mat” you can take a 1 here unless there’s no “No thanks” button.
Close [Out] Does the popup close if you click on the background surrounding it? Yes 1, No 0
If it’s a fullscreen “Welcome Mat” you can take a 1 here.
Close [Esc] Does the popup close if you press the escape button on your keyboard? Yes 1, No 0
Continue Is it clear what you need to click in order to accept the offer? Yes 1, No 0
Cancel Is it clear what you need to click in order to decline the offer? (Score 1 if there’s only one option) Yes 1, No 0

Principle #3 – Creativity

Like any type of marketing communications, a creative popup will be more likely to be well received. This principle is comprised of visual design esthetic, the inclusion of (non-tacky) animation, and how on-brand it is.

Creativity = ( Design + Animation + Brand ) / 3
Visual Design Esthetic Is it unique looking (non-rectangle), or just look awesome to you (some subjectivity is okay here)? Yes 1, No 0
Animation Does it include some motion as it appears that makes it more noticable. Yes 1, No 0.5, Yes, but it’s annoying 0
On Brand Does it match the site’s design or look like a cheap template that could be from any site? Yes 1, No 0

Principle #4 – Relevance

A popup that isn’t highly relevant will convert poorly and moves you closer to the wrong end of the interruption spectrum. This principle includes congruence (how aligned the offer is with the page you are visiting) and targeting.

Relevance = ( Congruence + Targeting ) / 2
Congruence Does the offer feel related to the page you’re on? Yes 1, No 0
If it’s somethng like a site-wide discount it’s a 1, but if it’s a blog subscribe popup on a homepage, product or pricing page etc. (not your blog), that’s a 0.
Targeting Score 1 unless one of these scenarios is true: it doesn’t apply to you (such as wrong country), or it’s referring to you coming from a page/partner/place that you didn’t come from (and in general if it’s making assumptions about you that are incorrect), in which case it’s a 0

Principle #5 – Charm

You know a charming marketing experience when you see one. Same goes for popups. If the design and/or copy make you laugh, or smile, or want to share it with someone, it’s a winner.

Charm = ( Smile [Design] + Smile [Copy] ) / 2
Smile [Design] Does the visual design make you smile? Yes 1, No 0
Smile [Copy] Does the copywriting make you smile? Yes 1, No 0

Principle #6 – Value

Some popups only contain information, some have a discount, others ask you for personal information in order to claim the offer. The value principle is concerned with how fair of an exchange it is, and it’s completely binary. If the reward is equal or greater than the ask/effort, you win.

Value = ( Reward >= Ask )
Reward > Ask Is the offer worth more than or equal to the requested information/effort? Yes 1, No 0
Score a 0 if it seems unfair, such as a ton of form fields for very little in return.

Principle #7 – Respect

The respect principle leans on the concept of “a responsible use of technology”. The biggest offense in this regard is the idea of “Confirm Shaming”. This is where there are two options (continue or cancel), but in order to cancel, you have to click a button/link with offensive copy – such as “I don’t like free money”. You get penalized extra for this offense.

Respect = 1 – 2*(Confirm Shaming)
Confirm Shaming If this is a two-button Accept/Decline popup, and the decline button is offensive in any way, it’s confirm-shaming. Yes 1, No 0
A 1 here results in a -1 score for principle 7.

Mid-post call to action: click here to subscribe to the weekly updates.


Brands Appearing in Today’s Popup Design Examples

Thanks to these awesome companies/people for inspiring me to include them: Tim Ferriss, Leesa, ClassPass, How-To Geek, Groupon, Tasting Table, Get Response, Lemonstand, PetSmart, Travelzoo.

Note: None of these popup designs score 100%

I’m sure you’ll like some, and dislike others. I’m including a wide variety of examples because they each show different aspects of the delight criteria.

Popup Design #1: Tim Ferriss

POPUP DELIGHT SCORE
CLARITY CONTROL CREATIVITY RELEVANCE CHARM VALUE RESPECT TOTAL
0.75 0.8 1 0.5 0.5 1 1 83%

Analysis

This fullscreen “Welcome Mat” popup takes over the screen when you’re leaving. I dislike this style when it happens when you arrive, but on exit, it’s totally cool. It’s a simple and classy design. Let’s score it!

  • CLARITY:
    I gave it 0.5 for immediacy as I had to figure out what the content was (fortunately I just bought a book about Seneca so I caught on). Having Tim in the background makes it very clear it’s coming from him.
  • CONTROL:
    The only failing here is the lack of the escape button working, which is my favourite way of dismissing a popup (I’m a big keyboard shortcut fan). It’s much faster than hunting for a close icon/button.
  • CREATIVITY:
    I love the design. It’s fresh and open. The visual hierarchy of the buttons is perfect: dominant continue, secondary cancel.
  • RELEVANCE:
    It loses out a bit on relevance, as it’s a speaker contact page, making this popup incongruent.
  • CHARM:
    Visually, yes. His authentic smile makes you feel welcome.
  • VALUE:
    It’s a 2-step opt-in form (email address if you click “Unlock”), which is a fair deal.
  • RESPECT:
    “No thanks, I’m not interested.” is great. It’s all you need to do on your cancel button. No confirm shaming here.

Popup Design #2: Leesa Mattress – Countdown Timer

POPUP DELIGHT SCORE
CLARITY CONTROL CREATIVITY RELEVANCE CHARM VALUE RESPECT TOTAL
1 1 0.83 1 0 1 1 80%

Analysis

There are so many mattress 2.0 companies out there now, it’s hard to tell them apart aside from the colour. This one’s really plain, and quite boring, but it does get bonus points for the countdown timer, and not breaking any of the fundamental delight rules.

  • CLARITY:
    Easy.
  • CONTROL:
    Full control.
  • CREATIVITY:
    It got it’s creativity 1/3 only for being on brand, but I added a 0.5 bonus for the countdown timer, which is a nice touch for ecommerce.
  • RELEVANCE:
    Timely and on point.
  • CHARM:
    Nah. They could do way more with the copy and the visuals are kinda bleh.
  • VALUE:
    Hard to argue with a discount.
  • RESPECT:
    No problems here.

Popup Design #3: Tasting Table

POPUP DELIGHT SCORE
CLARITY CONTROL CREATIVITY RELEVANCE CHARM VALUE RESPECT TOTAL
1 0.8 0.17 1 0 1 1 71%

Analysis

I like the use of a question headline in this popup. If you aren’t then you probably shouldn’t be on the site, so they’re helping to self select their ideal customer/subscriber. I’m not a foodie, however, so I’m closing it ;)

  • CLARITY:
    Get an email, about food. Easy.
  • CONTROL:
    No escape button close on this one either. Grrr.
  • CREATIVITY:
    It gets a few points for being on brand, but nothing original otherwise.
  • RELEVANCE:
    It’s food.
  • CHARM:
    Lots of potential, but doesn’t deliver.
  • VALUE:
    I was going to ding it for asking for a zipcode, but it probably increases the value so it get’s a pass.
  • RESPECT:
    Great.

Popup Design #4: Get Response

POPUP DELIGHT SCORE
CLARITY CONTROL CREATIVITY RELEVANCE CHARM VALUE RESPECT TOTAL
1 1 0.67 1 1 1 1 95%

Analysis

Simple and a bit weird (and basic) looking, but it rocks the scores beacuse it doesn’t break the fundamental delight rules, and adds some playfulness to stand out. Give it a little wiggle animation to go with that cute little alien thing and it would get a perfect score.

  • CLARITY:
    Pretty clear, and they get a few extra seconds of reading because it’s cute.
  • CONTROL:
    Full control.
  • CREATIVITY:
    Not the slickest design, but I think it’s got a lot of fun in it.
  • RELEVANCE:
    It’s SaaS, and this is for a free trial. Totally relevant.
  • CHARM:
    This one made me smile based on the copy and the design. Nicely done.
  • VALUE:
    It’s no different than clicking any other signup button on the site, so it’s regular ol’ fair.
  • RESPECT:
    Yes.

A quick contrast break…

Some pretty amazing score so far, and that’s because they’re doing it right. Before I continue, I just want to run one of the examples from yesterday’s “6 Really Bad Website Popup Examples” post through The Popup Delight Equation to provide some perspective.

POPUP DELIGHT SCORE
CLARITY CONTROL CREATIVITY RELEVANCE CHARM VALUE RESPECT TOTAL
0.5 0.6 0 0 0 0 1 30%

NOT delightful.

Popup Design #5: Groupon

POPUP DELIGHT SCORE
CLARITY CONTROL CREATIVITY RELEVANCE CHARM VALUE RESPECT TOTAL
0.75 0.4 0.67 1 0 1 1 69%

Analysis

  • CLARITY:
    I would’ve given it a higher score if there had been a photo of Vancouver in the popup, as it gives that immediate sense of locale.
  • CONTROL:
    Neither the escape key or clicking the background close the popup, which is really annoying when the “No thanks” link is so tiny. I dinged it extra for that.
  • CREATIVITY:
    This is what I’m referring to re: looking different from a shape perspective. Yes, it’s a circle and not a rectangle, but that’s the point. 99.999999% of popups are rectangles. So this simple change makes a world of difference. And the transparency allows lots of breathing room, and for it to not look like it’s completely shutting out the site.
  • RELEVANCE:
    Perfect.
  • CHARM:
    None.
  • VALUE:
    Hard to argue with deals.
  • RESPECT:
    Good job.

Popup Design #6: How-To Geek

POPUP DELIGHT SCORE
CLARITY CONTROL CREATIVITY RELEVANCE CHARM VALUE RESPECT TOTAL
1 1 0.17 1 0.25 1 1 77%

Analysis

I bet you didn’t expect a score like that. Which just goes to show that when you do some of the fundamentals correctly: it’s very clear, it’s easy to control, relevant, fair value, and respectful. It looks pretty awful, but that’s why it scores so poorly on creativity and charm. The fundamentals matter a lot. Get those right, and you can spend your time being exceptional.

  • CLARITY:
    Super obvious.
  • CONTROL:
    All functional.
  • CREATIVITY:
    On brand but nothing else positive from a creative standpoint.
  • RELEVANCE:
    Yup.
  • CHARM:
    I gave it a tiny bit cos of the nerdy logo guy.
  • VALUE:
    Standard newsletter value.
  • RESPECT:
    All good.

Popup Design #7: ClassPass

POPUP DELIGHT SCORE
CLARITY CONTROL CREATIVITY RELEVANCE CHARM VALUE RESPECT TOTAL
0.5 0.4 0.33 1 0 1 1 60%

Analysis

I thought this would do better when I first saw it, then after playing with the interaction it let me down a bit.

  • CLARITY:
    This is an entry popup, so the visuals are covered. Having a photo in the popup would help with the clarity around what kind of class they’re talking about for a first-time visitor.
  • CONTROL:
    no on, out or esc. The reason having no visible close button is undelightful is because it forces you to choose (and read) one of the buttons to close it. That’s too much effort when I’ve decided I want to get rid of it.
  • CREATIVITY:
    On brand, nothing else.
  • RELEVANCE:
    Yes.
  • CHARM:
    A bit cold.
  • VALUE:
    Without question.
  • RESPECT:
    Good job.

Popup Design #8: Lemonstand – Squishy Animation

POPUP DELIGHT SCORE
CLARITY CONTROL CREATIVITY RELEVANCE CHARM VALUE RESPECT TOTAL
1 1 0.67 1 0.25 1 1 85%

Analysis

I stuck an animated GIF in for this one so you could see the animation. It’s a prety plain looking popup aside from that, but you can see how it does add that extra attention-grabbing effect.

  • CLARITY:
    Ebook with an image of a book. Done.
  • CONTROL:
    Full control.
  • CREATIVITY:
    Scores for animation and being on brand. Mix in a different shape or a design like a lemon stand for bonus points :D
  • RELEVANCE:
    It’s on the blog, so full points.
  • CHARM:
    Only the squishy animation saves it here.
  • VALUE:
    Fair indeed.
  • RESPECT:
    No confirm shaming here.

Popup Design #9: PetSmart

POPUP DELIGHT SCORE
CLARITY CONTROL CREATIVITY RELEVANCE CHARM VALUE RESPECT TOTAL
1 1 0 1 0 1 1 71%

Analysis

Granted, this is the lamest of the bunch, but I included it because of its simplicity. Sometimes an offer is just an informative statement.

  • CLARITY:
    Crystal.
  • CONTROL:
    Complete.
  • CREATIVITY:
    Nope. Sorry.
  • RELEVANCE:
    It’s an ecommerce store. Yes.
  • CHARM:
    Nope. Add some kittens!
  • VALUE:
    Definitely.
  • RESPECT:
    All good.

Popup Design #10: Travelzoo << The worst!

POPUP DELIGHT SCORE
CLARITY CONTROL CREATIVITY RELEVANCE CHARM VALUE RESPECT TOTAL
1 0 0.67 1 0 0 -1 24%

Analysis

Looks sure can be deceiving. At first glance I really like this one. Then I started playing with it. And it became the worst popup of them all.

  • CLARITY:
    Yep, super clear with the photo of Ireland.
  • CONTROL:
    Can’t click the background to close. Oh, and wait, no matter what you do, IF you manage to close it you get turfed to the homepage. Horrible.
  • CREATIVITY:
    Minor points for the rounded corners.
  • RELEVANCE:
    Very.
  • CHARM:
    Started with zero, got worse from there.
  • VALUE:
    See respect, below.
  • RESPECT:
    Wow. If I were critiquing this solely on a screenshot, I’d have given them a 1 for respect. But I just tried to interact with it. If you close the popup (without signing up) it redirects you right back to the homepage. You can’t even see the deal. That’s seriously gnarly. Shoulda put this one in yesterday’s post.

Popup Design #11: Tim Ferriss

POPUP DELIGHT SCORE
CLARITY CONTROL CREATIVITY RELEVANCE CHARM VALUE RESPECT TOTAL
1 0.6 0.67 1 0.5 1 0.5 75%

Analysis

We close it out with another from Mr. Ferriss. It’s from the same page as the first one, but instead of being an exit popup, it’s triggered when you click a small banner that appears in the lower-left as you scroll down the page. Because it’s an on-click triggered popup, you typically get full points for relevance and clarity as you asked for it specifically.

  • CLARITY:
    Super clear
  • CONTROL:
    No escape key function, and the close (x) button doesn’t always show up.
  • CREATIVITY:
    Looks great,and on brand.
  • RELEVANCE:
    Perfect.
  • CHARM:
    As before, the friendly photo works.
  • VALUE:
    As expected.
  • RESPECT:
    Not quite as nice as the other one on the cancel link, so I’m dinging him a little.

Alrighty then, that’s a wrap for those 10 delightful popups, and one most certainly not delightful (Travelzoo) popup. Let me know if you agree/disagree with my ratings.

How Delightful are Your Popups?

I showed you mine, now show me yours! I hope you enjoyed learning about the delightful side of the website popup. I’d really love to see some of your popups, and how you score them, so drop a URL in the comments with your score and we can see if I agree.

Cheers
Oli

p.s. Don’t forget to subscribe to the weekly updates.

Taken from: 

11 Surprisingly Awesome Popup Design Examples – Scored by The Delight Equation [Tool]

How to Build a Sticky SaaS Product

It’s Day 4 of Product Marketing Month. Today’s post examines churn, and accelerating your customer’s Time to Value. — Unbounce co-founder Oli Gardner

What’s The Easiest Way to Make a Sticky Product?

Build a product and call it a Sticky Bar. Look over there >>

With that dad joke out of the way, I want to talk about some important SaaS metrics, that will help product marketers understand what is or isn’t sticky about the products you’re building. I’m also going to talk about how to find some clues in your data, and finally how we’ve been working on fixing our own stickiness problems at Unbounce.

What makes a SaaS product sticky?

In short, it’s a product that becomes part of someone’s daily routine. Something they can’t do as good or enjoyable a job without. It’s something they need. But even more than that, it’s something they love. And that love comes from two main places; either it’s a one-of-a-kind solution that’s simply awesome, or it’s a many-of-a-kind solution that includes a superior customer experience.

Unless you’re selling frying pans, having a product that isn’t sticky just means that you have a churn problem.

Why do people churn from a SaaS product?

There are many reasons why someone would decide to stop paying you money every month, and a great way to find out what they are is simply to ask. At Unbounce we have an in-app cancellation survey that gets seen by anyone who downgrades to free from a paid plan. It’s a single open-ended question: “What is your reason for downgrading?

On average, about 27% of people answer the question. Here’s a pie chart showing the breakdown of responses over a 6-month period.

There are some fascinating responses in there, but the one that stands out the most is the “Under-Utilized” (31.40%) category. This is the response you don’t want to hear. They were using it, and probably deriving value from it, but they weren’t using it enough to warrant an ongoing subscription.

We noticed that certain cohorts of customers were more likely to see fluctuating value from using landing pages. This could be due to an irregular number or timing of campaigns, so when there’s nothing going on, they cancel or downgrade their plan. They may come back again, many do, but the inconsistent behavior – known as flapping – can be a symptom of a product that isn’t fully sticky.

It could also be because they were not able to effectively calculate or realize the ROI of our solution properly, which can happen when customers are running campaigns not directly tied to paid spend. When there is money involved, it’s easier to calculate your returns, speeding up the time to value (TTV).

Increase Stickiness by Reducing Time to Value (TTV)

Time to Value (TTV) is the velocity of a customer seeing the value from your product – how long does it take them to get to those ah-ha moments that make them see the benefit?

It’s a great way to think from the customer’s perspective. The tough part is discovering what those ah-ha moments are. But when you do, product marketing has its mission.

When your TTV goes down, your stickiness and your LTV (Lifetime Value) goes up.

One of the ah-ha moments we’ve identified for Unbounce is when people get inside the builder, and they see how easy, yet how powerful and customizable it is. The problem is, they don’t get to see that until they slap down a credit card.

To amplify this, we just released a preview mode of our builder, designed specifically to help shorten the TTV.

You can check it out at preview.unbounce.com.

If you click the image, you’ll notice that upon arrival, you see a popup with a welcome message and a bit of contextual information about where you are and what you can do.

Speaking of popups, I’ve heard this question a lot in the past 6 months:

“Why did you choose popups and sticky bars as your next products?”

Why did we choose popups and sticky bars?

With the landing page product, we knew we’d solved the pain of customers increasing conversions for their paid traffic, but those same customers (and their teams) also need ways to optimize the organic traffic they already have.

Popups and sticky bars are both tools that have a short time to value, for three reasons:

  1. They are less complex than a landing page (to build and to understand)
  2. Most businesses get more traffic to their website than they do to their landing pages, so they’ll see conversions coming in more quickly
  3. After installing a single line of Javascript, you can place them anywhere on your site without technical help.

If you remember back to the chart at the beginning, 4.45% of canceling customers said they had “poor campaign performance”. This is important to note because getting something up and running quickly and easily is one thing, but being successful – especially as a marketer – is another thing altogether.

Which is why our job as product marketers doesn’t stop until the customer is being successful using your software.

The other way to increase product stickiness

I mentioned earlier about needing to provide a superior customer experience, especially in a crowded competitive landscape. You need to have a company people trust more than the competition, and trust comes from transparency, security, reliability, and just giving a human shit about your customers.

I love how Andy Raskin puts it in his recent post about “The greatest sales pitch I’ve seen all year, it’s Drift’s and it’s brilliant”:

Product differentiation, by itself, has become indefensible because today’s competitors can copy your better, faster, cheaper features virtually instantly. Now, the only thing they can’t replicate is the trust that customers feel for you and your team. Ultimately, that’s born not of a self-centered mission statement like “We want to be best-in-class X” or “to disrupt Y,” but of a culture whose beating heart is a strategic story that casts your customer as the world-changing hero.

How are you reducing your time to value (TTV)?

I’d love to know the techniques you’re using to discover your ah-ha moments, and what you’re doing to accelerate your customers’ access to them. Lemme know in the comments.

Cheers,
Oli Gardner

Continued:  

How to Build a Sticky SaaS Product

Thumbnail

Glossary: Value Proposition

glossary value proposition

A value proposition is what you guarantee or promise to deliver to your potential buyers in exchange for their money. It’s also the main reason why people choose one product over other. If it’s done right, it can give you the competitive edge and help you grow your business. The value proposition is vital to conversion optimization as it allows you to build a perception of the value that a user is getting. So, if you test it, these few sentences might have a significant impact on your conversion rate and sales. What the value proposition does when done right:…

The post Glossary: Value Proposition appeared first on The Daily Egg.

Originally posted here: 

Glossary: Value Proposition

Average Order Value, Conversion Rate or Revenue Per Visitor – What Should You Track?

Have you met Richard, the eCommerce entrepreneur? This is the story of how Richard found the perfect eCommerce metric to track and measure his eCommerce performance.

Richard runs an online store selling two kinds of water bottles – a generic item worth $1 and a premium designer edition worth $100. As a data-driven marketer, Richard decided to look towards analytics.

Then it hit him.

The analytics universe is full of curiously named metrics. Which of these metrics should he track over time to measure his eCommerce performance?

That should be easy, Richard figured. He’d reach out to the experts.

Expert 1: Go For Conversion Rate

A conversion is any desirable activity performed by a visitor on your site. From a revenue perspective, conversion is checkout. Conversion rate(CR) is simply

Conversion Rate = Number of Checkouts/Number of Unique Visitors

If you have an average 1000 visitors to your site on any given day, and 50 of them become customers your conversion rate is 5%.

Optimizing for conversion rate will make more visitors into paying customers.

How does it help?

  • Converting more of your current visitors is more cost effective than acquiring new customers
  • It essentially gives more revenue at the same cost

Since you are already paying in some way to acquire traffic to your website — through PPC, SEO, Email — it would be a great idea to convert more of those visitors into customers. It brings you more revenue for each dollar spent on acquiring traffic.

It made sense.

But Richard wasn’t convinced. He had once conducted an A/B test on the product page and this is what resulted.

Conversion Rate Optimization Table

Overall conversions increased by 10% and his website that used to convert 1100 customers started converting 1210 visitors.

It was a moment of triumph.

And it lasted exactly a moment.

Later analysis showed that revenues had actually dropped because the conversions among high paying customers had declined.

Unsatisfied, Richard reached out to Expert #2

Expert 2: Without Doubt, Average Order Value is What You Should Be Tracking

Average Order Value(AOV) is just what it says. Total revenue/Number of Checkouts. It’s a direct indicator of what’s actually happening on the profits front.

Average Order Value (AOV) = Total Revenue/Number of Conversions

In the last A/B test he conducted, optimizing for conversion rate alone had left Richard susceptible to the blind spot — the average order value.

Average Order Value Table

Despite the increase in conversion rate, Average Order Value had dropped by more than a dollar, resulting in an overall decrease in revenue.

How does it help?

  • Comparing AOV against Cost Per Order gives a great idea of the profits you make on each order. Consider your Cost Per Order (shipping costs etc.) is $1 and your AOV is $10, giving you a profit of $9 per order. By increasing AOV by 10% to $11, you stand to gain an additional profit of $1 per order.

Here’s a statistic to remember: AOV in United States during 2014 Q3 was $72

This was great news.

At this point I should tell you that Richard didn’t go alone to Expert 2. Tom, Richard’s best friend since that last A/B test hiccup, was there too.

Doubting Thomas asked,

“What if we successfully increase our AOV by bumping up the minimum order value for free shipping, but less people buy as a result? Our revenue could take a hit, harming Richard and his profits while still showing a higher AOV.”

Tom had a point, Richard thought. It was similar to what happened with his last test. There he had forgotten to take into account AOV and suffered. Tracking for AOV alone could make him blind towards conversion rate resulting in a revenue sheet like this:

Revenue Sheet

There had to be something better. A metric that combined both Conversions and AOV to give the whole picture.

Hoping for better, Richard and Tom reached out to Expert 3.

Expert 3: Track Revenue Per Visitor, Dodge The Rest

Revenue Per Visitor(RPV) is deceptively simple. It tells you how much revenue each unique visitor is driving.

RPV = Total Revenue/Total Unique Visitors

Why is it so potent?

The trick is in understanding RPV from another perspective.

We already know that

Total Revenue = AOV x Number of Conversions (checkouts)

So we can rewrite the RPV equation this way:

RPV = (AOV x Conversions)/Total Unique Visitors

and since (Conversions/Total Unique Visitors) = Conversion Rate

RPV = AOV x Conversion Rate

The great thing about the RPV metric is that it combines both AOV and Conversion Rate.

What’s important for any eCommerce business?

Revenue.

For revenues, first you need traffic. Once you are able to attract traffic, increasing revenue is two dimensional process:

  • Convert more visitors into paying customers (Conversion Rate)
  • Increase customer-spend per conversion (AOV)

RPV involves both these dimensions leaving no blind spots.

Avinash Kaushik recommends using an ‘actionability test’ before choosing any metric to track. The idea is that any metric you track should help you take definitive actions to correct/improve business.

Does RPV pass the actionability test?

With a crisp dollar certificate.

Dollar Certificate

If there’s a drop in RPV, it could be due to

  • A sudden increase in visitors without any buying intent (drop in conversion rate): Check if there has been any recent marketing activity that brought a lot of unqualified visitors with low buying intent. Use segmentation to understand what channels are bringing the right traffic.
  • Customers are buying less of high-value goods and more of low-value goods (drop in AOV): Consider using a recommendation engine. Read the article I’ve linked to under the section above titled ‘AOV’ for 8 quick ways to improve AOV.

Touting RPV as a very useful metric to track does not take anything away from metrics like Conversion Rate or Average Order Value. It’s important to understand that metrics simply show symptoms, and different symptoms become visible through different metrics. RPV is simply one that helps you see the bigger picture.

Although it’s a lot of metric talk to take in, Richard feels he’s found what he was looking for – one metric that he could keep track of to measure his eCommerce success.

He thanked Expert 3 and got ready to leave.

Wait!”, Tom had more doubts.

Why Use Unique Visitors and Not Total Visitors?

Expert 3 cleared his throat and explained.

Of all first time visitors to an eCommerce site, 99% won’t make a purchase. The typical buying cycle involves a visitor first visiting your site to check out the products, leaving to compare prices elsewhere, consulting a few friends, reading reviews and eventually a trip back to your site for the purchase (if at all a purchase decision is made). There could be even more steps involved here.

Using total visitors (unique and returning) bloats up your metric denominator considerably, resulting in small figures and giving you less credit than you otherwise deserve.

This is not to say it’s a bad practice, just sub-optimal. (In fact, if for some reason, you are getting many orders from repeat buyers it might even make sense to use total visitors instead of unique visitors.)

Using ‘unique visitors’, on the other hand, paints a real-world picture of what’s happening with your users, who are, of course, unique.

With this explanation, Doubting Thomas went poof, and Richard went back wiser.

What’s Your Doubting Thomas Wondering?

What metric have you found most useful to track? Share it with our readers and us.

We’ll soon be coming out with a brilliant guide on understanding all the right metrics, including the bad-ass ‘Customer Lifetime Value”.

Stay Tweeted @VWO

The post Average Order Value, Conversion Rate or Revenue Per Visitor – What Should You Track? appeared first on VWO Blog.

Visit site: 

Average Order Value, Conversion Rate or Revenue Per Visitor – What Should You Track?

Pursuing Semantic Value

Disclaimer: This post by Jeremy Keith is one of the many reactions to our recent article on the pursuit of semantic value by Divya Manian. Both articles are published in the Opinion column section in which we provide active members of the community with the opportunity to share their thoughts and ideas publicly.
Divya Manian, one of the super-smart web warriors behind HTML5 Boilerplate, has published an article called Our Pointless Pursuit Of Semantic Value.

View original:

Pursuing Semantic Value

The Semantic Grid System: Page Layout For Tomorrow

CSS grid frameworks can make your life easier, but they’re not without their faults. Fortunately for us, modern techniques offer a new approach to constructing page layouts. But before getting to the solution, we must first understand the three seemingly insurmountable flaws currently affecting CSS grids.
Further Reading on SmashingMag: Grid-Based Web Design, Simplified Designing With Grid-Based Approach Semantic CSS With Intelligent Selectors Problems Problem #1: They’re Not Semantic The biggest complaint I’ve heard from purists since I created The 1KB CSS Grid two years ago is that CSS grid systems don’t allow for a proper separation of mark-up and presentation.

Read article here:

The Semantic Grid System: Page Layout For Tomorrow

Web Design Checkmate: Using Chess For Success in Web Design

The business of building websites is one of constant change, adaptation and strategy. The way designers and developers build websites is often informed by the methods of others and their own trial and error. In light of this, we can draw a number of parallels — some philosophical, to a certain extent — between Web professionals and one of the oldest and most popular board games of all time (counting traditional and digital games).

See original article here:

Web Design Checkmate: Using Chess For Success in Web Design

Color Theory For Designers, Part 2: Understanding Concepts And Color Terminology

If you’re going to use color effectively in your designs, you’ll need to know a few color concepts, as well as color theory terminology. A thorough working knowledge of concepts like chroma, value, and saturation is key to creating your own awesome color palettes (which we’ll get to in Part 3). [Content Update: August 2017]
In Part 1: The Meaning of Color of this color theory series, we covered the meanings of different colors.

See original – 

Color Theory For Designers, Part 2: Understanding Concepts And Color Terminology

Thumbnail

Grid-Based Design: Six Creative Column Techniques

Grid systems bring visual structure and balance to site design. As a tool grids are useful for organizing and presenting information. Used properly, they can enhance the user experience by creating predictable patterns for users to follow. From designer’s point of view they allow for an organized methodology for planning systematic layouts.
After creating a well-structured and usable grid, consider allowing it to breath. A page without a grid is a usability nightmare.

View this article:

Grid-Based Design: Six Creative Column Techniques