Grainger Registration

 

Grainger: Registration

Role UX Visual Designer | Contribution UX / UI Architecture & Visual Design, Usability Research

 
smartmockups_jtf2xjuv.jpg
 
 

About the project

One of the big initiatives on the manage team has been to redesign Grainger’s registration process. The original process was outdated visually and according to customers, confusing to navigate. We wanted to update the user experience, align the product to the style guide and give it a more modern look.

My role

For this project my role was as UX Visual Designer. I closely partnered with a UX Architect and several researchers from start to finish. As a UX team we performed a heuristic and user interviews to identify problem areas. I then met with the architect to talk through the problems and create solutions for reorganizing and eliminating unneeded information.

 
 
Registrationbefore-after.png
 
 

Process

Our first step was to conduct user interviews to find the spots that were causing trouble for our users. Research showed that our biggest problem seemed to be overwhelming users with too many options, asking for too much personal information, and some general form functionality problems. We worked with teams all over the company to see what information we could eliminate or move around.

The outcome was a slimmed-down and visually updated experience that moves the customers through the process in a much more intuitive way. In only the first couple of months, registration conversions saw a 15% lift and that number continues to rise as we work on making registration even smoother.

 
 
Registrationvisual.png
 
 

Visual updates

An informational heuristic of the legacy registration process brought back memories of the early 2000’s. There was a lot of up-front information, some out-dated illustrations (that were actually buttons in disguise) and no way of knowing how long your were going to be stuck filling out this form.

My overall visual plan for the project was to simplify and create transparency because no one wants to waste precious time filling out forms. My first step was to introduce a progress tracker. A visual representation of the length reduces the perception that it goes on forever. My second step was to land the users directly on the form. The user shouldn’t have to guess where they belong, we need to help them get there. Finally, as a team we wanted to provide helpful tips along the way without being in your face. Descriptive text, tooltips and fly-outs are there to help but only if they are needed.

 
 
smartmockups_jtf3gx1k.jpg
 
 

Mobile registration

Prior to the re-design of the registration flow, users were not able to register via their mobile devices. This project gave us the opportunity to make the product responsive. As I was designing the mobile screens for registration, the mobile team was also building out a responsive style guide for our mobile platforms. We worked in tandem to capture the components and styles I was creating so they can be implemented in future responsive projects.

Due to business requirements, this project was built desktop-first and mobile second. This brought up a number of challenges (radio buttons, legal copy, tool tips) and ultimately we had to go back into the desktop wires and comps to make adjustments.

 
 
+10%
— Registration conversions
3,800,000
— Additional monthly revenue
+30%
— Completions with LOC offer
 
 

Results

The overall updates to the registration process including guest checkout registration improvements and new user email updates have shown great conversion. Registration conversions saw a lift of around 10% equating to about 3.8 million of additional monthly revenue. Our guest checkout registrations also improved about 10% and simply adding an informative and user friendly line of credit offer on the last page of registration boosted competitions by 30%.