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.
- Client
- AMN Healthcare, USA (Healthcare)
- Project
- AMN Websites Revamp Program
- Role
- UI Designer & UI Developer
- Period
- Sep 2019 – Jun 2023
- Team
- 200+
- Location
- Hyderabad, India
- Tools
- UX research, IA, Design Thinking, wireframes & prototypes, design systems, Figma, Adobe XD, Photoshop, Miro, Zeplin, ReactJS
- Client site
- Visit live site ↗The current version may differ from my work.
The 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.
What 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
Approach
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.
Key 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.
Passport mobile app
Passport is the one-stop app for travel nurses and allied professionals. These are its two entry flows, step by step.
Sign up flow
Sign in flow
Passport UI framework
The Passport framework every Passport screen is built from: colours, typography, buttons, forms, cards and icons.
ShiftWise staff list
The staff list from its default overview to search results, as cards, and on tablet and mobile.
Credentials
Passport puts open requirements and expiring certifications up front so nurses can act from their phones.
Outcome
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.