It’s a mobile-first world we’re in now, and like many brands, you’re probably considering how to make your user experience (UX) even more friendly on mobile devices like smartphones and tablets.
In March 2018, Google announced that their long-awaited mobile-first indexing was beginning to roll into their core algorithm, awarding sites with a better mobile experience with better ranking results on the search engine results page (SERP). But exactly what makes a better mobile experience, according to Google and other search engines?
- A quick-loading design experience that fits on screens of all sizes, from tablets to smartwatches.
- Relying on viewport metadata to ensure your website or app doesn’t require the user to scroll to enjoy the whole experience.
- Content that wraps correctly on devices of all sizes, and makes it easy for users to read.
- Optimized images that keep page loading speedy and don’t delay the online scrolling experience.
- Easy-to-access and understand navigation to conveniently travel the website.
- Employ thorough, but lightweight code to avoid extended page loading, which can cripple site indexing.
For more information on mobile-friendly tweaks to your website, check out these design tips and recommendations.
If you’ve decided it’s time to take a leap into the future and put your efforts into a mobile-first experience, Slickplan can help. Check out these five tips to use our suite of digital and developer-friendly tools to take your UX to the next level.
1. Understand Your Audience and Competitors
Before you ever set out to deliver a better mobile experience to your consumers and site visitors, you have to know who you’re trying to attract in the first place, and who you’re up against. Doing your due diligence in understanding your users — their pains and gains, and their goals — as well as your competitors and what they’re doing well or not-so-well, will ensure you’re working toward the right solution.
Get to know your audience.
There are multiple ways you can get to know your audience and users, and some may require more footwork than others. However, the end result gives you limitless agility to find the right solutions for their needs:
- Focus groups. Focus groups are a great way to give your team the chance to ask for in-depth information, from online habits to what drives them to products or services like yours.
- Online surveys. If you already have an app or website that you’re trying to improve, consider implementing an online survey to get real feedback from current visitors to identify pros and cons of what you’re offering today.
- Google Analytics. Google continues to evolve its solid analytics platform and with keyword research, user demographics, mobile use, and behavior paths, you can get a pretty good idea of what your users are doing on your current website or app.
- User testing. Whether onsite or through remote user testing programs, you can get a glimpse at how users access your website, or your competitors.
Once you’ve got a good idea of the various people using your site or searching for your products or services, you can build user personas to incorporate in the rest of your app planning strategy.
Get to know your competitors.
Competitive analysis is an important step for any marketing plan, but it’s especially important in the short-term attention of mobile-first UX. By browsing your competitor’s delivery of content, design, functionality, and more, you can understand where they’re achieving, and where you may have a chance to edge ahead.
When starting a competitive analysis, consider the following and record your findings to share with your team or fellow developers:
- Website app or page load speed, especially if certain elements are particularly sluggish.
- Functionality experiences, and any places that feel awkward or difficult to access.
- Navigation and content, including the ease of traveling the site’s navigation and understanding the content on the page.
- Visual engagement, and whether the design is easy to browse and meets accessibility standards.
- Gaps in price, products, and services to provide a more business goal approach to how you and your competitors differ (and where you may have chances to improve).
Once you have your competitors rounded up, consider the top two or three as the basis for your decisions going forward, and keep them top of mind.
Need more help? Check out Toptal’s tips for completing a thorough competitive analysis.
🎬 Learn what Slickplan can do!
We filmed a short video to show you exactly how to use Slickplan
2. Record Your User Journey
User journeys or paths let you consider what you know you about your audience in relation to the expected outcome of their visit. For example, if a user enters your site through a landing page rather than the homepage, is there a clear path of content to lead he or she to the desired conversion?
User journeys should also play devil’s advocate. Consider all the roadblocks or obstacles that could arise for various users based on how they find your app, where they spend the most time, and how they travel the navigation. Chatbots, for example, may be helpful to trigger when a user’s on your app for a certain amount of time without making action. Modals may help give users an option for a secondary action, like signing up for an e-newsletter.
Slickplan’s Diagram Maker is a perfect place to start building your user journey. Use different colors and shapes to indicate different results and paths. And like the Slickplan Sitemap Builder, you can collaborate across teams and attach your diagrams to your IA in the sitemap.
3. Plan Your Navigation and Menu Layout
You’ve gotten friendly with your audience (and your competitors), so now it’s time to think about the architecture of the site. In this case, the information architecture (IA) — how users will navigate and explore what your app has to offer.
Slickplan’s Sitemap Builder tool is the perfect solution to put your navigation and menu ideas in one place.
IA is the science of knowing what information you have and where it belongs. And many times, IA proceeds the design since it’s the foundation of what will live on the site or app itself. Your IA should include:
- Top-level navigation. Also known as main navigation. These should be the core elements of how users travel the app or website.
- Tertiary and footer navigation. Secondary audiences or conversion points may need visibility, but less prominence than main navigation.
- App pages or landing pages. If you have specific experiences you’re trying to deliver, you should plan these into your IA accordingly and make them part of your user journey (previous step).
Finding your IA can be done a number of ways. Often, a content strategist will be employed with the task to consider the most important elements of the brand goals and user goals, using the right verbiage to fill a navigation experience the meets both needs. They’ll also be the ones considering the UX as it relates to design, whether it be conversion buttons or microcopy.
Card sorting is another effective way for content strategists to work with stakeholders – internal and external – to group content together and provide the best UX possible.
With the Sitemap Builder, you’ll be able to visually see the cascading list of pages — from parent top pages to child subpages. The builder also gives you the opportunity to collaborate across teams, make notes, attach design mock-ups, and add diagrams, which can be useful with your established user journeys.
4. Mockup Your Design and Content Plan
Slickplan’s Design Mockup and Content Planner tools are just what you need to start making your mobile-first website or app a reality. And, like all of Slickplan’s solutions, you can reference and attach design mockups and content planning notes to your sitemap and diagram builder.
When it’s time to reveal your design, make sure you have the right people in the room. Stakeholders with a vested interest in the success of the app or website will be integral for buy-in at the design stage. It’s also important that you’ve involved stakeholders throughout the process, ensuring you’re meeting functionality, organizational goals, and user needs throughout your app strategy.
These stakeholders will have easy access, if given permission, to your mockups in Slickplan, where they can leave notes and comments for collaboration.
While your design mockup and content likely will live on outside design suites and word processors, the team collaboration and governance features in Slickplan keep everyone on the same page.
Design mockup and reveal tips.
As you prepare to share your mockup and reveal your design concept to your team or external stakeholders, such as focus groups or test consumers, consider what you want them to know first:
- How does the design function on desktop? What do you envision as the functional elements of the homepage and interior pages?
- Where are the most important conversion points?
- How does this design work with accessibility guidelines, such as WCAG?
- How does this design function on smartphone and tablets, or other mobile-friendly responsive devices?
Be prepared to answer questions, or have solutions in mind — even at a base level — if stakeholders or focus group participants point out gaps in their experience. This is important to consider and address in future mockups.
Planning for your content.
As you plan your design, you should also plan your content. From your IA, make sure you’re accounting for all the content types and pages you’ll need for launch, and make homes and recommendations for them in the Content Planner.
The Content Planner from Slickplan is a great way to coordinate with others and covers everything from words on the page (copy) to SEO elements like metadata and keywords. You can also provide references to images or link to images you intend to use in the content of the page.
A governance plan, post-launch, is integral to your app’s success, too. Try to put your arms around who will be responsible for certain pages of content — their upkeep, refreshing, or archiving, if need be — and keep a close eye on the age and value of content as your users come and go.
Visualize ideas with diagrams
Build intuitive user flows, stronger customer journeys and improve information architecture.
5. Test, Measure, Test
Once you’re ready to launch your app – whether a hard launch or soft, limited launch – have some benchmark data in place. Where were you, and where do you want to go? What do you hope will be your average page duration, or session visit? Who are you hoping to attract?
By establishing benchmarks, you can give your product something to aim for and adjust to, if necessary. Measuring through Google Analytics, frequent touchpoints with core consumer groups, online surveys, or other remote testing tools, gives you a way to keep a finger on the pulse of what’s working and what’s not.
As you make needed changes and do future testing, keep the Slickplan suite in your back pocket to make adjustments. These tools allow for version control and easy sharing, so you can keep making your app and mobile experience better and better.
Facebook
Youtube
Twitter
LinkedIn
Vimeo
Codepen
Dribbble
Pinterest
