Our Work


It's Already Time to Usability Design!

By Dina Nikitaides on December 11, 2014

Can you feel my excitement?! A few weeks ago our fearless product owner, Teri, stated that in order to create loyalty in our users, we need to “give them meaningful tools wrapped in a great experience”. Lindsay then followed up with a little insight as to how we are working to streamline and improve our “meaningful tools” (the content). So today I (dina, interactive content manager) want to share a bit about my favorite part of this process - creating the “great experience” for our users.

What do we mean by usability design?

Usability, as applied to a website, generally refers to how easy the website interface is to use. To design a website that is usable, we must continuously evaluate how easy is it for users to learn to navigate, find things, and accomplish tasks on our site. Usability design means we will focus on: what is on each page, where it is on the page, and how users navigate from one page (or resources) to another.

We will also pay attention to how quickly users can navigate and perform tasks and how easy it is for users to remember how to do so again at a later time. This isn't a test of our users, but a test of our website and an indicator of whether we are on the right track with regard to how we present our resources.

As we get further along we will also evaluate overall general satisfaction with using our site. What we hope to find is that people who are in stressful legal situations, find our site pleasant to use. We hope that navigating our site for answers to legal questions does not add to users' frustrations, but relieves them. For motivated people in crisis, we want them to know there is a reliable resource available that is easy to use.

We can only predict so much… so we test.

Really, we should only predict so much about how users will interact with our new website. And even those predictions should be based on past observations of user interactions with our current website (replicate the good, rethink the bad). Instead of predicting or hoping a user will use our website a certain way, we will test...and test...and test...and test.

One of the great parts of the Agile development process we are using is that we work in very small increments. We are designing and building discrete elements of the website that can each be tested before we get too far down one path. Therefore the users really are guiding the usability design of our website throughout the entire development process. And in the end, when we test the whole shebang, there should be no surprises and we should be right on target for having a website with great usability.

Wireframing - our first visual!

One of the first discrete usability design tasks we are working on is the layout of a very basic Q&A page. Here is how our development team tackled this task:

  1. We first came up with a list of items beyond the Q&A that we might want on the page. We asked ourselves what other information might the user want/need; what other tools might they find useful; and how do we deliver those other resources to the user on this one page. (yes, this was us engaging in the dangerous act of predicting - but at this stage it’s okay as you’ll see below) We didn’t want to overwhelm users or overpower the main content on the page. To that end, we considered the value of real estate on a page versus content we could lead users to through a strategic link or well designed navigation.

  2. From our list of items we drew out on giant pieces of paper (yep, old school style with colorful markers) what the Q&A page might look like. We kept this as simple as possible, creating only wireframes - which are boxes on the page indicating where items would be and about how much space they would take up.

  1. We came up with multiple wireframe options on paper that we then translated into a narrowed down selection of digital wireframe mockups using Balsamiq. Here are a couple of our digital wireframes. (FYI - Balsamiq is a super easy to use mockup software. The company is awesome and gives away free licenses to do-gooders. Check them out!)

  2. The digital wireframe mockups gave us a better idea of spatial relations and we narrowed the options down further to two. We took these two options one step beyond a wireframe to add sample Q&A text, no graphics, no colors, no special fonts, etc. Here's an example of a wireframe with text.

User testing doesn’t have to be elaborate.

While we have what we think are great basic layout options for a Q&A page, we won’t know if we are on the right track until we test them with users. So in the next couple weeks we will take our text filled wireframes to the streets (literally) to get some user feedback.

At this stage, we won’t have users sit at a computer and interact with our Q&A page, as there is nothing but boxes and text on a fake webpage. But user testing doesn’t have to be elaborate to be valuable. By showing paper prototypes and asking questions, (Is there too much on the page? Is the other information offered on the page helpful? Would they click on any links? Would it be helpful to have a public rating of the information?) we will learn what users like and dislike at this very early stage. Our users will begin to shape our usability design now, before a single resource is even live on our site. Isn’t that exciting?!

A long way to go.

This is just the very beginning of usability design and user testing for our development team. We look forward to the work ahead it will take to create "the great experience" for our users. Check back to see how we do through this process.