NFM.com Redesign

With nearly 300,000 products in dozens of unique categories in four different regions, NFM.com consistently faces the challenge of telling a clear and concise story without overwhelming the user.

While preparing for a platform migration to Salesforce, the eCommerce department wanted to adopt more modern, reusable approach to content creation and visual merchandising.

Along with a visual update, the code was overhauled to increase site speed and support ADA accommodations and SEO Best Practices.

Strategy

Previous to the update, a graphic designer built each homepage experience independently void of any data. The approach for redesign was to apply a more holistic approach.

Redesign Goals:

  • Create a reusable Design System that allows the Site Merchandising team to control their own content without a Web Designer.
  • Establish best practices to guide the Marketing team in constructing a clear storyline for promotional messaging.
  • Eliminate friction throughout the buyingfunnel using well placed UI elements to increase conversion.
Heatmap of user interaction on nfm.com homepage

Development & Design

The design focus transitioned from promotional messaging to merchandising built around customer mindset.

Research:

  • Performed extensive competitor analysis to evaluate common UI patterns, merchandising strategies and new technologies.
  • Aggregated web analytics using Google Analytics and Quantum Metrics in order to gather a clear picture of user behavior.
  • Directed stakeholder workshops for brainstorming, requirements gathering, and prioritization.
  • Conducted several A/B tests using Adobe Target to assess the impact the content design elements had on conversion. Tests included content layout, typography, color usage, CTA verbiage, and messaging heirarchy.

Design:

  • Designed low to high-fidelity mock-ups and built protoypes in Adobe XD.
  • Led comprehensive reviews of interface experience with stakeholders.
  • Expanded the existing Style Guide to include updated styles and aesthetic.

Development:

  • Developed a Responsive Component Library including 30+ reusable, rich-text templates using HTML, CSS, JS and Bootstrap.
  • Restructured the semantics of the code to support ADA compliance and increase SEO value.
  • Reduced the HTML file by over 70% with 20% more content.

Team Onboarding:

  • Wrote best practice documentation to ensure all teams were able to easily create web assets optimized for conversion, ADA compliance and SEO. This also included Vendor Spec Sheets and training.
  • Evangelized test findings through presentations, documentation, and training.
  • Taught site merchandisers to write HTML to aid in creation of web assets using the new Component Library.

Before

Melissa-Ann Dailey smiling with crossed arms, wearing a tan suit jacket on a blue background

After

Melissa-Ann Dailey smiling with crossed arms, wearing a tan suit jacket on a blue background

Results

The Homepage Redesign project propelled the eCommerce team to restructure content creation and ownership.

By taking an antiquated process from a single graphic designer to ten highly specialized site merchandisers with a data first approach, all content created is now optimized.

Developing best practice documentation greatly reduced team and vendor onboarding times.

Changes also greatly increased site conversion.

  • +39.36% Click Through Rate
  • +31.26% Page Value
  • 87% Faster Average Load Time
Melissa-Ann Dailey smiling with crossed arms, wearing a tan suit jacket on a blue background

Let's Connect

I'd love a chance to collaborate or have a friendly chat.

m.anndailey@gmail.com

^