AyaConnect Redesign

UX Design

Web

Mobile

Design System

Background

Aya Healthcare is a healthcare staffing company that bridges the gap between hospitals and nurses/physicians. AyaConnect is a web/mobile application that is a one-stop for hospitals to have access to their Aya data. Functionality in this application includes: posting jobs, reviewing applicants and job offers, reviewing/adjusting submitted timecards from employees, and much more.

Due to the ever growing number of people using mobile phones in their day-to-day business, we decided to not only improve the experience of the existing web application but also create a mobile companion app that would allow hospital users to do common actions (posting jobs, reviewing applicants) while on-the-go.

Project Goals

1. Modern look and feel (current design of AyaConnect feels dated and heavy - see below)

2. Consistent component styles and design language across entire platform

3. Use Material Design styles as a base (engineering initiative to transition all platforms onto material design for easier sharing of frontend components acros platforms) 4. Other requirements:

Current Design

Users said: Heavy, dated, not great to look at, definitely not great to use.

Competitive Research

There are a number of other businesses offering different subsets of Aya functionality that we wanted to explore to ensure that we had feature parity (and then some).

Inspiration

On top of doing research on what competitors were doing (mostly functionality focused), I also wanted to get a nice collection of reference designs that I liked that would help guide the direction I took the visual design portion of the UI. I'm a big fan of minimal UI, especially in a platform like AyaConnect, where users want to get in and get out without getting bogged down with a bunch of extraneous UI elements. When you're working in the platform all day everyday, gimmicky things that don't help the experience (and many times degrade it) don't really have a place (compared to products that are more consumer-facing like SnapChat/TikTok/etc).

Information Architecture

AyaConnect has tons of functionality that allows hospitals to go from posting a job, to interviewing candidates, offering candidates, having nurses start working, tracking nurses timecards, etc. For this redesign, we wanted to re-think how we were organizing all of these features offerings into something more intuitive and data driven. On top of organizing the features as a whole, there are also a bunch of different "roles" that we needed to consider. Each of these roles could have access to a different subset of features and the IA would need to support all of these permutations.

Preliminary Wireframes

I started tinkering with some possible navigation options first since this would form the "shell" that encapsulates the rest of the content. I played around with quite a few different concepts at varying levels of fidelity and added in some dummy content to test how the design would flow.

Sidenav Interaction Prototype

While working through different interactions, I like to create prototype and/or gifs of functionality in order to convey my intent with the design. If a picture is worth a thousand words... how much might a moving picture be worth!?

Styleguide / Design System

Once the navigation had more or less been decided upon, it was now time to start fleshing out the rest of the styleguide. I took components from the old version of AyaConnect and "transformed" them into their new look. I created these components in sketch as a library so that the other designs on the team wouldn't have to recreate them. In addition, I leveraged the Invision Design System Manager tool to create a styleguide that engineers, PM's, and other designers could reference online.