Novant Health
UI/UX Designer | Experience Design Group
As part of the Experience Design Group, I worked with Product Owners and cross-functional teams across the organization to improve the UI and UX of digital products in an Agile environment. My role was focused on visual, interface and interaction design for these initiatives, collaborating with business and development stakeholders to work out solutions.
Chatbot Challenges: UI and UX
Background
Previously, Novant Heath had deployed two out-of-the-box chatbot products to quickly address two distinct challenges:
- Help people find accurate and up-to-date information on the Covid-19 vaccines in an actively developing environment
- Enable a self-help chatbot experience to assist people with common website tasks on NovantHealth.com
Challenges
After the initial MVP launch, there were improvements to be made:
- The two experiences functioned entirely differently, which was confusing to users
- The visual design of the interfaces was not consistent with the design system and brand standards
self-help chat bot
covide-19 vaccine info bot
Diving Into the Problems
After discovery meetings with stakeholders and devs to determine initial requirements were had and limitations were outlined, the second phase of the discovery process began.
Major areas of friction revolved around the app timing out too fast, no ability to back up a step (or two), and broken voice-to-text inputs.
I used Figma to wireframe and mockup proposed solutions, and I was able to reference some of the early work on broad user groups that was being done concurrently with this project.
Some of the initial discovery notes, screenshots, and information gathering.
a few iterations
Bottom Bar Interaction & Visual Improvements
Pain points
There were several pain points identified in the bottom bar. Here are some examples:
- Manually typing “start over” was cumbersome, with many users not seeing the input instruction at all
- Users on desktop preferred keyboard input and the placement of voice icon resulted in confusion with a “send” button.
- The function of the microphone icon mimicked that of a walkie-talkie, where users need to press and hold the icon to use it. This presented much confusion and was hard to use.
Solutions
We were able to address some of the major pain points with the following:
- Adding an ever-present “start over” button to the bottom bar.
- Added a send button and moved the voice icon into the input area.
- We recommended that the voice feature function more like voice-to-text rather than a walkie-talkie.
Results
The redesigned bottom bar resulted in less overall frustration in testing.
- Users can easily start a new query with a single tap or click.
- The bottom bar feels multifunctional, with clearly defined actions, reducing confusion and errors.
- Users more quickly understood how to use the interface and inputs could be edited before sending, reducing the need to start over in the event of an error.
old design
updated desgin
Provider Result Card Improvements
Problem
We knew from research that users needed more information than what was on the existing provider cards in order to feel confident booking an appointment, with provider ratings and reviews being high on the list of things users wanted to know.
Many people would leave the experience to manually search for ratings, only to have the chatbot time out and force the user to start over. This was incredibly frustrating, and a lot of work to put on the user.
Additionally, there were some other simple interface improvements to be made, such as fixing the address cutoff.
Solution
Adding the star rating and direct link to reviews increased the trust users had in the results and preliminary testing indicated that users would be more likely to book an appointment.
Other improvements include updates to the visual design: typography, hierarchy, colors, and layout.
old design
updated design
Solutions
Redesigned CTAs to be more distinct from each other based on primary and secondary actions. Added review rates so patients could more easily choose a provider directly from these results.
Redesigned bottom bar to include an easy way to start over, and de-emphasized the voice-to-text input. Most users preferred to type, click and tap their choices rather than use voice to interact with the tool.
Interface visually updated to reflect new brand standards and utilized the new Novant Health Design System.
