Design the Single Sign-On experience for Thermo Fisher's sign-in page

Role

UX Designer

Period

Q4 2019 - Q2 2020

Activities

Design sign-in flow, design screens.

The challenge

The previous sign-in page of Thermo Fisher Scientific (TF) did not support users to use their company credentials and be able to sign-in and purchase at TF. As part of a new feature release, the sign-in page should be able to support regular users that created an account at the TF site and, users that uses their corporate credentials as a regular one.

Here are some questions that we had:

  • How can we have one single sign-in page that supports SSO and regular users?.
  • One design that supports different world regions.
  • How might we present the benefits of creating an account in a more precise way?.

My role

I worked closely with the Product Manager (PdM) and the Product Owner (PO) of the project. We discussed the purpose and goal of the feature, reviewed technical constraints, and for the design. Also, collaborate with the development team to clear questions and provide assets.

Process and solution

Everything started with a couple of meetings with the PdM and PO, we reviewed the current state of the sign-in page and also, checked a couple of sign-in screens that the previous designer of the project worked.

Previous version of the Sign-in page.

Previous version of the Sign-in page of Thermo Fisher Scientific.

I did a quick benchmark and read about the best practices for SSO, then I sketched and designed a few versions of the new sign-in page (around five different versions).

Sketches of the first explorations I did in my notebook.

Sketches of the first explorations I did in my notebook.

In a meeting with the PdM and PO, we reviewed the comps, all of my proposals were a simple two-step flow, first capture the username/email, then the password (if the user is using their corporate credentials).

I received feedback and also discussed the need to display the benefits of creating an account; we agreed to add the benefits due to some business agreements.

For the second iteration of the design, I sketched and explored some variations of the sign-in page with the benefits on the side, kind of the same previous design but we cleaned-up the content.

Sign-in page, where the user captures their username/email.

In the first step, the user captures their email/username, if the user is B2C, they will need to capture their password in step 2.

Second step of the sign-in page, the user captures their password.

Second step, the user captures the password.

After deciding the final version of the new sign-in page, I started working with the PO on the different translations and variations of the sign-in page for the rest of the regions. I found a couple of design challenges and try to adapt the sign-in page for different languages like Japanese, Chinese, and Korean. Also, some regions display different information on the benefits section.

Sign-in page, where the user captures their username/email.

Japanese version of the Sign-in page showing different benefits.

Outcomes and lessons learned

This redesign was a big challenge, it might look simple to create a sign-in page for 1.4 million users, but in context, the sign-in page is the main entrance of the site and needs to be super clear and unnoticeable to pass through. Also, I learned a lot of technicals constrains and learned about designing on a global scale.

Now in my process, I added a new step of knowing the differences of the language and what are the different business decisions for all the regions; this can play a significant impact on the design solution.