Handout on Improving Website User Experience from A social web sampler for social change, Feb 7, 2012

By Michael Tedeschi, Founder and Creative Director, Interactive Mechanics

One of the biggest issues with growing web technology is keeping your organization’s website up-to-date and streamlined for better user experiences. Join this discussion to learn about some best practices about user interface design, information architecture, and web design to present your information clearly and easily to your target audiences.

What is User Experience Design?

The process of optimizing “all aspects of the user’s interaction with a product: how it is perceived, learned, and used.”

Areas to Consider

Develop a Strategy

User experience is not a step. It needs to be integrated into the entire process, from start to finish. Begin with an analysis of your website, your competitors websites, and the goals and business requirements of the new site.

Conduct Research

Create user stories — write out “stories” or short statements about how the user who interact with the site, experience the content, or what features are available to them. Do persona testing — step into the shoes of one of your visitors and test the site from their perspective.

Information Architecture

Conduct a site audit — analyze the content on your site, looking at flow of content. How easy or difficult is it for users to find information? Does this match your user stories or personas? If not, how can you adjust your content to make it match your goals? Be consistent — create a list of terms and taxonomies to give consistency to your web content.

Interface Design

Wireframe — create schematics of your new site, incorporating insight into the navigation and layout of the site. Are there specific items that need to be given a unique treatment? Consider the results of your research and information architecture in this process. I’ve found this is a great time to test your progress.

Interaction Design

User flow diagrams — How are your users progressing through the site? Are they focusing on the content you want them to? How are they getting from point A to point B? Diagram the results and your intended flow and compare the results.

Functional Specifications

How is the website going to function? This might be behind the scenes or client-side. Even if you’re the developer on the project, this helps break down the website into sub-tasks and clearly define the development process.

Visual Design Treatments

The visual treatments incorporate the ideas of the function specs, the wireframes, results of prototyping and testing, and initial research. Consider how color palettes, typography, and imagery impact the message or hierarchy.

Keep Track of Results

Perform A/B testing to see if your decisions were the right ones. Review your website on a regular basis after launch to ensure your visitors are experiencing the website the way you intended. Send out a simple survey or contact members to give their feedback and make informed decisions from these results.