Providence Healthcare

Providence & Swedish Making healthcare a little easier

My time with Providence Health & Services' Digital Innovation Group focused on two distinct digital product categories. First, designing an on-demand emergency room video call platform with remote diagnostic instruments. After partnering with Sunny Lee & Kelly Elston to research Providence's established caregiver process, protocol, and hardware we designed and tested service workflows and case management tools. Secondly, a quartet of established care services were rearchitected as a suite of Express Care options and brought together on a shared marketing & scheduling platform with a multitenant architecture. #

I also helped develop a visual language for the suite of provider & patient healthcare tools. A team process of leveraging Abstract (git), Sketch (layout), Invision (public prototyping), Zeplin (internal prototyping), along with the Adobe Creative Cloud (production). The visual design system was based on Google's Material language, but out of the box it felt too cold for the healthcare world. After partnering with engineering, we developed a solution of taking React Toolbox and subbing in a humanistic typeface, rounded some corners and generally opened up the vanilla styles (more padding). By working with these tools, we were able to more fluently migrate interaction & visual work into React components via direct collaboration in Storybook. #

Interactive prototype (Invision / Craft) #

Team presentations Integrated Consumer Experience - Web & Native design preview Scheduling & Registration wireframe review Account Management wireframe review #

Available Providence locations

https://www.providence-dig.org/ https://www.linkedin.com/in/sunnyleeux/ https://www.linkedin.com/in/kellyelston/ http://react-toolbox.io/#/ https://fonts.google.com/specimen/Source+Sans+Pro https://storybook.js.org/

https://invis.io/C3GJN9VJ6TE#/287567188_Top_-_Virtual_Landing https://drive.google.com/open?id=1ss_K_amsJ9OYZBD8vctijzRE01LrXCpc_uov3vu_fBA https://drive.google.com/open?id=1sx5oSIAm3E5Iy58XSNeil_Sm9JZLPkbQ8cuO9EfFSzI https://drive.google.com/open?id=1le_gtlHi5ts94gTg8oRfCq3uBW-u4xO7HZUxbrvMl9o https://scheduling.provinnovate.com/virtual/precheck/availability

Provider view of video service from a cart situated in an patient's room. Clockwise from the top left: Patient information card with NIH stroke scale tool, provider account, audio/video controls, remote camera controls, saved xyz view positions, self view, on cart tool controls. We did a facial detection prototype during one of the group's hackathons. Provider view of video service from a cart situated in an patient's room. Clockwise from the top left: Patient information card with NIH stroke scale tool, provider account, audio/video controls, remote camera controls, saved xyz view positions, self view, on cart tool controls. We did a facial detection prototype during one of the group's hackathons.

Example of switching to the handheld JedMed video tools. Example of switching to the handheld JedMed video tools.

Telestroke dashboard for centralized management of session requests and hardware connectivity with partial Epic api integration for patient records. Telestroke dashboard for centralized management of session requests and hardware connectivity with partial Epic api integration for patient records.

Design language being applied to a provider's detail view. Design language being applied to a provider's detail view.

Custom skin for prototype dashboard (patient detail view) built on Salesforce. Custom skin for prototype dashboard (patient detail view) built on Salesforce.

A clinic location page with appointment time selection, symptom triage, insurance coverage and costs. A clinic location page with appointment time selection, symptom triage, insurance coverage and costs.

An example of different form states used throughout the paperwork sections. An example of different form states used throughout the paperwork sections.

Material's card based structure was imposed on the sign up forms. Material's card based structure was imposed on the sign up forms.

Toast and a status bar error. Toast and a status bar error.

Progress indicators and success states were imposed to clarify user actions. Progress indicators and success states were imposed to clarify user actions.

Pared down video interface for virtual triage service, with text chat. Pared down video interface for virtual triage service, with text chat.

Progession of screens for a hardware diagnostic system. Progession of screens for a hardware diagnostic system.

A user flow, as seen in a Sketch + Invision's Craft prototyping method. A user flow, as seen in a Sketch + Invision's Craft prototyping method.

Leveraged Material's mentality for simple theming variations and a single type choice. A 960px wide 12-column structure and 16px baseline grid formed the basis of the Material modifications. Leveraged Material's mentality for simple theming variations and a single type choice. A 960px wide 12-column structure and 16px baseline grid formed the basis of the Material modifications.

Example of theming control Example of theming control.

Providence Healthcare project image

Collaborated with Sunny Lee to help develop a mapped out user flow. Collaborated with Sunny Lee to help develop a mapped out user flow.

Collaborated with Sunny Lee to accommodate for native apps interacting with web services. Collaborated with Sunny Lee to accommodate for native apps interacting with web services.

Collaborated with Sunny Lee on administrative dashboard wireframes. Many iterations until we ended up with something that helped the staff and didn't add daily stress. Collaborated with Sunny Lee on administrative dashboard wireframes. Many iterations until we ended up with something that helped the staff and didn't add daily stress.

Collaborated with Sunny Lee to develop mobile wireframes for video visits. Collaborated with Sunny Lee to develop mobile wireframes for video visits.

Providence Healthcare project image