Designing digitally, better.

So, you’re creating a website, app, or other digital product. How do you make sure it works for users and keeps them coming back? There are some key things to think about.

Matt Hirst
Digital Suffolk
5 min readDec 12, 2023

--

First up is putting users at the forefront of what you do through user-centred design. Take the time to understand what they need, want and care about. Get inside their heads. Start by creating fictional personas that capture your target audiences. Give them names, backgrounds, goals and values. Get descriptive! Tom is a 40-year-old with 2 kids who values convenience and simple interfaces because he’s always distracted. Sarah is a nurse, who likes learning new things but gets frustrated with complicated sites and seeks a better work-life balance.

User persona with writing and image of Sarah, a fictional person who works as a nurse. It shows the background, needs, skills, goals and personality. Maroon and white in colour.
Fictional user persona I created for a recruitment product.

With your users in mind, dig into their goals, motivations and frustrations. Use surveys, interviews and observational studies. Watch how they interact with competitors. Identify pain points in the sign-up process. See where they struggle to complete transactions. If your product is for older people, test out your site with them. Discover micro-barriers that drive them crazy!

Then test draft concepts and prototypes with real users early and often through usability studies. Watch them use mock-ups and share feedback. Iteratively refine based on what you discover. See if they find the interface intuitive even if it’s not fully functioning behind the scenes. Focus groups can help too. It’s all about empathy and a human-first mindset.

Don’t forget the emotional impact of design too. Make it satisfy your users. Make it fun! Entice users with images that speak to them, while also clearly highlighting functional elements. Test reactions to flows, colours, interactions and content.

Understanding user needs

Beyond understanding user needs, simplify! Keep interfaces clean to allow better focus through minimalist principles. Cut the clutter of unnecessary visual elements. Use white space and crisp navigation focused on primary tasks. Hicks Law shows that more stuff on a page slows people down. If you want users to do things faster, streamline pathways and remove obstacles.

Organise every element logically based on how people expect systems to operate and the tasks they need to achieve. Group related items under clear headings marked with clear, easy-to-understand titles. Design conceptual models that match real mental models in your audience. If you’re creating a travel app or site, and people expect accommodation choices on the front page, deliver just that! Leverage constraints to gently guide users while limiting options that may distract or overwhelm them. If booking requires 12 steps don’t confront them with 50 fields at once. Break it into digestible chunks with ‘Next’ buttons leading through each phase. Highlight calls to action clearly while removing peripheral links during critical processes.

iPad with an example of a minimalist wireframe design with an Apple Pencil in the foreground. An air plant is on the left and a cup of coffee is on the right. The cup says “Caffine”.
Example of minimalist wireframe — image from unsplash.com

Despite its visual simplicity and sparseness, minimalism remains highly usable. Critical utility around buttons and calls to action are still vivid and prominent enough to entice action while clutter is suppressed. Well-executed minimalism projects sophistication aligned with your brand identity. Achieve more through better experiences.

With over half of all website traffic conducted via mobile devices, a responsive website adapts layouts and functionality to optimise products across desktops, tablets and smartphones. Tablets allow more visual richness than phones for example. Lean into engaging graphics while retaining focus on conversion paths. Phones may require bigger buttons, eliminating peripheral content. Adapt navigation menus, image sizes, and text density accordingly.

Creating positive, frictionless user experiences across content requires understanding and using environments and pain points. Map flows between platforms to maintain coherence despite layout variations. Vital pages such as a confirmation page should feel familiar on a monitor or a phone. Apply core UX principles like visibility, consistent controls tied to clear actions and contextual feedback. Communicate the stages of the page visually through indicators like a progress bar versus completed checkmarks on each step.

Mapping enables logical ties between user goals and interactive pathways to achieve them across contexts. The path to finalising a product selection or booking confirmation should follow an obvious trajectory across devices. Use layout, visual salience and interaction design patterns consistently to drive intuitive relationships. Constraints guide tasks on both desktop and mobile while limiting tangents.

Strong conceptual models representing the products should be coherent across environments. For example, on your travel site, a user’s mental model of booking travel necessitates confirming details, arranging payment, and managing their account. Maintain these components across platforms through responsive design and architecture. Ongoing testing will refine adaptations to satisfy user needs on all devices.

Accessibility

Beyond responsive design, ensure accessibility practices promote inclusivity by accommodating users with diverse physical, sensory and cognitive disabilities. Employ techniques like strong visual contrast ratios to help visually impaired users distinguish text from backgrounds. I use Siege Media but there are other good tools such as WebAIM and Colour Contrast Checker. Most good design tools such as Figma have plugins that you can also use. Icons and color-coded sections are useless to blind people. Add detailed alternative text descriptions that screen readers can translate into supplemental audio. Test keyboard navigation support so physically impaired users with limited dexterity can fully operate sites and apps without relying solely on pointers. Mouse hovers and tiny tap targets prevent access. Expand compatibility to screen magnifiers for the visually limited. Avoid conveying meaning through colour alone. Use shapes and text redundantly.

If you work in the public sector, you will find that you must check conformance with the Web Content Accessibility Guidelines. It is good practice to check in the private sector too. After all, it will increase your user numbers the easier and more accessible it is. Conduct tailored accessibility audits to catch issues. Validate inclusive design quality using automated checkers and user trial groups with assistive technologies. It may require some reworking but pays dividends through expanding potential audience reach.

Prioritising inclusivity demonstrates social responsibility and alignment with core brand values. Competitive advantages flow to brands that create welcoming environments for those reliant on adaptive tools. Enable their participation and earn their loyalty.

To wrap up

Leverage user-centred processes, minimalist principles, responsive design and accessibility best practices to shape an intuitive, user-friendly and inclusive website or app. Empathise with target users through continual prototype testing fuelling an optimal user experience. Iteratively refine based on research until you have a unified platform tailored to exceed your user expectations!

--

--