Front End Design Updates - Change Display of Interactions

[kristinknopf]

Based on the most recent usability testing, we've learned that we need to change the visual display of interactions. I actually think that we could be giving the customer a whole lot less and make them happier. All the highlighting to the left isn’t working. They expect to use the left to “manage their cabinet” but to see info about them on the right. Even just having a page listing all the interactions among their cabinet might give them more of what their looking for. People also don’t like the “deactivation” of drugs in their cabinet — it makes it hard for them to see and they aren’t understanding why.

Given I am an Open Cabinet customer When I add medicines to my cabinet Then I can easily tell if the medicines in my cabinet interact with one anther And I know when there are no interactions among the medicines in my cabinet

[normsun]

I'm not sure if you all have received feedback on this or not, but it's difficult for me to determine which drugs have interactions unless I have that drug highlighted and read the warning description on the right. Did you receive any feedback that warning icons would be helpful to determine what has interactions in the cabinet at a glance?

[rppatel1007]

@kristinknopf --

I was thinking about two potential solutions:

First Design

Key items in this design:

• One container per line, and it shows the number of pills it interacts with for a quick visual cue
• Clicking on a medicine will highlight the shelf and also highlight that medicine on the other shelves
• You can hover over it to see the names of the medicine it interacts with

Second Design

kind of going back to @mandymullins dashboard view

Usability testing

To help with usability testing, I hooked this up to a feature flipper. You can toggle between the designs by going to https://opencabi.net/features.

Notes

• You can do any combination of original cabinet, alternate cabinet, and visualization
• If the visualization toggle is on, you can't drill down ... this is still a work in progress
• The alternate cabinet version is fully functional

[normsun]

The second design is great in showing the severity of interactions. That's very helpful to understanding more of interactions and potentially data for the user to make a decision on whether to continue to use interacting medicines. My concern is that a spider chart design pattern is too complex for the more basic user, but I'd usually put that through more usability testing to find that out. I'd love to see this in the see more details page for interactions.

Here's a mock that I put together. Hope you find it helpful and that it gives you ideas.

[normsun]

You can also do a competitive analysis and see what other products are doing. What are some the features that you want to include?

http://www.webmd.com/interaction-checker/default.htm

[normsun]

Don't lose track of your personas and creative brief. Hopefully you're practicing the read aloud of your creative brief every time you meet. You've got some great discovery/research and a clear goal, so make sure to work towards them!

Your objective states that interactions are the #1 concern for Betty Joe, so all the information and design should focus on that first and above all else. The warning icons and the first highlighted tab in my mock both put interaction information first.

[rppatel1007]

@kristinknopf @normsun -- here is a design bringing in the interaction count to the original screen.

[normsun]

That's great to see on a mockup, @rppatel1007!

My thoughts with annotations below.

There are now a lot of red elements that are competing for my attention.

1. Recommend replacing the search with a search icon or at least choosing a less bright color. Does that test well?
2. Recommend changing the color to delete a medicine to a less bright color. I also recommend providing a dialog that verifies the user wants to delete the drug from the cabinet (nice to have)
3. Recommend highlighting the interacting drug titles in a different manner, and the specific drug that's being highlighted. Too many red elements. (suggestion)
4. I'd ask @mandymullins on whether some iconography or just an exclamation point would be suitable for the interaction count on the left. It's helpful to see a number but adding a warning icon immediately grabs the attention of a user's limbic system to visually show a sign of danger, and for that user to pay attention.

Lastly, I think I'd still expect the details on interactions to show up in the right pane, but I'm not positive. @kristinknopf could find out through usability testing. (nice to have)

[kristinknopf]

@rppatel1007 given the most recent changes to the way we are displaying interactions, and with the most recent usability testing, we have succeeded in making interactions clear so that customers can easily tell when they do and do not have interactions.