Delphina Digital Person

Our team designed and built an innovative, immersive experience by combining UX & CX best practices, and ground-breaking AI avatars.

Role: UX Architect

Company: FCBHealth

Industry: Healthcare

COMING SOON - Explore the live site here
PROBLEM

Digital Person (DP) technology can help healthcare practitioners treat their patients, but new technologies can often be clunky, unintuitive, and overwhelming.

We’ve all experienced confusing and convoluted attempts at new interfaces.
How can we instill the confidence users have with established interfaces with something new?

OUR SOLUTION

Known interactions & layouts provide intuitive approaches to new technology.

Video conferencing UIs are already widely understood.

  • Interface controls provide key indicators of functionality, allowing new users to guess how they might interact.
  • Zoom, Google Meet, Slack, Microsoft Teams, and Discord all share a similar set of controls.

Website UX heuristics provide guidance for user scanning patterns

  • F shaped scanning pattern groups the Digital Person and UI controls visually.
  • The Important Safety Information is “hidden” by right rail blindness.
  • The content column’s central location balances with the DP visually.

Soul Machines AI Avatars delivered a built-in functionality suite

  • To align with user’s existing mental models, this built in functionality was customized.
  • Transcript, deafen, and pause functionality was added to provide accessibility for users in many different scenarios.
Research Articles

“We found that, if we were to slice a maximized page down the middle,

80% of the fixations fell on the left half of the screen”

- Nielsen Norman Group

We could place the mandatory important safety information in the right rail, so it only would draw attention if I user was looking for it.

“We don’t read pages. We scan them.”

- Don’t Make Me Think Revisited

Understanding the default scanning patterns of web users, we leaned into the F-pattern and spotted pattern to create an intuitive user flow for understanding the UI elements.

MAPPING

Talking with our medical and account teams, we put together a product requirements document and sitemaps to clarify necessary functionality.

REFINING AND REDIRECTING

Pulling UI directly from Soul Machines, we put together an interface that borrowed from too many mental models.

  1. The tools at the bottom grouped too many disparate parts of the experience together.
  2. The screen ended up cluttered by too much content.
  3. We needed to rethink grouping and what would show in the viewport.

Review with the internal team and further research brought out options for improvement.

  1. Increased prominence of the digital person to invite immersion.
  2. Created a single, scrollable content column for easy scanning.
  1. Grouped all communication functions in the UI panel to support discovery.
  2. Grouped links together in the footer.
UI DESIGN

Collaboration between our UX + UI teams defined the look and feel and UI kit for the final layouts.

FINAL SCREENS

We delivered an immersive, engaging experience for healthcare practitioners. Our team assured this experience met ADA web accessibility AA standards and defined how each element should function in the final product.

These screens show the key frames of unique functionality:

Entry Screen

Content Screen Transcript Closed

Content Screen Transcript Open

WHAT I LEARNED

Intuitive immersion must ground itself in understood visual metaphors.

  • Many of the same elements that create immersion can also confuse and overwhelm users, we need to ground ourselves in understood web and application heuristics.

  • Use moving elements Minimally. The Soul Machines default UI had animated elements that distracted from the product content.

  • Foundational UX principles of proximity, similarity, and hierarchy guide the eye and cognition, even with new interfaces.

Thank you for the view! Another?

explore WEBSITE Suite Case Study

© 2024 Jacob Molloy. Made with Joy & Love.