Site Chrome

Objective

The site chrome encompassed the header and footer on desktop. It needed a visual update, reorganization, and standardization across all 6 Quidsi sites.

Problem

The headers on the 6 Quidsi sites had not been updated for at least 3 years, making them unoptimized and outdated. In addition, there was a disconnect between the site headers on desktop and mobile. This meant that the Quidsi brands were not as strong across platforms and we weren't living up to being a "modern technology company" like we claimed.

Each of the 6 sites also had its own visually distinctive (but functionally similar) header to match its own brand. This increased the workload for both Tech and UX any time changes were made to the header.

Solution

I redesigned a global site chrome template that met the following requirements identified by Strategy, Creative, Product, Tech, and UX:

Easily adaptable to the brand for each site with minimal differences (only in color and content)
Visually connected to the mobile and tablet headers
Shortened height to fit more above the fold
Ad zone for internal and external ads included, in an effective but unintrusive way
Modernized design

After drafting the new designs, I created prototypes and user tested versions of the site chrome. I used the user testing feedback to create the final design, and then wrote specs and documentation for the new site chrome.

With the designs ready, I led user testing for this project, taking charge of recruiting participants, drafting the test plan, moderating some of the sessions, and compiling a report.

User testing details:

Features tested: Site Chrome
11 moderated sessions
3 test versions: (a) Diapers full header (6 testers); (b) Diapers condensed header (3 testers); (c) Wag full header (2 testers);
Setting: Quidsi user testing lab
Participants: 4 non-customers, along with 2 Wag customers and 5 Diapers customers who made at least 1 desktop purchase in the last 3 months and 2 purchases in the last year
Halfway through the test, I moved the banner zone from the top of the header to the bottom based on initial tester feedback

Did users have trouble navigating?

Did users encounter roadblocks with the condensed navigation?

Yes, but the roadblocks were small. 2 of the 3 testers who saw the condensed navigation had no navigational issues, but 1 tester confused the "Top Brands" carousel on the homepage with navigation. She asked, "Why not show me categories first instead of just brands?" Of the 3 testers, 1 liked the collapsed categories, 1 liked categories to be exposed, and 1 commented that "collapsed is fine if you just get used to it."

Actions: Even though there weren't big navigational issues with the condensed navigation, the Strategy team decided against it in favor of displaying all the categories up front to demonstrate the breadth of selection. Especially on diapers.com, the team feared that new customers would assume that the site only sold diapers.

How did users respond to the banner zone (internal and external ads)?

4 out of the first 6 testers, who saw the the banner zone at the top of the header, did not notice it. 2 of the testers commented that they perceived the blue bar to be the top of the page and ignored the content above it. One tester said that the zone "was small, hidden, footnotey...it feels tricky."

In the response to the feedback, we moved the ad zone to the bottom of the header in the middle of the test. 4 of the 5 remaining testers noticed the zone and had no problems with it. 1 tester commented that she typically looks at the internal ad zone "to see what the specials are" and confirmed that the zone was "an area of the site I normally would click."

Action: I moved the ad zone from the top of the header to the bottom of the header. This design change was validated in the second half of the tests.

Was it alright to condense the links to the other sites under the "Shop Our Sites" link?

No, 7 out of the 8 testers who saw the full navigation with the "Shop Our Sites" link had difficulty finding the link to our other sites, commenting that it was discreet and buried. 5 out of the 8 testers - 4 customers and 1 non-customer - brought up concerns that the other sites are not discoverable for new customers.

2 testers felt strongly about the other sites being exposed, saying that shopping other sites is very important. However, 2 other testers also commented that while the Shop Our Sites link took a while to see, they would be able to use it now that they know it is there.

Action: There were clear navigational issues with the "Shop Our Sites" link, but we did not have enough data to determine the business importance of navigating to the other sites. The analytics team was in the process of putting tagging in place to track the number of clicks to other sites, and in the meantime we planned to release the new header with the "Shop Our Sites" link as is and observe. If the links to the other sites needed to be exposed, they could easily be added to a new row at the top of the header.

Was it alright to eliminate the checkout button, help link, and phone number from the header?

Yes, no testers had any trouble with cart and checkout, which validated the decision to remove the checkout button from the header.

For help, testers naturally scrolled down to the footer, though 3 out of the first 6 testers had trouble finding the phone number in the footer. After modifying the footer to take the phone number out of the blue bar, the testers no longer had any trouble. During debrief, 6 out of 11 testers mentioned that they would like to see the phone number at the top. "The phone number should still be at the top, then you don't have to look at all." One tester also commented that seeing the number more prominently makes you feel like "the company is willing to talk to you on the phone."

Action: There are no usability issues with moving the phone number to the footer, but I added the phone number to the My Account dropdown under the Help Center link.