We present to you a deck on how we increased conversions on our SaaS/Cloud application website by making small design changes. We will also share tips on how alter your product website to drive up conversions.
2. Distilling SaaS selling to its basics
• Conversion, conversion, conversion
• Increase time spent on the website
(more time spent = more opportunity for conversion)
• Iterate the website design and content
• Validate your iteration with analytics
3. First some numbers
Avg visit duration
65%
Social customer
acquisition
666%
Referral traffic
503%
Bounce rate
Search Traffic
16% in 1
month
666%
1 signup in March to ≈ 2 signups a
day in September
zero CPC spend
4. And how big is our
website?
5 Pages
Without the Terms of Use, Privacy Policy and Contact us pages
(which don’t matter)
11. I am not making
this up!
The Weibull Hazard Function
“Researchers discovered that 99% of Web pages have a negative aging effect. Users spend their
initial time on a page in ruthless triage to abandon the dross ASAP.
The probability of leaving is very high during these first few seconds because users are extremely
skeptical, having suffered countless poorly designed Web pages in the past” [1]
12. More the number of
clicks to get somewhere,
lesser the number of
people getting there
Reduce clicks
13. - Prototype stage
- We were selling a concept
- Looking for seed funding
- Released in Q2 of 2011
VERSION 1
14. Things to note
• Design was not original
• Built by developers
• Old logo for muHive
I wouldn’t buy me if
I was buying
15. Product features page
• Probably the only thing
that matters to a SaaS
product website.
• Looked like it was built
in the 90s
• Had lengthy paragraphs
of text
Clearly, it sucked!
20. Home page
• Landing page for BETA
customers
• New brand message
focusing on what the
product is all about
Notice the login/sign up link on top? It didn’t exactly do what is says ……
It would take you to a request for account form and then make you wait for
us to create the account on your behalf. (a.k.a. Wizard of Oz prototyping)
21. Products page
• Listed features instead
of showing them
(product was incomplete
at this point)
• Needed 9 clicks
(remember Rule 5?)
Needed to be
redesigned
22. A new iteration of the
Products page
• Inherited the single
biggest problem of its
predecessor: feature list,
no demo/video.
23. Pricing page
• Outlined our pricing
plans in multiple
currencies, with $ as the
default (hold this
thought)
24. The dollar default … good or bad?
Problem: a company registered in India is
required by the law to show pricing in INR
Dilemma: as a SaaS business, we need to appeal
globally.
Solution!
Pricing in INR
Get IP address of
the prospect
Pricing in Pounds
IP to Geo database
Pricing in US Dollars
25. Contact Us page
Was the point of entry to
the application
This was a big mistake
Why?
• Not the way SaaS
applications do sign ups
• People needed to click
on the pricing page to
get here. 3 clicks
minimum
• Account provisioning
would take anywhere
from 6 to 12 hours
26. Retrospective
(good enough for Beta)
1. Most received BETA feedback: I don’t
understand what the product does …
2. Customers were hunting down the about us
page and the company genesis page.
3. Analytics showed that people hovered around
unimportant parts of the pricing page
4. Where do I sign up? (actual question by a prospect)
27. - Focus: Public launch of muHive
- Fixed usability issues from BETA
- Released towards end of Q1 of 2013
VERSION 3
28. What changed
Home page
•
•
A more tangible
value proposition
Added a “Free trial
button”
We used the “5 rules”
approach.
29. Wanted to appeal to multiple audiences
… so we used carousels on the home page
… those turned out to be a big mistake. Why?
• Lost in transition! Too many messages dilute the
product positioning
• Few customers will sit through a slow changing
carousel
• Customers don’t like carousels. Read more at
http://shouldiuseacarousel.com/
30. Pricing page
• A little less colorful
• Sign-up buttons
everywhere!
However, we saw sign-ups
only for the Free Trial plan.
Why? What had we
overlooked?
31. The flaw? Inconsistent language.
• Two words, TRY and Sign up were used for the same behavior: a free
sign up!
• TRY gave customers the impression that Sign up meant pay and use.
• Actual feedback from user: she chose the “Free trial” option because
she didn’t want to give out her credit card details.
32. Retrospective
(still not working as we expected it)
1. Needed sign ups on all plans
2. People are extremely edgy about giving out
their credit card details (especially in India)
3. Needed to reduce bounce rate of the homepage
4. USP of our product wasn’t visible
5. Why can’t I see a video demo? (actual question by a
prospect)
33. - Focus: Delivering the USP
- Value proposition in a one line message
- Released around early Q3 of 2013
VERSION 4
34. What we needed to work on
• Little idea of what a user did within a page (lack
•
•
of in-page analytics)
Videos, videos, videos
Users want to know value. Product page spoke
only features.
Realized our website was screwed when a blogger covered us
(true story)
35. Advanced analytics
Three must use features of Google Analytics: Events, Experiments,
Goals
•
Events: to track how users use website elements. For e.g.: we add
the code
onClick="_gaq.push(['_trackEvent', ‘Scroll Depth', ’100%']);"
tells us, how many people scrolled to the bottom of a page.
36. Advanced analytics
•
•
Experiments: to A/B test different UI elements (alternate homepage
test)
Goals: use then to track navigational flows. We use it to see who
signs up, spends time on the website, jumps to our blog etc.
37. Importance of videos
• Most effective for getting
•
•
•
customer attention
Video <= 3 mins (attention
decreases with length of
video)
Cheerful background music
please!
Narration by a woman holds
attention longer than by a
man
See our videos at http://youtube.com/muhivetechnologies
38. muHive concept video
• Shot in a single day with a
•
Over 20% of New users click on
the video on the home page.
•
•
shoestring budget
Highlight our value
proposition in a simple
manner
Voiceover was done by a
professional from Fiverr.com
Two voiceover versions:
American accent and Indian
accent
39. What changed on the home page?
• No carousels
• Single line product
message
• Concept video
• Large call to action for free
trial
• Complete performance
overhaul
Click here to know more
41. Bounce rate of the
homepage reduced but
people weren’t spending
time on the product page
we needed to explain our product using
videos or screenshots.
42. Version 4.1 – Products page
• No more descriptive text
• Product screenshots for each feature
with one line explaining its use
#WIN: More than 25% of visitors scroll till the
bottom of the products page which is 6300 pixels
long!
43. V4 of the pricing page
•
•
•
•
Single call to action: Start Trial.
Even lesser colors than before
Renamed ‘Free trial’ to ‘Personal’
Emphasized that you don’t need a
credit card for a trial.
#WIN: All plans get sign-ups!
44. Automation series
•
•
•
A series of videos + blogs around the automation
feature
Showcasing different uses right on the home page
#WIN: a customer from Italy independently created
an automation by learning from the videos
46. Showcasing customers
•
•
We added a “Customers” section on the homepage
and also added an arrow to view more.
#WIN: In 4 days since we put the section, 67 people
clicked on the arrow to see more customers.
Our most surprising discovery yet!
So, let’s add another rule ..…
47. Customers like to see
other customers who
have bought/used your
product/service
Showcase people
49. Retrospective
1. Remember the 6 rules for SaaS websites
2. Use images and videos in place of text
3. De-clutter your pages and have a clear call to
action
4. If you are a product company, showcase your
product and your USP on the website.
5. Use analytics to drive your decisions
6. Convert! Convert! Convert!
50. Keep watching this space!
Problem : Customers want to know if the product
caters to his/her industry and job role. How do we
position our product for different audiences?
We solved this problem by using targeted landing
pages for different industry verticals. More on that
in another presentation
51. Share this deck with friends
If you think you learnt something from this deck, Click
on the “Share” icon below to share this with your
friends and colleagues.
www.muhive.com
52. Team
Sagar Vibhute
Ritesh M Nayak
Co-founder at muHive
Co-founder at muHive
Technology interests:
Technology interests:
databases, information architecture
and evolving role of social tech
Twitter: @biggfoot
social software, information retrieval,
distributed systems and ICT4D
Twitter: @itsmeritesh