2020 Magento 1.0 Migration to Commerce Cloud

When Comprehensive User Testing Leads to a Website Migration — and a Significant Boost in Conversion Rates

  • Job Title
  • Senior Web Designer
  • Research
  • Prototyping
  • User journey mapping
  • Competitive analysis
  • A/B testing
  • Design & Production
  • Low fidelity wireframes
  • High fidelity prototypes
  • UI & UX Design
  • Brand Styleguides
  • Dev documentation

The Scenario:

Imagine that you're the CEO of a well-established brand with over 20 years of delivering high-quality products and excellent customer service.

It's late 2019, and things look good — projections are strong, and business feels steady. Then your in-house UI designer presents critical findings: Despite the platform serving your business needs, it's falling short for your customers. User data reveals a troubling trend — mobile usability issues, buried products, clunky promotional workflows, and an outdated platform on the verge of end-of-life.

Staying the course could risk not only lost sales but also long-term brand damage. A website migration becomes not just a good idea — it's essential to normalize your shopping experience. So, you decide to act fast and tell your team to get to work.

The Brand

Vermont Teddy Bear
A beloved plush toy company selling premium stuffed animals for kids and adults.

Todd's Role:

As the sole in-house UI designer, Todd owned the end-to-end design responsibility:
From research and strategy to execution and delivery.

The Team:

Todd worked in collaboration with in-house graphic designers, merchandisers, marketers, and external development partners.

A Brand Is More Than Its Products — It's the Experience

Initial Research:

In early 2019, Todd led a comprehensive review of user behavior on the site, which was hosted on Magento 1.0.

Data Collection Methods

  • A/B testing
  • Hotjar heatmaps and user session videos
  • Competitive benchmarking

Key Pain Points Identified

  • Whimsical design touches distracted users and hurt conversions.
  • The CMS structure made running marketing campaigns slow and frustrating.
  • Mobile experience lacked fluidity and responsiveness.
  • Overwhelming main navigation with too many options.
  • Poor product discovery due to weak category filters and navigation.
  • The gift customization process was confusing, with too many steps.
  • Homepage layout limitations increased bounce rates.
  • Checkout flow had too many friction points.

Overall Takeaways

  • The brand needed a modern, consistent, and mobile-optimized shopping experience.
  • Desktop users were converting better — but mobile traffic was growing fast.
  • A migration was needed to maintain performance and meet rising customer expectations.

Proposing The Project:

With Magento 1.0 reaching end-of-life and user research highlighting critical usability issues, Todd proposed a platform migration.

Requirements for the New Platform:

  • Robust mobile capabilities
  • Flexible homepage for marketing and merchandising
  • Streamlined gift experience
  • Improved discoverability
  • Support for branding without sacrificing performance
  • Better site management tools for internal teams

Conceptualization:

After analyzing the competition and evaluating potential platforms, the team selected Salesforce Commerce Cloud. The platform's success team contributed valuable insights, helping reshape the UX from the ground up.

Top Redesign Priorities:

  • Preserve loyalty by maintaining the brand's tone and visual language
  • Prioritize customer needs across mobile and desktop

Touchpoints Redesigned:

  • Homepage
  • Main Navigation
  • Product Listing Pages (PLPs)
  • Filtering System
  • Product Detail Pages (PDPs)
  • Gift Customization Flow
  • Cart & Checkout

The Brand Redesign Rollout

By early 2020, Vermont Teddy Bear had fully migrated to Commerce Cloud.

Key Improvements:

  • Homepage: Enhanced layout flexibility and multiple promotions increased product visibility — resulting in a significant boost in purchase totals.
  • Template System: Every major page was rebuilt with performance and testing in mind, enabling quick updates and marketing adaptability.
  • Cognitive Load: Simplified UI reduced distractions, creating a smoother, more intuitive path to purchase.
  • Navigation: Streamlined structure and improved filters allowed faster product discovery.
  • Templating Framework: Migration to Bootstrap introduced layout versatility and better mobile responsiveness.
  • Design System: A new style guide ensured visual consistency and brand integrity across the site.
  • Content Opportunities: Marketing slots were added across the user journey, from gallery modules to cart messaging.
  • Accessibility: UI now met accessibility best practices — improving inclusivity and usability.

Post-launch metrics told a clear story:

  • Mobile conversion rate increased by 38%
  • Cart abandonment decreased by 21%
  • Total online revenue grew by 33% year-over-year
Average Order Value

+ 15%

Conversion Rates

+ 20%

Final Outcome:

The redesigned site delivered a cleaner, faster, and more intuitive shopping experience. It modernized Vermont Teddy Bear's digital presence and laid a strong foundation for continued growth in a mobile-first eCommerce landscape.