Healthcare · USA

AMN Healthcare Websites unification program and design system

AMN set out to revamp its suite of legacy web applications with new technology, making them responsive and user friendly while adding new business features. I designed and built UI for three of them inside a 200+ person program.

See the screensDiscuss a similar project
AMN Passport mobile app screens: splash, sign up, verification and welcome
Client
AMN Healthcare, USA (Healthcare)
Project
AMN Websites Revamp Program
Role
UI Designer & UI Developer
Period
Sep 2019 – May 2024
Team
200+
Location
Hyderabad, India
Tools
UX research, IA, Design Thinking, wireframes & prototypes, design systems, Figma, Adobe XD, Photoshop, Miro, Zeplin, ReactJS

01The challenge

Three very different products had to feel like one family: ShiftWise, a vendor management system for healthcare total-talent needs; SilverSheet, an all-in-one credentialing and compliance solution; and Passport, a one-stop mobile app for travel nurses and allied professionals to browse jobs, sign contracts, manage credentials and track time and pay.

With thousands of screens across web, tablet and mobile, consistency could not depend on individual designers remembering the rules.

02Approach

01

Stories before screens

Worked day to day with the PO, PM and UX architect, and helped the PO write UX and UI user stories in Azure DevOps for upcoming sprints.

02

A shared framework

Contributed to the AMN UI Framework, a design system for all AMN web and mobile apps across design teams.

03

Design and build

Created and iterated wireframes and visual designs for PO approval, then built ReactJS components and pages for the dev team.

04

Close the loop

Fixed HTML/CSS issues to match the designs and helped QA and dev teams resolve UX and UI issues.

03What I did

  • Wireframes and visual designs for ShiftWise staff-list flows: default overview, search, filter dropdowns, grid layout, empty states and card views for tablet and mobile
  • Passport mobile flows: splash, sign-up, email verification, welcome, credential centre, open requirements and vaccination records
  • Design-system components: logos, image treatments, summary side panels, charts and text fields
  • Style guides, image assets and icons, with dev-ready links shared to the development teams
  • ReactJS components and pages built for the dev team

04Key design decisions

Decision 01

One framework, many products

Logo lock-ups, image treatments and summary panels were defined once in the UI Framework so ShiftWise, SilverSheet and Passport stay coherent.

Decision 02

Grid and card views for the same list

ShiftWise staff lists switch between a dense grid for desktop power users and cards that reflow for tablet and mobile.

Decision 03

Empty states that teach

A ‘select the appropriate search’ illustration replaces a blank table, guiding the user to narrow results first.

Decision 04

Mobile-first credentials

Passport puts open requirements and expiring certifications up front so nurses can act from their phones.

06Outcome

Over nearly five years I helped move AMN’s legacy apps to a consistent, responsive family of products backed by a shared design system and ReactJS components.