what, where, & when
Sr. UX architect, acting UX product owner (first, sole SaaS designer)
Kinnser Software
Austin, Texas
2012
personas
nurses, customer service reps, technical support
tools
Bootstrap, Silverback, ethnographic research, usability testing, focus groups.
keywords
help, innovation, interaction design, navigation, prototype, responsive, user-driven
Alex’s passion for user experience design sets her apart... [She] handled all UX design for a demanding agile process consisting of several scrum teams. The engineering team quickly learned that they could lean on her for UX direction on their projects.
—Mike Ditson, VP Product, Kinnser Software
Kinnser Software, a home healthcare agency SaaS, was known for its outstanding customer support (and probably still is). At the time I was there, Kinnser provided a strong online help tools to identify and solve some software issues on the fly, and a team of well-trained customer support representatives (CSRs).
Still, field research, customer interviews, and customer support shadowing revealed problems.
- Links to multiple online resources—a customer forum, a Confluence database, and more—were scattered across multiple pages and submenus.
- An automated debugging tool was also hidden.
- Customer support had to help customers find required data, such as the particular server the system had logged them onto.
- For remote support access, CSRs had to direct users to the right location for a link to a GoTo meeting.
This meant time was lost for both customers and CSRs, adding stress to people whose ultimate purpose was to provide patient care.
Putting it all together
Apart from logging in, every page of Kinnser.net had a shared top nav (the dark gray area in the demo below). This provided the perfect place to create an always-ready, consolidated collection of all the necessary information, tools, and links to solve a busy nurse's software problems.
Demo
Before (image)
Our starting point for web app navigation.
Click on image to see it full-size, in a new tab.
In the original navigation, the top, gray bar was global; the red bar changed according to the feature being used.
- "Search" is placed on a submenu which changes according to the feature being used. As a global tool, search works best when placed at the global level.
- "GoTo" looks like the "GoTo" in "GoTo Meeting," but is not. It is a nav element that leads to commonly used tools and web app locations. The problem is that customer service frequently used "GoTo Meeting" to support users, leading to confusion.
- Help links, data, and tools are scattered over multiple drop-downs.
- This is not responsive.
After (prototype)
Revised, responsive top navigation, designed and coded by yours truly. I placed all the Help resources in one place to make everyone's life easier. Scroll down for notes and test results.
Click "Help" for expanding and closing help tools section; change page width for responsive behavior. No other interactions work in this demo.
Notes
Help improvements:
- I hoped the charm of placing everything in an unexpected location might improve (if only slightly) the mood of a frustrated user.
- Online resources such as Confluence help information, customer forums, and updates are the first option, upper left beneath the headline.
- Customer support, which Kinnser prides itself on, is next, along with useful information like hours.
- Server data for the user's current connection is easily found (often a CSR's first question).
- GoTo meeting link provided, for those moments when remote access is needed.
This design also addresses non-help-related issues:
- The agency name showed at the top. Many nurses worked for multiple home health agencies (HHAs), with varying roles and capabilities at each one. A visual reminder helped reduce confusion*.
- The empowering "debug" option is readily available.
- "Go to" was originally "GoTo," which led to multiple useful locations. Unfortunately this was easily confused with "GoTo Meeting." In testing and a focus group, alternative terms confused, but "Go to" still made sense and reduced confusion between the menu and the meeting.
- "Search" was moved to the unchanging top bar, since it was always useful.
Results
This prototype was introduced at the annual Kinnser User Conference, where it did well in usability testing and generated a great deal of enthusiasm among attendees. Highlights:
- In usability testing the first day, I used a common stressful scenario from my customer support research. All testees (nine) verbally expressed surprise and pleasure upon seeing the expanding help panel. Usability results were excellent.
- Post-usability testing, as a "vote for your priorities" option, this placed in the top three priorities of more than a dozen.
- Follow-up testing showed similar results.
This design was placed into the backlog for the usability Scrum team, but due to competing feature prioritization was not added to a sprint before I left Kinnser. Another navigation approach being tested was an extremely slimmed down global top nav, paired with an always-on-demand expanding left navigation. Early versions tested well, but this was never polished enough to make it to a backlog.