eHarmony is “Killin’ It” With Mobile – and How You Can Do The Same

By on February 8, 2013
eharmonyKillinIt

Listen to this statistic, “eHarmony’s mobile conversions are up 40% year-over-year.” They are doing something right. With over 1 billion smartphones on the planet, 1 in 7 searches done via phone, and up to half of all email being checked on a phone, eHarmony is on the ball.

I won’t spend too much time on why mobile optimization is so important. It seems that every month we are reminded with these ever-growing stats, though few of us make actionable decisions based on them. One of the big challenges when working with mobile is the extreme lack of patience of the visitor. You only have a few seconds to grab and keep a visitor’s attention.

Mobile design and user interface design are still maturing art forms. There is quite a bit of noise out there on what is right way and what is wrong. There are countless options for development including different languages, libraries, and aesthetics. There are many schools of thought on design, and the marketing mechanisms are young, misused, and often misunderstood.

Instead of the typical theory and hot air, let’s take a look at what eHarmony did to achieve this success. And what you can do to improve your mobile pages.

eHarmony’s objective on their landing page is to capture a new lead, with the ultimate goal of the visitor completing a profile, and purchasing service. Let’s start by taking a look at their mobile enrollment process:

Mobile Experience
Once you land on the page, you are greeted with an “opt-in” form that clearly illustrates what you are supposed to do, and the purpose of you doing it.

The form has 3 fields: Name, country (pre selected), zip, there is also a slick little button to specify if you are a man seeking a women or vise versa. A nice touch here was that it was not required to select your gender or what you were seeking, the reason this was a good choice on their part is that the buttons do not look like traditional (or native) buttons. If it was required you run the risk of confusing the visitor and they might leave. They will also make their preference later in the process.

My one critique would be that, on step two, you are forced to specify where you heard of the site. While I understand the importance of tracking your marketing efforts, eHarmony has been around for a considerable amount of time, and making it a required field that early in the process was a little much.

They do a great job of taking what would be considered a very lengthy profile quiz, and breaking it down to many smaller steps. This is for two reasons; if a mobile user hit a form with 50 questions on it, the conversion rate would be abysmal and 2, each time the visitor answers another question they are making a small incremental commitment.

The visitor becomes vested in the time and effort they have put into to this process which can act as motivation to complete the process (and even purchase in some cases). This also ups the engagement of the mobile visitor. This is possibly the most notable difference between the desktop version of the site and the mobile site is that they broke up the [opt-in] signup form into 2 steps for mobile, instead of the one larger form.

This process of acquiring information about your leads in an incremental fashion, as you need it, is sometimes called progressive profiling. This concept can be very powerful in building a profile of your customers without annoying them with disturbingly long quizzes and forms.

Another important distinction is the app download call to action. Obviously this wouldn’t be on the full site, but an important thing to point out is that they didn’t use a full-page splash screen to advertise their app (which I can’t stand). Instead they chose a bright yellow thin bar across the top of the screen, that was short and too the point. I would imagine that they do this, because their page is performing so well (and if it ain’t broke, don’t fix it).

Also, notice how the address bar is gone; this can be done with javscript or mobile jquery. It offers more screen real estate, and gives the pages more of an “app feel”. When you are dealing with such a small screen, every inch matters.

The design is clean, and has the typical oversized form fields and buttons. If you have to have a form on your mobile site, this is essential. Just as we know that normal visitors typically don’t scroll on a page, we can also assume that mobile traffic doesn’t “pinch” or zoom. If you can’t easily select a form field your conversion rate will suffer.

Other mobile essentials
The mobile pages are “light-weight” with a small amount of graphics or elements that could potentially slow down load time. Not everybody has 4G LTE, and download speeds will continue to be a major issue for mobile web design for the foreseeable future. It is important you take this into account when designing your mobile pages.

You can attribute a lot of eHarmony’s success with mobile, to their beautifully constructed signup and profiling process. In the process of designing a mobile site, they were able to keep the design congruent with their full site. They broke down their process almost hiding the amount of profile question while simultaneously giving the visitors a progress indicator at the bottom of each page. Their mobile funnel feels clean and polished and instills a level of confidence in the visitor throughout the lengthy intake process. We have seen a multitude of dating sites come and go. Yet, eHarmony continues to grow and stay ahead of the curve with their mobile lead-capturing funnel.

About Kevin Clanton

Kevin Clanton is part of the new generation of Internet marketers, originally starting his career as a programmer obsessed with all things information / technology. Online Marketing has quickly become his primary focus; where he is able to leverage his background in development to implement his dreams & ideas in order to quickly produce data on their effectiveness. Google Kevin has an intense drive to be as well rounded as possible in his business pursuits. He isn’t satisfied until he has a firm understanding of all aspects of a given business strategy.

17 Comments

  1. Justin Gilchrist

    February 13, 2013 at 2:58 am

    Good analysis Kevin and one I’ll be sharing.

    I wonder what the logic behind sending users to a mobile specific site as opposed to a responsive version of their existing one was.

    We’re in the middle of a redesign and have chosen the responsive route with a mock redirect (it looks like an m sub domain to please (fool?) Google but it’s actually just the existing site made responsive).

    • Kevin Clanton

      February 13, 2013 at 11:24 am

      I think it really comes down to the content you want to display to the mobile visitor.
      Most sites have additional elements that don’t provide additional benefit to show the mobile user.
      If your site is informational, and you want the visitor to browse around and consume content, i think using a responsive site is the best route (and also shows that your company knows how to code well).

      If your site has a clear call to action / is for lead acquisition / or is selling something, it might be advisable to make a mobile specific site, where you can strip out any elements that might cause a distraction.

      So it really depends on the content & purpose of the site.
      Thanks

    • Dan Ramthun

      February 22, 2013 at 4:46 pm

      The answer is pretty simple, they wanted to provide a mobile friendly experience with mobile friendly content which complies with the habits of a mobile user and function rather then simply changing the size of their website’s content to fit on a mobile device’s screen.

  2. Ian McConnell

    February 11, 2013 at 2:02 am

    Thanks for bringing this to my attention… It is certainly worth thinking about optimizing for mobile.

    I’ve noticed a significant increase in people using mobile devices to browse my site, according to Google Analytics.

    Cheers
    Ian McConnell
    Western Australia

  3. bellasys

    February 10, 2013 at 8:23 pm

    Heck, I’m a developer and I understand this article… (Great Article, informative and style well written)

    • Kevin Clanton

      February 11, 2013 at 11:37 pm

      BellaSys,
      Thanks for the kind words my friend. Come back and comment.
      What kind of development do you do?

  4. Ricardo

    February 10, 2013 at 3:02 pm

    Thank Kevin,
    I just called up the eharmony site on my Android, it really looks cool!
    What I also observed the front page form there are 4 fields:
    1)First name
    2)Gender (by clicking on the image, Male(blue) or female(pink)
    3)Contry
    4)zip code
    Tha gender when clicking on one image:
    a)first, I am: choose your image, male or female
    b)auto-switch, seeking: after you (a)choice it switchs to the opposite sex.
    I think by default, i am is set to female.
    Not many users have noteced that images are clickable choices.
    the whole page is well planned, not doubts.
    Thank for all the good work for us!
    Ricardo

  5. Mindy Meisel

    February 10, 2013 at 2:42 pm

    I totally agree with Mobil is THE ONLY WAY. If the big, old fashioned, conservative Fortune 500 hundred don’t go this way ~ they will be left in the dust!!!

    http://mindymeisels.blogspot.com

  6. Paul

    February 10, 2013 at 10:12 am

    What is the best mobile plugin for WordPress sites?

  7. Phill Turner

    February 10, 2013 at 9:18 am

    Great insight Kevin!

    Amazing numbers and really makes you think about mobile.

    I am seeing my thoughts change on the subject.

    Great stuff

    Phill

    • Kevin Clanton

      February 11, 2013 at 11:42 pm

      Thanks phil, Every time i see those stats, it is startling.
      Things will be very different in the next few years, and it’s time to get ahead of the curve.

  8. Gino

    February 9, 2013 at 1:33 pm

    Ryan and Kevin your program you described above sounds great. Would like to know how I could give it a try with my website. Thanks!

  9. Greg Chambers

    February 9, 2013 at 9:51 am

    It would be very helpful if your article linked to the mobile otp-in landing page and mobile funnel that you were discussing. It’s one thing to discuss clean design and another thing altogether to witness it first hand.

    • Kevin Clanton

      February 9, 2013 at 2:44 pm

      Greg,
      It is eharmony.com but in order to view the mobile website, you will need to be on a phone.

      • Carol

        February 9, 2013 at 3:44 pm

        I agree with Greg. I couldn’t really see your screenshot of eharmony’s webpage, so using my Blackberry smartphone, I entered their URL and their “traditional” (as in not mobile) landing page displayed. It doesn’t look anything like your screen shot and it has at least 5 or 6 opt in lines to fill out and an image of a couple holding hands that took many seconds to load. Not sure why I received different results!

      • Cliff Fontenot

        February 9, 2013 at 5:30 pm

        Hey Kevin,

        I beg to differ a bit there… Anyone can view it just go to http://m.eharmony.com, just did it on my trusty mozilla firefox. Great post by the way! Love good case studies… :-)

        • Kevin Clanton

          February 11, 2013 at 11:42 pm

          Cliff,
          Thank fr correcting me, I was in a hurry and didn’t try that.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>