Bluemix Registration, Login & Logout IBM
User Experience & Digital Design (Desktop, Tablet, Mobile) — Case Study
Project Description

The first entry into any product is first your marketing page's, and then your registration experience. Since we don't have much control of the marketing page's, my team decided to focus on the parts of Bluemix we could influance. Namely the registration, login and logout flows for IBM Bluemix.

Ideally when you go to a website to learn more about a product or service the experience from learning to registering is consistent, both in look and feel but also in color palette, icongoraphy, typography etc. However due to the size and scale of IBM the registration & login process is it's own business unit. So to influance the design and functionality for a new registration we had to work closely with them.

The initial registartion experience
At IBM registration & login are actually handled by an entire different division. This is an example of how their registration pages look, and what Bluemix use to look like prior to me joining the team.
The initial attempt at a short term fix to bring the regirstation experience closer to Bluemix was executed by Katie Orenstein where she worked with Engineering to update the color palette and spacing.
Finding a better solution for registration & login

When we where approached by IBM ID to help on creating a better experirence, we'd already had a few ideas mapped out as our ideal expeirience that we where creating for a new flow for a first time user coming int Bluemix. Over the course of a week we worked with the IBM ID team in Austin, Texas to white board and sketch out a few ideas. We also had engineering with us in the room which speed up a few things, mainly the feesibity of it all.

The biggest annoyances with the then current registration and login flow was that it wasn't optimized for mobile or tablet experience. It was tied to an outdated system that took forever to get a user in the door and it wasn't branded Bluemix so when a user came into the product for the first time, they landed on either a white registation page that said IBM ID, or a page that wasn't ideal with the limited CSS we could change.

Unfortunately I do not currently have documented examples of the initial wirefames nor the whiteboard sessions we did to come to an overall solution.

Registration Desktop + Mobile
Final Registration Page (images from the test server)

The IBM ID team is still working out some of the kinks in the back-end system before the page is ready to go live, but the new page is gaining a lot of positive response from both user testing and internal products that have their services on Bluemix. This will not only help us to get users in the door quicker but also allow service providers a better experience for selling their product.

The biggest take away from this whole experience, is that registration use to take up to a few hours to complete, with the new registration flow it should take a few minutes and they will be placed into the product upon completion.

Hi-Fi Design for Registration
When you first arrive on the Bluemix registration page, you'll see all the required fields you'll need to complete but the only field that is availbe to input is your email address.
Hi-Fi Design for Registration
Once you put in a valid email address, the rest of the form fields release and we've also triggered an email with a code to be sent to you.
Hi-Fi Design for Registration
The last step in this form is to input the seven digit code we've sent to you. Ideally in future releases we'll have a direct "Open Gmail or Yahoo" link that will open your email box, to the specifc email so a user does not get distracted by other emails or other task.
Fixing Registration is only half the battle

Now that we had fixed the registration flow and made an overall better experience for the user that is more consistent, quicker and easier to use. We also needed to fix the login and registration experience. Both these pages had the same issue as the registration, non-branded experiences that left the user confused on where they where.

Bluemix Login Page
The login page was a simple fix to carry over the same UI elements and colors.
Bluemix Logout Page
For Logout, we incuded a logging out graphic via an animated elipses, and then confirmed that you had actually been logged out. After 10 seconds the screen would redirect back to the main landing page. We added a slight "delight" element via the Good Day, Good Morning, Good Evening text that changes based on your system time.