Hi.

Welcome to COA's interpretation, a blog for inspiring ideas around quality improvement and innovation in the human services field. 

Where is the Download Button? The Importance of Website  Design and Usability

Where is the Download Button? The Importance of Website Design and Usability

 

How many times have you gone to a website expecting to do something like save, edit, search, pay, or download but can’t figure out how to do it? For a company that relies on their site for client transactions, or marketing and communication purposes, this is bad business. If your customer can’t find what they're looking for because your website is clunky, they aren't coming back anytime soon. 

In this post we’ll focus on the importance of a good User Interface (UI) for an optimal User Experience (UX). We’ll discuss some basic design and usability best practices, share COA’s experience and lessons learned from the launch of our web application – MyCOA, and offer recommendations for next steps. 

Wait, what’s UI and UX?

The user interface (UI) is everything you interact with while navigating a website, it's the series of screens, pages, and visual elements such as buttons and icons.

User experience (UX) is the internal experience the user has as they interact with your website.

The golden rule for UI and UX design is to always keep the user in mind. Every element on your website should be as simple, obvious, and as easy to use as possible (think google.com).

   
 

A Brief Lesson in Visual Design

Improving your UI can be achieved using various visual design techniques. Take a look at the charts below.
How long does it take to count the Bs in chart #1 versus the Bs chart #2?

 

Color is just one visual cue that we can use to help a user.  Let’s look at another example using one of the most important visual cues in your UI toolbox, position.

Imagine the home page of your email, or your favorite shopping site. Where will you intuitively go to log in?

The upper right hand side, right? That’s because the standard convention for logging in and out of most pages is the upper right hand corner. It’s positional. If you change the sign-in to a different place on the page, you risk confusing the user. That’s not to say that you can’t do it but if you dare to change the log-in, you should have a good reason for doing it. And at the same time, you should consider using other visual cues to help the user know where to go.
 

POP QUIZ
Consider your website...

1) Does it take a lot of clicks to get to what you're looking for? 
2) Do you need to use comprehensive instructions, trainings, or other applications to explain how to do something?
3) Is your help desk continually answering questions?

If you answered yes to any of the above questions then it’s time to consider updating your UI to improve UX.
 

Do I Need to Hire a Designer?

There are many factors to evaluate while determining whether or not to hire an agency or a UI designer to help with your website's usability and design issues. 

If your application has been designed by your development team, if you are fielding numerous customer support calls, if you are losing customers to your competitors, or if you simply feel like your website or web application is bloated and has too much going on, chances are that you would benefit from application design services.

Here is a good article that outlines some things to be considered: Build vs Buy: Should you hire a UX agency, or build an internal team?
 

COA Case Study: Launch of a New Web Application – MyCOA

In 2010, we engaged with a developer to create a web application to put our accreditation process online. In 2012, the application - MyCOA - launched. While at the time it was revolutionary for COA - overnight we eliminated and streamlined numerous manual processes and put all accreditation information online – the user interface left much to be desired. Here’s what we were dealing with:
 

The original MyCOA portal launched in 2012  


The original MyCOA portal launched in 2012
 

To address the issues faced by our users, we hired an application designer and in 2016 we launched a new-and-improved user interface for MyCOA. The result? Night and day:
 

The redesigned MyCOA portal with a new UI launched in 2016.

The redesigned MyCOA portal with a new UI launched in 2016.

Important Lessons Learned

A development firm is not an application designer
While our development firm was awesome at creating an online application for the accreditation process, our users were unable to find key items without extensive instructions. An application designer helped us improve our navigation and interaction flows on the page so the user was able to clearly find and complete all web applications without help documents, trainings, and support from COA.

Position, color, size and shape are important 
The original VIP and MyCOA applications first launched in 2012,  had a monochromatic, flat design that was visually unappealing, hard for people who were color blind, and was distracting (i.e., your eyes wandered on the page). In working with an application designer, we significantly improved the UI by reorienting information on the page and strategically using colors and iconography to guide the user. 

Calls to action are important
Previously, when logging into the COA portals, a user was presented with a dashboard that contained lots of words and links but no calls to action. In a 12-18 month accreditation process, this is not helpful. In launching the new site, we created very specific calls to action and visual cues to tell the user what to do first, second, third, and so on. Complete application, pay fee, sign up for training, download work plan… these are just a few examples of the calls to action that we created in the MyCOA portal.

Carefully design your site to accommodate new features and transactional processes
When we added a new process or feature in our old portals, we simply added a new link in the navigation. This led to an overburdened and confusing navigation. Our application design firm helped us re-envision the navigation, streamline it, and ultimately make it more intuitive. It now includes five simple elements – instead of 15 – that mirror the stages of our accreditation process.  

If you have to include lots of help documents and instructions for how to fill out information then review it and redesign it
Nearly every page in our VIP and MyCOA portals had instructional help documents. Hundreds of support cases were logged every month. Portal training was extensive. The portals were a huge success but required lots of hand-holding. By updating the UI, we vastly improved the user experience which allowed us to remove nearly all of the support documents. Monthly support cases dropped by over 60%. Customer satisfaction increased dramatically. And internal staff had more time to help organizations with what matters.
 

Okay, I’ve Drunk the Kool-Aid!
What’s Next?

At this point, if you think that improving usability is a goal for you and your organization, you will need to choose a UX Design firm or a usability expert to help you with your UI needs. There are lots of people and firms out there from which to choose. Here’s a few things to consider:

  • Decide what you want done. Do you want to improve a few transactional elements on your existing website or do you need to completely redesign an interaction flow (i.e., our donation process)? 
     
  • Do your homework. Define the goals and expectations for your UX partner and for the product you want to create or update and then write a request for proposal (RFP).
     
  • Interview, interview, interview. Interview the firm or individual, review past projects and make sure the approach they take will fit with your company’s own development methodologies.
     
  • Make sure they can do the basics of what you need. Ensure their process includes or at least can include a discovery process, user research and usability testing capabilities, Information architecture, user interface sketches, user interaction flows, and visual design. If the firm or individual with whom you are talking doesn’t know what any of these are, move on.
     
  • Separate church from state. Just because something is beautiful, does not make it usable. Make sure the agency has a strong background in UX. The person developing the overall UX and interaction conventions is rarely the person creating the look and feel. These are literally two different animals. 
     
  • Make sure you meet and like the people you are working with. You are entering into a relationship that will likely last at least a few months if not longer. If there are team conflicts, no matter how subtle, it will affect your project.
     
  • Don’t take their word for it. Ask for references and talk to them. 
     
  • Make sure you get a dedicated team and understand the capabilities of that team. Not all large firms are bad but a larger firm may stick you with their B team if you are not considered a top line client. Know what you’re getting before you sign the contract.

What’s not important in this decision making process?

Have they designed an application that is in the same vertical as my application?
There is this misguided fear of wanting the UX design firm to already know everything about your business challenges. It is not important. As a matter of fact, it can be a problem. You want your UX partner to approach your UX challenge with a fresh eye and mind. You want them to immerse themselves in your user challenges and not have them assume they already have all the answers because they already did the same thing for another company. Also, you certainly do not want your product to look the same as your competitors.

Are they local?
Being local is no longer important, although time zones certainly can be. The real question should be whether they will be available when you need them.
 

Where is the Download Button?
It’s Right Here!

Hopefully, I’ve helped you see the value of looking at, if not investing in, good UI and UX. Because at the end of the day, a user who easily finds the download button is a happy user and a happy user means a return customer which translates into a lot of good for you and your organization. Hey, we all love great technology and when it’s easy to use and intuitive, with clear calls to action, and even fun, we always come back!

Note: This blog post's contents are adapted from a presentation offered at the 2017 NTEN Conference by
Tim Stockert, Vice President of Information Technology and Business Intelligence at COA and Joy Busse,
CEO and President of Busse Design.

 

 
Why Everyone Needs to Know About Mental Health First Aid

Why Everyone Needs to Know About Mental Health First Aid

April is National Volunteer Month!

April is National Volunteer Month!