UX & UI Design
The site chrome encompassed the header and footer on desktop. It needed a visual update, reorganization, and standardization across all 6 Quidsi sites.
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.
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.
Research & Competitive Analysis
I conducted a thorough review of the site headers and footers for our top 25 eCommerce competitors to uncover navigation best practices.
I explored multiple versions of the site header, including an ultra-condensed view (similar to a mobile header).
With the designs narrowed down, I led user testing to gather feedback and make sure that there were no usability problems with the redesigns.
To make sure that the creative and ad teams understood how to use the new ad zones and adhered to the aesthetic of the new header, I drafted instructions and guidelines.
Key Design Elements
Links to other sites
In the existing header, the links to the other 5 sites took up an entire row. Now, with a decreased emphasis on driving users to the other sites, the links didn't have to be as prominent. However, they still had to be easy to find, and the connection to the other sites still had to be clear.
Increasingly, many large eCommerce companies are placing category links under hamburger menus instead of displaying them in a row in the header. In the quest to simplify, this is an alternative that I explored.
Internal & External Ad Zones
The Advertising and Strategy teams required internal and external ad zones in the header so that they could be seen on all pages. I aimed to minimizing the intrusiveness of these zones while maximizing their effectiveness.
Below is a sampling of the design comps that I produced for the site chrome. I played with condensing vs. displaying categories and the links to other sites, and I experimented with varying the prominence of each element.
Comp A: Variation on the current theme
Comp B: Centered and clean
Comp C: Utility row on top
Comp D: Ultra condensed
Ultimately, the team decided on a variation that included elements of Comp A and Comp B.
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
Questions that I sought to answer:
Version A: Full Header
Version B: Condensed Header
Before & After
Diapers Header Before
Diapers Footer Before
Diapers Header After
Diapers Footer After
Part of the project was redesigning all of the flyout menus to fit the new headers.
Category Flyout Menu
The new flyout menus are standardized across sites and easier to customize with full-column images and column background colors.
Other Flyout Menus
- My Account menu (not signed in)
- My Account menu (signed in)
- "Shop Our Sites" menu
- Baby Registry menu (only for Diapers)
The final site chrome design is easily adapted to each of the 6 sites. Only a change in brand color and content (the categories and the internal and external ad zones) is necessary.
To make sure that the site chrome was optimized for desktop screens of all sizes, I created variations for the top 3 breakpoints: 990px, 1280px, and 1500px.