The American Medical Association
Bringing the AMA's Sign-In Experience into the Design System
To access digital products such as the Journal of the American Medical Association the American Medical Association offers free accounts to its users. Users create and access their accounts through the single-sign-on portal.
My role
Visual & UX Designer II
Duration
4 weeks
Team
Other UX designers: M. Ivy, J. Pencak; Product Manager: S. Raza; Developers: E. Horne, J. Contreas
Scope
Visual Design, UX Design
Audience
Physicians, Residents and Medical Students
Background
The AMA created the single-sign-on portal to help users access all the AMA’s digital products. AMA’s digital products are all built on different platforms. Before I started working at the AMA, users had separate logins for each product. To remove the burden of the user having to store that much information, the product and IT teams came together to create a unified single-sign-on experience.
I'm part of the enterprise product team. One of the main goals of our team is to unite all AMA digital products under the AMA umbrella through product and design consistency. To achieve that goal, we created a unified design system with the help of a consulting designer. Since every AMA product connects through single-sign-on, the SSO portal was a critical piece of the puzzle.
Design System Cover Thumbnail designed by my teammate J.Pencak.
The Challenge
The single-sign-on product team came to our team with a request to add new functionality. They wanted to help doctors recover their accounts that they had originally set up with emails they had lost access to. The single sign on product was not consistent visually with the rest of AMA's products as it was built long before we composed our new design system. So I decided to use this project as a proof of concept to show what it would look like if we updated the single sign on system to our newly styled components. Our director, the director of product approved of the idea, turning this small feature request into a full UI redesign of the SSO product.
Prior single-sign-on landing screen with elements changed highlighted.
The System
Checkbox component designed and created by me to match the new styles in our design system, created for reuse.
Typography standards for the new design system which pulled Kepler Std, a brand font, into our repertoire.
The Approach
For this project, I conducted a quick audit where I identified the single sign on components that needed to be updated, almost all of them. Since the original sign-in screen needed a toast as a part of the initial project, I went ahead and reviewed the data we had on that screen. I also looked at heatmaps and user journeys in Quantum Metrics. Heatmaps showed username/email logins exceeded social logins, prompting a layout switch. To be safe in switching the layout, we conducted an A/B test, which is still ongoing.
Heat map over older sign-in experience.
Component Mapping
To help the developer apply changes to the entire flow, I provided him with reference screens and asked him to apply them to the rest of the product. That way I didn't have to redesign every screen. The specific components we updated included the type, the buttons, the form inputs, contextual links and navigational links, radio buttons, checkboxes, toasts, and icons.
This project led to a new stepper component being created for this project and the spacing being immortalized in our design system. The SSO product still follows our 7px grid. The outer margins are a deliberate exception to the system. They are set to keep the modal above the fold, a product requirement specific to SSO.
Spacing artifact created to add to design system.
Accessibility Features
Accessibility is a standard part of my process. The callouts below highlight specifically how the design system being applied improved accessibility to another branded instance of the product.
The new design system applied in the branding of other products to show that they can mesh well along with annotations of accessibility highlights of the new design system.
The Handoff
Once the developer implemented changes based on the main screens that I gave him, we used the UAT process to nail down any final changes. I made a figjam board where I pointed out what work still needed to be completed. After that we hopped on calls to work out any mismatches between the designs and the front-end experience.
Figjam board created to communicate changes to developer.
The Impact
Since launching the updated designs, 84,291 users have logged in across 135,377 sessions with 100% completion, and the SSO experience now matches AMA’s enterprise products while adding new components and spacing guidelines back into our design system.
Reflection
This project went really far as far as collaboration between design, product and development goes. If something needed attention we were all quick to hop on a call and work out the issue. However, we aimed for MVP fixes so not everything asked for was implemented. There's still some differences between design and whats live, so I hope we revisit this project in the future. I also missed some details during UAT, so in the future I would like to have better attention to detail and maybe a checklist of what I changed.
84,291
Users Logging In
135,877
Total Logins
100%
Login Completion