Summary

We needed a login portal for multiple products/services, so I was asked to design an SSO flow that could do so, and to create a style for it that worked for the different brands. We were careful to make sure we were properly educating users on our services, informing them of what type of account they were making, and what it could be used for. We also had some unique edge cases that needed to be accounted for. We went live in 2023 and, despite a couple hiccups, currently have a flow that onboards users efficiently and with minimal support calls.

Challenges

One of my first tasks upon joining CogSmart was to design a single sign-on flow that would unite our two main products: BrainSuite and BrainUp. We faced two big challenges:

• We had users entering our ecosystem from various channels with different goals and different levels of understanding. We needed a one-stop portal that could educate and direct all of our users.

• Aesthetically speaking, the two products don't have a whole lot in common, so we wanted to create a look that wouldn’t feel out of place to users directed from either one, while also not clashing with our corporate branding.

Role & Team

I led this project and handled design, from wireframing to handoff. I was briefed on the problems and requirements by our Product team and worked closely with two developers in designing the components.

As always at our company, this was a highly collaborative effort, so although I was the sole designer I received feedback and valuable insight from all of our teams.

Approach

Users

Our users come from one of two products:

• BrainSuite, a brain MRI analysis tool that gives users a report on their hippocampal volume and information on improving the health of their hippocampus. Having a smaller hippocampus has been shown to correspond with an increased risk of dementia. Users would scan a QR code on the report they receive at the hospital and be directed to MyPage, an online dashboard to get more details on their report, view their brain in 3D, read content, etc.

• BrainUp, a mobile fitness app that works alongside BrainSuite, coaching users on how to perform a specific type of cardio exercise that can help maintain maintain (or even grow) the hippocampus.

The majority of these users are Japanese adults in their 40s and 50s who either have dementia in their family or are health-conscious and curious about their brain health.

Components

Our dev team had already been using React and MUI for various projects and they were all familiar with it, so we opted to use M3 as the basis for our components and guidelines, which I modified to adhere to our branding.

User Flow

What we needed was a simple SSO that let users login or create an account, with a few modifications to fit our unique brand and products, and that was it.

Or so we thought.

Challenges

The design and development phases ended up being pretty straightforward and easy, but we soon noticed a couple problems as users started using the new portal, and some complaints came in.

Wait, we actually don't want new users?

One of the biggest challenges we ran into was users who were onboarding too early, and who didn't fully understand our product or how it works.

We had set up convenient links from our homepage to the SSO (titled MyPage), so that any user could access it easily and quickly, whether to login or to create an account. But what we hadn't anticipated was that users would be creating an account BEFORE they signed up for BrainSuite, which resulted in them having duplicate accounts:

• User sees an ad and comes to our site, clicks on MyPage

• User creates an account

• User then signs up for a BrainSuite exam (which cannot be done from MyPage and so is not linked to their account)

• After taking BrainSuite, user scans the QR code on their report, and logs in with the temporary credentials printed on their report

Following the above flow would result in a user having two accounts: the one they created when they first heard about BrainSuite, and the account that was created for them at the hospital at the time of their exam.

To remedy this, the following changes were made:

• Created a "merge account" function that would prompt a user if their MyPage account was empty. We supposed that if a user was confused as to where their result was, it might be because they were logging into their original account, not the new one with their exam data. By clicking "merge account" they would be guided through locating their temporary credentials, logging in, and moving their data to their account.

• Made "login" the default action on SSO.

• Added short explanations and tooltips along the flow to improve user comprehension.

Clarifying the task start and end points

Another special case occurs at some of our client hospitals and clinics which like users to make an account in the waiting room before their exam. This is the case at facilities that accept vouchers sent out to our crowdfunding supporters, as they need to enter their ticket numbers in before the exam. They're told to scan a QR code on their phone, which takes them to our SSO page.

The problem, however, is that the reception staff at these clinics aren't always well-versed enough in the product to know exactly what is required, or even why this step is necessary to begin with. This meant that this task needed to be clearly explained to the user, and that adequate feedback was required when the task was complete.

Our solutions to this were:

• Make this a unique QR code that takes users to a modified version of the SSO flow that has:

  • "Create account" as the default option

  • A modified confirmation screen at the end of the flow that tells users they may now close the tab

  • An option to enter a ticket number to accommodate crowdfunding supporters

  • Slightly different instructions

Results and Impact

We went live in Fall 2023, and, save for hiccups due to edge cases like those above, have been largely complaint free. Updates are being made on a regular basis as more and more unique use cases become known, and new business schemes and products are added.

Next Steps

In order to acquire data on drops and usability issues in the various SSO flows, I suggested to our marketing team that we set up some analytics, which were installed post-release and are currently collecting data.