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:
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.