Website optimization for SaaS conversions - muHive

3,684 views

Published on

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.

Published in: Design, Technology, Business

Website optimization for SaaS conversions - muHive

  1. 1. Streamline your SAAS website for conversions How small design changes helped us Improve conversions
  2. 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. 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. 4. And how big is our website? 5 Pages Without the Terms of Use, Privacy Policy and Contact us pages (which don’t matter)
  5. 5. Let’s see what we did to get here
  6. 6. Our 5 rules for SAAS websites optimization
  7. 7. If you are not converting visitors to customers, then your website isn’t working Conversion
  8. 8. On an average a customer spends 15 seconds on your website 15 seconds
  9. 9. Aim to communicate your value proposition in 10 seconds Value proposition
  10. 10. Longer your customer stays greater the probability of conversion > visit duration
  11. 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. 12. More the number of clicks to get somewhere, lesser the number of people getting there Reduce clicks
  13. 13. - Prototype stage - We were selling a concept - Looking for seed funding - Released in Q2 of 2011 VERSION 1
  14. 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. 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!
  16. 16. Retrospective (beginners mistake) 1. Developers shouldn’t pretend to be designers 2. Positioning was weak Basically, we didn’t follow the 5 rules
  17. 17. BUT, our prototype could talk the talk … Result: We got our seed funding!
  18. 18. - Immediate focus: create a brand identity - Seed investor brought design skills - Released towards end of Q3 of 2012 VERSION 2
  19. 19. New brand identity
  20. 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. 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. 22. A new iteration of the Products page • Inherited the single biggest problem of its predecessor: feature list, no demo/video.
  23. 23. Pricing page • Outlined our pricing plans in multiple currencies, with $ as the default (hold this thought)
  24. 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. 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. 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. 27. - Focus: Public launch of muHive - Fixed usability issues from BETA - Released towards end of Q1 of 2013 VERSION 3
  28. 28. What changed Home page • • A more tangible value proposition Added a “Free trial button” We used the “5 rules” approach.
  29. 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. 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. 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. 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. 33. - Focus: Delivering the USP - Value proposition in a one line message - Released around early Q3 of 2013 VERSION 4
  34. 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. 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. 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. 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. 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. 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
  40. 40. Showcasing muHive automation A sample automation designer sits on top of the product page!
  41. 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. 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. 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. 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
  45. 45. The same question again Who are your customers?
  46. 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. 47. Customers like to see other customers who have bought/used your product/service Showcase people
  48. 48. This is our homepage now!
  49. 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. 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. 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. 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
  53. 53. www.muhive.com @muHive /muHive thank you
  54. 54. References 1. http://www.nngroup.com/articles/how-long-do-users-stay-on-web-pages/ 2. http://www.maxmind.com/en/home 3. Screenshots from muHive.com website: http://muhive.com 4. Wayback archive images 5. Google Analytics image: http://google.com/analytics 6. Events API: https://developers.google.com/analytics/devguides/collection/gajs/eventTrackerG uide

×