When most people hear the phrase “user experience,” they think of a website’s visual design—the typography, font, colors, style and other elements that are aesthetically pleasing for the visitor. While important, these items are just small pieces of the user experience, or “UX.”
For association websites, UX represents the crossroads of design, functionality and site-visitor psychology; it is about the mental and physical feeling a person has when visiting and using your website. When the feeling is a good one, that’s when you best connect with visitors (members and non-members alike) and ultimately improve your bottom line.
The Five Layers of a Positive UX. How do you ensure that your website is providing a positive UX? The following five steps will help you analyze your site and if it’s not up to par, help you build one that is.
Cull User Research. If you’re building a house, you don’t just grab a hammer and start nailing boards together, right? The same holds true when building a website; you don’t just grab your computer, keyboard and mouse and start arbitrarily writing code. In either situation, you first need a solid foundation. In the realm of web design, that foundation is based on user research. From the get-go, consider your range of end users: You have members, potential members, consumers, leadership, policy makers and employees—all with their own reasons for visiting your association’s site. Don’t assume you understand their goals, challenges and motivations. Talk to them, preferably in their own workspaces. You will be surprised by what you learn.
Come up With Content Strategy. This step involves determining what, exactly, you want included on your association website—features, functions, copy, images, videos, etc. What kinds of pages do you need, and who is going to create and maintain them? You should also stick with a consistent brand and come up with an appropriate voice/tone that speaks to the end user. And whether you’re evaluating existing content or planning to introduce something new (or a little of both), now is the time to closely appraise all content to make sure it provides value to your audience.
Determine Information Architecture. Go back to the example of building a house. You know you want to build four bedrooms, but you’re not going to just stack them next to each other. You first need to think about how people move from one room to another. The same goes for a website. Once you know what content you plan to include, figure out your navigation structure and screen layout. Sketching out your sitemap will more easily allow you to make changes and updates as you continue refining a design to provide a positive UX. This is another opportunity to check in with your end users. A number of techniques, including card sorting (organizing topics into categories and then labeling them) and tree testing (organizing a website’s topics into a tree-type hierarchy based on usability or findability), are helpful when creating and verifying navigation structure.
Choose Your Interaction Design. This step builds on all previous steps. What kinds of controls should you use for navigation? How will visitors make selections and move from one page to another? Will there be a dropdown menu or a set of what are referred to as radio buttons? You’ll also want to plan for microinteractions such as animations, “pull-to-refresh” scrolls or links that are highlighted when clicked. Although small, these elements play a large role in the overall UX.
Pull it all Together With Visual Design. Your site’s visual design—its color scheme, typography and iconography—is the final layer of the process. While some of your visual design will be dictated by branding guidelines, there is typically some flexibility as you move forward. Before diving into aesthetics, it is important to define the structure, content and interactions. A good visual design can bring all of your foundational work to life, and a bad one can negate it.
What’s Next? Building a website with a great UX takes research, content strategy, information architecture, interaction design and visual design. Making the most of these five layers will provide you with a strong foundation to begin building your website.