what, where, & when
Sr. UX architect, acting UX product owner (first, sole SaaS designer)
nurses, customer service reps, technical support
Bootstrap, Silverback, ethnographic research, usability testing, focus groups.
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.
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.
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.