B2B Login Component

Design Research | Visual Design | Front-End Code

Background
This project originated from a session timeout issue. The timeout resulted in customers being unaware the system logged them out, not seeing their prices on the site, and getting extremely frustrated based on the feedback received. An aspect of the business model is custom pricing for each customer at the discretion of their sales partner. Any transaction on the site required a business account.
At this time, they could only log in using a dropdown in the navigation. When their session timed out, it was not immediately apparent to customers that the system logged them out.
Approach
Discovery started by collaborating with key stakeholders in product, marketing, and operations to align on outcomes for this work. Any changes to the site would impact marketing and business metrics. Next, I engaged Engineering to understand the technology driving sign-up and log-in behavior and the options to address this. Finally, I performed a competitive analysis with companies in the B2B commerce space and explored Baymard's library of insights.

The result was a recommendation to immediately adjust the session time and introduce a "before logged in" state for the homepage with a log-in component paired with a branded message.

The outcomes we targeted were:
  • Communicating clearly to the customer they were not logged in
  • Presenting a straightforward way to log in
  • Driving an action towards account sign-up for new users
During the design process, I iterated through multiple design versions. The interaction design involved wireframing a complete homepage overhaul for the "before logged in" state, exploring different ways to communicate the value of Ferguson.

Visual design followed next, exploring how to communicate to the user they need to log in. In addition, I wanted to elevate the Ferguson brand on the homepage using intentional copy from marketing, simple typographic hierarchy, and clean illustrations.

While exploring, I crafted a radical approach to the problem which I presented to marketing and operations. The design broke away from traditional e-commerce patterns by removing the navigation and search bar in the header. The hypothesis behind this decision was that by removing the header elements, customers would follow the ideal path of creating an account or logging in.
Outcomes
Our efforts achieved a 95% reduction in negative feedback on incorrect pricing. Our approach eliminated the need for customers to log in again in a session for most sessions, and the new home page successfully drove that initial log-in.
The radical design focused on the home page being an acquisition channel. The new design sparked significant debate and resulted in a different strategy for customer acquisition that used our Industry pages.

The change in strategy for the homepage meant we only rolled out the hero and the "Where We Serve You" sections.
Aha! Moments
  • The project demonstrated the value of collaboration between departments and alignment on outcomes for the work.
  • Challenging the team with different approaches to the problem yielded great discussions that informed new strategies.
  • The updates to the site put a spotlight on additional entry points for customers, like the product detail page, where logging in is necessary for a positive experience.