Elevating the Mobile Experience (Pt. I): A Blueprint

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're creating a three-part series that will address some of these major aspects. These posts will provide some high-level concepts along with practical 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 post 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.

1. Know your user

The first step to developing a user-centric 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 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 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 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 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 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.

Liferay Homepage Heatmap Improvements

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 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. In the next post, we'll address some common misconceptions associated with the mobile experience. Be on the lookout!

Mobile Strategies: What Every Company Needs to Know

Would you like to learn more? This brief whitepaper gives a basic overview about various mobile strategies, including tips on how to approach native and hybrid apps.

Read the whitepaper

This post is written in collaboration with Paul Hanaoka, Liferay Web Designer. You can reach him at paul.hanaoka@liferay.com for additional questions about mobile web design.

0 Comments

Please sign in to comment.

Menu Display

Blogs

Category Filter

Mobile Strategies: What Every Company Needs to Know

More Blog Entries

The Magic Template Variable Dumper Script for Liferay 7

LRNAS2015 left me cautiously craving a 7.0 upgrade