Elevating the Mobile Experience

By now, we've heard of the necessity of creating a good experience for our mobile viewers. Yet, we're not always quite sure where to start or what factors should be considered in the process.

As a result, we’ve created an in-depth article that will address some of these major aspects. This will provide some high-level concepts along with practical mobile experience strategy tips that will help you discern where to start and how to create an experience that minimizes friction for your mobile users.

Our first foray into helping you elevate your mobile experience is a simple blueprint for a user-centric experience. This blueprint is based on one of our more recent refreshes of the Liferay.com homepage; we hope our case study offers some general procedural guidelines that can be applied to any project.

Find a Blueprint for Your Mobile Experience

1. Know Your User

The first step to developing a user-centric mobile experience is to get to know your user. Who are they? Study their demographic, and if you have data from an existing userbase, study it! What devices are they on, where are they coming from, when are they leaving—these are all very basic mobile user questions to start with that you can answer with existing analytics or more in-depth research.

For us, Google Analytics is our primary tool for learning about our users, but we also deployed some heatmap tests on our desktop site to get more scroll and click data. After doing some in-depth analysis, we discovered that users simply were not engaging with 80% of the content on our homepage. We had great content and solid design, but the problem was that we did not consider if the user simply was not ready for the volume and depth of the content we were giving them right away.

2. Establish Your Goals

This goes hand-in-hand with knowing your user. For your visitors, have you determined what you want them to do or where you want them to go when they arrive at your site? Lay out exactly the type of mobile experience they should have and what actions they need to take.

In terms of metrics, figure out your objective measures of success. What areas do you look to improve? This could involve things like a higher number of demo requests or actual purchases. This could also be page-specific categories like page views, bounce rate, exit rate, engagement rate and so forth. For our site, we use Google Analytics to set clear benchmarks and identify areas of improvement. Regardless of method or tool, be sure to have a system in place to track your success.

3. Write Your Content

After gathering intel about your users, figure out how to write your content. What's the message you want to get across about your brand, product or service? With your desired audience in mind, decide how you can best frame the content. Try to keep industry jargon and unnecessary phrases to a minimum. (If you are working with a team of writers, use tools like Google Docs or Spreadsheets that are ideal for collaboration.)

In our case, we had an abundance of existing content, so our process was more focused on distilling it down to the essentials and combining that with what users were already coming for into a concise, cohesive package for design.

4. Wireframe and Design

Here's the "fun" part—and if you have waited this long, your patience will pay off because you know who you're targeting, what you want them to do, and you've got compelling content to drive your mobile website design.

For our page, the idea of "content before design" was instrumental in helping us achieve our end goal of increased engagement. Instead of twisting and cramming content into designed containers, we were able to refine existing content and use design to elevate that content into an engaging mobile user experience.

Our design process starts with rough wireframes, sketching out a grid and deciding on a page flow. Once that is established, we go into Photoshop (not cool enough for Sketch yet) and create the final mockups. Be sure to always ask yourself, "Is this [element] necessary?" If you struggle to answer that question, then it's probably not.

5. Test and Iterate

Finally, you can sit back and enjoy the fruits of your labor, take some time to write a memoir ... </bad-joke>

No, now is not the time to rest on your laurels. It is time to gather more data and give yourself a performance review.

• Did you meet or exceed your goals?
• Was everything implemented correctly?

Now is the time to go back and tweak the design and/or run some A/B tests to see if there is anything that could drive the performance up even further.

To wrap up our case study, we ran another heatmap test and looked at before/after analytics data. Even though we had a fairly significant (21.5%) decrease in mobile (and overall) traffic to our homepage, we also experienced immediate increases in mobile user engagement as measured by bounce-rate, click-through rate, form conversions, time on page, etc.

The most visually compelling evidence was the heatmap comparison, which proved our success wasn't only due to the fact that we had shortened the page. In fact, when you compare them side-by-side, users scrolled significantly further on the new page.

We hope these tips will provide a basic framework to help you design the best mobile experience for your viewers. Next, we'll address some common misconceptions associated with the mobile experience.

Don’t Believe These Common Misconceptions about Mobile Experience

Here we would like to address some basic misconceptions that we've had to confront in our own mobile development journey. These are typically tips or "best practices" we've always assumed to be true, though in our experience and research we've come to discover the opposite.

Without further ado, here are four common mobile experience creation misconceptions we've uncovered:

1. Write Less Content

This is a common adage thrown around to copywriters. We tend to think that people wouldn't care to engage with content that is long, since we're working with smaller screen sizes and people who tend to be "on-the-go."

But this is wrong on two fronts. First, a Google stat shows that 90% of people are using multiple screens sequentially. This means they might be experiencing your pages on desktop, then picking up where they left off on smartphone or tablet. If you remove certain content on the mobile version while leaving it on desktop viewing, then people will receive an inconsistent user experience that will frustrate them.

Second, the average content length of posts that perform well in search ranking position tends to be higher. In fact, according to the graph below, it appears to be a positive correlation between the two variables.

So, what's the lesson here? Write as much or as little as the subject or layout calls for. The main idea here is to simply write better. Learn how to structure sentences and paragraphs, and make sure your content is leading to the desired call-to-action(s) for your viewers to perform.

2. Design Comes First

It has been said that every time a designer is asked for a mockup first, an angel loses its wings. (Maybe that is a bit dramatic, but the reality is much worse.)

Anyone with the ability to use a search engine can find numerous templates and examples for a branded mockup that a copywriter or stakeholder can fill with content. If they have new ideas or changes they want to implement, it would get sent back to design where a designer will try his or herbest to accommodate the request. Because the whole process starts with design, then the content will be subject to design.

While to some this might sound good and at face value seems to elevate design, it actually does the opposite to your final product. Instead, if you find it hard to get the content creation going, start with a rough outline of your content and work with the design team to create a wireframe around that content. Even better would be to have a messaging strategy in place that is focused on the end goals you want the user to achieve, and then create your content around that. Only when that is complete should you then start working on generating mockups.

3. Put It Above the Fold

This mobile experience misconception has been floated around the design community for some time now. It's the idea of putting your best content (or as much content as possible) at the top of your page before people would have to start scrolling down. Then, once people started scrolling, they would receive less pertinent or important content.

The idea came from the newspaper days, when editors would look for the most attention-grabbing headlines and stories to "put above the fold" of the paper so that strollers-by would see it, read it, and pay the 25 cents or whatever it was to take it off their stand. Eventually, this concept would be adopted by developers when designing for the browser experience.

It's not a terrible idea, but it's based on wrong assumptions. Because mobile users tend to scroll throughout the page, and if the content below the "fold" is bad, what would compel them to continue engaging further?

Instead of trying to stuff everything above a certain number of pixels, and then filling out the rest of your page with sub-stellar content, try to spread your content and build up to your most important elements (or action) at the bottom. Trim the unnecessary fat. Your viewers will reward you for it.

4. Devices as Breakpoints

With the plethora of screen sizes in the world, it is no longer practical or even advised to use specific pixel sizes for all your breakpoints. This was the norm in the early days of mobile design, when people would choose breaks at 320px (iPhone) and 768px (iPad) and on from then. Nowadays it isn’t as device-specific, but there are approximate dimensions thrown out there from time to time—400px for mobile, 800px for a tablet—when in reality some design elements are flexible enough to work from 300-900px or 600-1800px without any heavy lifting required.

The best way for designers and developers to start a mobile design is to create rules within a grid system, using min and max properties to make adjustments when a particular element starts to break apart or become too compact.

We hope to have dispelled some of the commonly held but incorrect mobile experience beliefs in this post so you can design more freely and effectively. Next, we'll address the four best practice tips to help you deliver a solid mobile experience for your customers.

What are the Best Practices for Mobile Experience Creation?

This final section should leave you with a few helpful tips on where to get started in taking your mobile experience to the next level. As we've said before, we're trying to provide a brief overview rather than a detailed log of the most important things to get you started on the right track.

1. Make It Easy to Scan

This idea comes down to how people tend to interact with mobile devices. How do most mobile visitors like to read web content and blog articles? First, they look for major headlines or headers. Then they scan the page for phrases or paragraphs that jump out, before scrolling all the way to the bottom to see how much time or effort they need to commit.

If that's the case, then you should make your content more accessible for scanning. Emphasize the points your readers should focus on with visual cues such as underlines, bullet points, bold fonts and strong sub-headers. They will get the gist of your page or post immediately and will be more inclined to commit to the entirety of your mobile content.

2. Optimize Mobile Performance

No matter how useful your content or amazing your design, neither will matter if your site takes too long to load. The user will get tired of waiting and leave. Studies have shown that even a 1-second delay can reduce conversions by 7%—a simple Google search will reveal numerous others—but the bottom line is to make your site as fast as possible.

In her book Designing for Performance, Lara Hogan does an excellent job of providing a comprehensive manual on practically everything you can do to make sure your site is as efficient as possible. It's a great read for technical and non-technical people alike, covering everything from the most basic things like image optimization to more complex things like device-specific content and the changing organizational culture.

3. Create Clear Calls-to-Action

A presenter once said any communication that matters is about one thing: action. It's about making sure your viewers know exactly what they should do next at the end of your content or post. If your content is compelling, it should lead your reader to learn more about your company or product, or perhaps even make a purchase.

So, make it easy for them—provide proper calls-to-action (CTAs) that lead them to the next natural step on the customer journey. This could be simple "Learn more" buttons or sub-sections with more descriptive offerings. Keep in mind, the more you can tailor or personalize your CTA according to your visitor (i.e., through info gathered about their demographics), the better.

4. Offer Smooth Conversions

After the user has consumed your mobile content and is ready to take the next step in the relationship, you'll probably ask him or her to fill out some sort of form. Whether it's a simple name/email or a more complex eCommerce checkout process, try to make this experience as smooth as possible so that you avoid any drop-off or abandonment during this crucial stage.

There are many simple things you can do, but perhaps the most pleasant for mobile users is field specific input. For example, when asking for a number, give the number pad instead of the whole keyboard. Also, take advantage of both old and new technology. Things like autofill and inline field validation help to make your form experience as fast and efficient as possible.

That concludes our insights into elevating the mobile experience. As we've mentioned in the other posts, please feel free to leave a comment or get more information. At the very least, we would like to point you in the right direction.