Designing for the small screen: A nonprofit’s guide to mobile UX
Picture your target audience. You might imagine them sitting at a desk with a laptop, sipping coffee, and carefully reading your website. But in reality, they’re probably scrolling on a smartphone while riding the bus, holding a baby, or waiting in line at a community centre. For this reason, empathetic and effective mobile UX is crucial.
What is mobile user experience?
So, what is mobile user experience (UX)? Simply put, it is the overall experience a person has when they interact with your website using a smartphone or tablet. It includes everything from how fast a page loads to how easy it is to tap a button.
How does it impact your mission? Mobile UX is the foundation of digital equity. For many folks in underserved communities, a smartphone is their only connection to the internet. If your website is hard to use on a phone, you are unintentionally shutting the door on your most vulnerable users. By taking a mobile-first approach, you make sure your services actually reach the people who need them most.
The hidden barrier of data limits and slow connections
Beautiful, high-resolution background videos and massive document downloads look great in a boardroom presentation, but they are a nightmare for a mobile user on a limited data plan or a slow internet connection. What’s more, these kinds of products are energy hogs.
Like so many of our clients, at Beacon we care about the environment and waste reduction. Lightweight mobile websites use less energy, which ties directly into our values as a carbon-negative company. To make things easier for your users (and the planet), you can compress your images, avoid auto-playing videos, and turn heavy PDFs into simple web pages.
Designing for real life (and real fingers)
Have you ever tried to tap a tiny “X” button on a phone, only to accidentally hit the pop-up ad? It’s really frustrating and annoying.
It’s the same feeling for your audience if your buttons are too small. If they’re trying to tap “Submit” but end up tapping “Cancel” because those buttons are tiny and placed right next to each other, they’ll be upset and may give up on engaging with you.
Proper sizing ensures that anyone can easily tap a button, reducing user errors. The standard rule is that buttons need to be at least 44×44 pixels. You also need to make sure the contrast ratio between your text and background is at least 4.5:1 so it’s easy to read when bright light is glaring on the screen.
For more tips, check out our Beacon Accessibility Standards Overview, in which we outline exactly how these small design choices remove barriers and make the web a more welcoming place for everyone.
Getting straight to the point
Desktop screens have room for sidebars, multiple columns, and long paragraphs. On a mobile screen, everything stacks into a single, narrow column. If your most important information is at the bottom, your user will never scroll far enough to see it.
To ensure that you and your audiences are best served, put the most important information first. Further, to ensure clarity of information, when drafting your copy write the way you normally communicate with people around you. Aim for a grade 8 to 11 reading level. Shorten your sentences, use active voice, and cut out the fluff so your target community can quickly understand your message.
In our article on Empathy Stimulation and the Donor Experience, we note that donors need to feel a profound emotional connection before they take action. But if they have to pinch and zoom to read your story, dig through clunky menus or scroll endlessly, or parse out complex sentences, that emotional connection breaks before it even begins.
Fixing the contact maze
Imagine a government agency providing emergency housing. If a person in need can’t find a phone number in less than 10 seconds because they have to tap through different menus and scroll all the way down, the UX has failed them.
By bringing contact information and primary services to the very top of your mobile layout, you remove that digital friction. This helps communities access critical services faster and builds public trust.
How organizations can apply a mobile-friendly approach
If you want to improve your digital presence, you can begin by auditing your organization’s website on your phone. Take five minutes today to apply these steps:
- Try to find your main service application, contact number, or donation form within 10 seconds.
- Check if your text colours are dark enough to read easily, even if you turn your screen brightness down.
- Make sure your buttons are large enough to tap easily with your thumb.
Using Empathy Stimulation, Beacon creates a profound emotional connection with every potential donor. By using the techniques we’ve outlined and more, you’ll make your mobile site accessible and user-friendly, and turn passive visitors into passionate supporters. And remember: good UX isn’t just about making things look modern, it’s about respecting your users’ time and resources. Let’s make sure your digital front door is open to everyone. To learn more, feel free to contact us.
