HFO Home Visiting Interface

  • Client

    Oregon Department of Education
  • Company

    Vistalogic, Inc
  • Date

    2020
  • Role

    UI / UX Designer
  • Type

    UI Design

New features and an optimized interface for a Oregon State DOE family support and parent education home visiting program.

Our Client

Healthy Families Oregon (HFO) is a free family support and parent education home visiting program.

Healthy Families Oregon (HFO) is a free family support and parent education home visiting program. HFO is voluntary and it focuses on strengthening the parent-child relationship to assure healthy growth and development. Home visitors support parents in cultivating and strengthening a nurturing, positive relationship with their baby at each visit. Parents receive information on topics like child development, infant care, and keeping their baby healthy, and learn what is going on in their communities to support new families. Many families are eligible for home visits with a trained home visitor, who coaches them as they build their skills as parents and help their baby be safe, healthy, and learn.


My Role

I was the sole UI designer and front-end developer on this project...

At Vistalogic we had a very small but agile team. I was the sole UI designer and front-end developer on this project and worked together with program managers and the head software architect to transform the clients needs into a compelling and user-friendly user interface for the CLARA software product. Unfortunately, this project did not get to the implementation phase due to budget constraints, but had it moved forward, I would have been the engineer for all aspects of frontend development.


The Challenge

the system, as it was designed, did not sufficiently match how [HFO] handled their workflows and processes.

Healthy Families Oregon was already a user of Vistalogic's CLARA system, a technology platform that offers vital data collection and management tools to public agencies, non-profits, and healthcare organizations. However, the system, as it was designed, did not sufficiently match how they handled their workflows and processes.

Vistalogic had already developed a new Care Plan interface that HFO utilized to document their work with clients, but it was focused on a single client. HFO needed to work on a Case level where they would be able to work on multiple client Care Plans within a household simultaneously. In addition, we needed to develop new features to support the specific eligibility requirements of their program. Finally, we needed to tie the new features together with existing features into a seamless workflow across four different user types to support screening, review & assignment, case work and management, and program supervision and analysis.


Requirements Gathering

I worked with the Program Managers to prioritize the list of 30 requirements and 97 sub-requirments and to identify items that would require intensive design iteration prior to development...

Vistalogic’s Program Managers worked with HFO to develop a list of requirements for the new features that they wanted to build into the CLARA system. They also identified a set of these features that would require design documentation as a deliverable.

I worked with the Program Managers to prioritize the list of 30 requirements and 97 sub-requirments and to identify items that would require intensive design iteration prior to development, whether as a deliverable or to be used internally within Vistalogic. We developed a list of of 19 major requirements that required design exploration and documentation.

Requirements Spreadsheet


The Users

We identified four different users who had distinct roles in the process:

Four users

Screeners

The screener is responsible for conducting the initial screening of the potential client to determine if they are eligible for home visiting services.

Program Managers

The program manager is responsible for reviewing the screening, approving the service request for home visiting services, and assigning the service request to a home visitor. They also work closely with the home visitors to help manage cases, case loads, and performance.

Home Visitors

The home visitors are the users who interface directly with the clients and manage cases. They conduct home visits and are responsible for outreach and enrollment. Once the client is enrolled, they are responsible for developing their own personal Care Plans. They manage and document all of their work through the CLARA system.

Supervisors

Supervisors are interested in understanding the performance of the HFO team across locations and agencies through metrics such as home visit completion rate, case load, and number of enrolled focus children.


Creating the Design Story

Once we had the requirement set organized and prioritized, and a good understanding of our users and their roles, I synthesized the work into an overall design story that would guide the design process by helping us to determine where each of the features fit within the existing system, what new features needed to be developed, and how all of these pieces fit together into a coherent work flow.

Design Story


Diagraming User Flows

Client Screening Diagram

I dove further into the individual features represented in the design story to map out user flows, particularly for places where the existing system would need to be modified. For example, shown below is where we eventually landed for the organization of the Client Information step of the Client Screening work flow. We worked through several iterations to develop a user flow that would meet the needs of the HFO program while being flexible enough to accomodate different program requirements for different clients. Overall, we explored and documented 7 different work flows and the connections between them.

Client Information Diagram


Design iteration utilizing the Design System

Utilizing this design system, I began to create design iterations for each of the pieces identified in the design story.

Over my five years working at Vistalogic, I completely overhauled the user interface of the CLARA software system. This included introducing modern techniques and tooling for CSS, organizing and improving the javascript code base, and developing a design system of resuable and nestable components. View design system documentation (Work in progress).

Design System

Utilizing this design system, I began to create design iterations for each of the pieces identified in the design story. When necessary, I would develop new components to add to the design system, such as the indicators for the Key Performance Indicator Dashboard. Through frequent meetings with the program managers, who had intimate knowledge of the needs of the HFO program and users, we audited the designs and incorporated comments into the subsequent iterations.


Outcome

Design document

Through iteration and analysis we arrived at a set of over 50 high-fidelity mockups documenting the design direction for the HFO system, for 19 new and/or modified feature sets.

Case Console

Case Console

Console Evolution

The center piece of thew new interface, the Case Console, represents a further evolution in my work to streamline the CLARA interface. When I began working with Vistalogic, the system was closer to a database administration interface than a purpose-built application. Over time, I worked to focus the interface more on use-cases and away from the underlying data records. The Console became the organizing metaphor for a single-page application that could handle what previously required multiple server side page renders tied to a confusing navigation system. The Case Console, coupled with modal workflows, will allow HFO's Home Visitors to manage their Cases and Client Care Plans from a single clear interface.

A Streamlined Look and Feel

New look and feel for the Clara interface

In addition to the improvement in information architecture and user experience, my work included an updated look and feel for the software interface. Modern iconography and typography, judicious use of white space, consistent padding and spacing, consistency between interface components, and strong visual anchors allowed us to present a lot of information in a clean, uncluttered, discoverable interface.

Deliverable

The final deliverable to the client was a design document and an interactive prototype outlining the interface and the user flow. View the complete protoype.

HFO interface interaction

← Back to all projects