Grainger.com Mini-cart & Checkout Wireframes

Fagan contracted with Grainger.com as Senior User Experience Architect. She created wireframes for a subscription feature and for an award-winning persistent mini-cart and one-page checkout.


2015-11-23_16-34-40

Background

The Grainger.com UX management team challenged the its staff to create visions for different areas of the company’s website. Managers divided the staff into four teams, set a deadline, and the contest was on.

Result

Fagan led her team (Beluga Project: White Team 1) to win the contest by creating the best concepts for a persistent mini-cart and one-page checkout.

Grainger.com Persistent Mini-cart and One-page Checkout wireframes PDF 1031

Grainger.com Subscription Wireframes

Fagan contracted with Grainger.com as Senior User Experience Architect. She created wireframes for a subscription feature and for an award-winning persistent mini-cart and one-page checkout.


2015-11-23_16-31-43

Background

Grainger.com had contracted with an outside vendor to provide subscription functionality. Grainger.com required many more complex considerations than the vendor’s out-of-the-box functionality could handle.

Process

As her team’s most-experienced member, Fagan became the project lead. She worked closely with the business stakeholders. She made sure back-end developers vetted the designs. She insisted on usability testing. In three months, she delivered the final document containing user flows, architecture, page designs, and content.

Result

Fagan completed the project in the shortest amount of time in the vendor’s history. Grainger.com revenue increased dramatically following its Auto-Reorder launch.

Grainger.com subscription wireframes PDF 5874

Walgreens.com Prescription Value Card Wireframes

Fagan contracted with Walgreens.com as User Experience Designer and worked on the company’s online pharmacy. Wireframes were created in Visio, Axure, and Photoshop.


Walgreens.com

Overview

Years on development teams taught Fagan the laws of customer-centric design. Most assuredly, interfaces designed without user input fail. The interfaces she advocates are inextricably linked to the user’s or customer’s perspective. But Fagan has seen too many user-centered web designs that are good looking but technically impossible. Her coding background informs her wireframing process. She vets wireframes with developers, saving time and money.

Walgreens.com Prescription Value Card wireframes PDF 391kb

Walgreens.com Prescription Savings Club Wireframes 1

Fagan contracted with Walgreens.com as User Experience Designer and worked on the company’s online pharmacy. Wireframes were created in Visio, Axure, and Photoshop.


Walgreens.com

Overview

Years on development teams taught Fagan the laws of customer-centric design. Most assuredly, interfaces designed without user input fail. The interfaces she advocates are inextricably linked to the user’s or customer’s perspective. But Fagan has seen too many user-centered web designs that are good looking but technically impossible. Her coding background informs her wireframing process. She vets wireframes with developers, saving time and money.

Walgreens.com Prescription Savings Club wireframes 1 PDF 5014kb

Walgreens.com Prescription Savings Club Wireframes 2

Fagan contracted with Walgreens.com as User Experience Designer and worked on the company’s online pharmacy. Wireframes were created in Visio, Axure, and Photoshop.


Walgreens.com

Overview

Years on development teams taught Fagan the laws of customer-centric design. Most assuredly, interfaces designed without user input fail. The interfaces she advocates are inextricably linked to the user’s or customer’s perspective. But Fagan has seen too many user-centered web designs that are good looking but technically impossible. Her coding background informs her wireframing process. She vets wireframes with developers, saving time and money.

Walgreens Prescription Savings Club wireframes 2 PDF 1138kb

HSBC.com Home Page

Fagan was Principal Content Developer for the websites of global bank HSBC. The role combined writing web content with developing front-end code, two of her strengths. HSBC bought Beneficial.com and HFC.com, which desperately needed redesigns. The two sites were essentially the same but served different markets.


Before: HFC home page

Before: HFC home page

Background

Though the two websites were branded differently, Beneficial.com and HFC.com contained the same content. The brands were active in different states.

Challenge

Create an easy-to-understand, friendly home page that instills a sense of trust. Reduce visual noise and create a single point of initial focus. Place the “Find a Loan” feature prominently.

Result

With the home-page image and banner text, stakeholders felt the page was improved. Navigation was clearer. “Find a Loan” was prominent but not overbearing.

After: Beneficial home page

After: Beneficial home page

HSBC.com About Us & Advantage

Fagan was Principal Content Developer for the websites of global bank HSBC. The role combined writing web content with developing front-end code, two of her strengths. HSBC bought Beneficial.com and HFC.com, which desperately needed redesigns. The two sites were essentially the same but served different markets.


Before: HFC.com About Us

Before: HFC.com About Us

Background

HSBC acquired Beneficial and HFC, which had been losing market share to online and upstart mortgage companies.

Challenge

Differentiate Beneficial and HFC from competitors by highlighting the companies’ long histories, traditional values, and community service.

Solution

The About Us page became a multi-page section Advantage section. The home page banner image linked to the Advantage landing page. This is a good example of how information architecture can support branding efforts.

After: Beneficial.com Advantage

After: Beneficial.com Advantage