Associate UX/UI Design Director
Cardinal Health
UX/UI, Design System, Branding
Cardinal Health needed help transforming its Order Express experience, a tool that pharmacists use to order medication and medical supplies from manufacturers.
This project spanned over nine months and included 3 phases: Visual Direction, Design System, and Screen Design.
Role
Associate Creative Director/Lead Designer
Client Description
One of the largest healthcare companies in the United States
Phase 1: Visual Direction
To help Cardinal Health envision its future state experience, the IBM team and I created two distinct visual directions to inform all subsequent creative work.
Visual Direction 1
This visual direction shows modern, forward-thinking, and efficient Cardinal Health is. It makes new content easy to navigate, featuring an organized user interface design inspired by iOS’s human interface guidelines.
There is a strong sense of depth through 3D renderings, shapes, shadows, and gradients, providing a new and refreshed perspective to the pharmacist experience.
Visual Direction 2
This direction is a natural evolution of Cardinal Health’s current brand guidelines. It utilizes brand elements but pushes them into a modern, stylized territory to provide an elevated user experience. This lighthearted and approachable aesthetic, featuring bolder illustrations, patterns, and graphics, invites the users to interact with the platform in a friendly and engaging way.
Phase 2: Design System
After Cardinal Health chose visual direction 2, I crafted a design system that would assist in future screen creation. The system included hundreds of ready-to-use components such as buttons, form fields, tables, modals, icons, and more.
Design System Structure
The design system consisted of five different sections:
Cover Page
A clickable prototype used to access all design system elements via a web browser.
Brand Elements
This area houses all brand elements such as type styles, brand colors, icons, logos, and illustrations.
Individual Components
Ready-to-use components such as buttons, text inputs, and modals used to rapidly build screen designs.
Modular Components
Larger, pre-built components such as headers, footers, and content zones used to build out a page within minutes.
Guidelines
Information around artboard/grid, spacing, icon usage, etc., to inform current and new designers of best design practices to ensure consistency across the experience.
Individual Component Examples
Design System Results
The Cardinal Health design system helped ensure consistency amongst a large group of designers.
It expedited the design process immensely, helping the team make progress and meet tight deadlines.
designers utilized the system
22
core design components
150 +
screens designed with system
400+
Phase 3: Screen Creation
Utilizing our new design system, the team moved into individual squads to build specific areas within the Order Express site. Working within an agile framework, I lead design work on the path to purchase squad. Our team worked on features such as search, product detail, cart, lists, checkout, and more.
Each feature was wireframed, designed, iterated upon, prototyped, tested, and ultimately sent to development for implementation.
Feature Examples:
Cart Page
On the Order Express cart page, users can see all items they plan to purchase. Each item has critical product information, a real-time stock indicator, and relevant drug alternatives.
The cart design and its various interaction states went through weeks of design revisions through working sessions with product owners, researchers, business analysts, and more.
Through user testing and research, the team found users wanted the ability to have a detailed and minimal product tile toggle. The detailed view provides robust information about a product, while the minimal view allows for quick scanning and comparison.
Lists Page
Users can access all of their lists on the Order Express lists page. From here, they can create a new list, change lists sharing preferences, and view information such as the total number of products and their cost.
Through user research and testing, we found that users spend much time on their lists, specifically using them to bucket products to convert them into carts.
This information prompted a change in the design to make lists harder to delete accidentally and provide users with the ability to add an entire list to a cart.
Search Bar
The search bar lives atop every page within the Order Express experience. Here, users can access a criteria selector to narrow their search, find product recommendations and generic alternatives, and access related content based on their search.
Through user testing and research, we found that participants wanted a more forgiving and accurately indexed search to guide them to the right products. They also liked the idea of having a universal search bar with additional functionality outside the typical search bar experience.
