User experience design 101: Avoiding the WTF Web page


This is the first in a series on user experience. Stay tuned for more in the coming weeks.

The WTF Web page.

If you do even minor online searching, you know what I’m referring to – that website or landing page that makes your head feel like its going to explode. No call to action – or seven bazillion of them. Hard-to-read fonts. Screaming colors. Flashing starbursts …

Example of bad UX design

OK, I need a massage just thinking about it.

The point is, good user experience (UX) doesn’t just happen. It comes with user research, detailed planning and finding validation along the way.

The UX process

Our good friend Mark Twain said, “I didn’t have time to write a short letter, so I wrote a long one instead.” He, of course, was referring to Web design and user experience.

It takes careful research and planning to pare a website down to its core, removing all unnecessary action and information.

This process starts with a user experience designer (like myself) who creates a series of documents that support what I call the working brainstorm. While completing the documents, solutions begin to appear.

Common UX documents

Here are the main documents Flint Group uses to create optimal user experiences for our clients:

  • Personas – Provide descriptions of each main user type to understand their actions, frustrations and goals.Example of UX persona
  • Usability audit – Basically lets you know if your website is user friendly and provides recommendations to make it better. It may or may not include a competitive analysis.
  •  Content inventory – Determines necessary information for the website and prioritizes all content. (Click the image below to view a larger version.)

    UX content inventory example

  • Site map – The outline or road map of the website forms and navigation is determined. Also known as the information architecture (IA).UX site map (information architecture) document
  • Process diagrams – Shows the process the user takes in any given task. Also known as a user flow, user journey or user scenario.
  • Wireframes/prototypes – Acts as a blueprint for design. A wireframe prioritizes visual content and outlines functionality. Prototypes are wireframes that have functioning navigation and buttons used for user testing.

US design wireframe example

In upcoming posts, we will be focusing on each one of these documents and how they can help businesses improve their user experience. If want to learn more or talk about user experience now, contact us. We’d love to chat.

Jen Strickler

With her passion of understanding and crafting experiences, Jen works with clients to integrate digital communication strategies into their overall marketing matrix. From defining the usability standards of simple websites to full digital communication plans, Jen defines appropriate solutions to help clients meet their business objectives. With over 20 years of experience, Jen believes that effective interactive work must be relevant and intuitive. She works closely with the entire digital team in architecting and validating cohesive user-focused solutions that work seamlessly into the user’s journey with a brand. She also really enjoys the salted caramel cupcakes from Hy-Vee.

Read all articles

Sign up for email updates!

By signing up, you agree to receive emails from Flint Group. Unsubscribe at any time by clicking on the unsubscribe link at the bottom of our emails. Questions?