This website uses cookies to ensure you get the best experience. Learn More.
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.
1. Know your user
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.
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.)
4. Wireframe and 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.
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.
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.
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!
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.