VMS Migration

Clorox VMS portfolio includes 4 separate brands that were built on separate front-end and back-end platforms. As a way to unify the user experience and improve efficiency of content management, the business will bring all 4 brands under Magento full stack.

Thumbnail of landing pages
Year
2020
Responsibilities
Design system, Information Architecture, Interaction, Testing
Outcome
Average of 128% increase in revenue

Problem

The business needs to unify the user experience and improve efficiency of content management for all VMS sites through full stack migration.

Understanding the requirements

Overall, this project isn't overly complicated. There are things that must be changed as well as those that will be directly migrated over from the old site.

  • Content
    The content from the old site will be directly migrated over to the full stack site. This includes copy, images, icons, and etc…
  • Layout
    The layout will need to change depending on the limitations of Magento front end.
  • Timeline
    All 4 sites will undergo redesign, and re-platform within a 3 months timeline.

The challenge

The biggest challenge is the timeline. With only 3 months for design and development, it is the tightest schedule we’ve experienced. The design timeline is 3 weeks for all 4 sites. The faster we can complete the designs, the more time the engineering team will have for development and bug fixes. Just how will a team of 2 full time product designers and a part time contractor be able to redesign 4 sites in 3 weeks?

The approach

The team knew there was no time to conduct user research with the amount of time we had. We had to find a way to improve the old site’s user experience on top of the design process.

  • Utilizing tested UX/UI patterns
    We utilized an out of the box Magento UI kit called “Luma” as the foundation of our design and modified it to our needs instead of designing from scratch.
  • Componentize recurring patterns
    Making sure to convert all recurring patterns as a master component. This allows us to only make one change and it will automatically update all the pages that contain the copies of the component. This prevents cases where we have to manually update layouts across all pages.
  • Consistent styling
    Having the same number and levels of text styles will allow synchronicity between all 4 brands. Instead of having to match them manually. All of the font sizing will be predetermined before committing it to a style.
  • Auto layout
    While some people may find auto layout frustrating to use. This is one of the features that will save us a lot of time. Instead of adjusting pixel by pixel, we can essentially drag, drop, or change order of components with ease.

Text styles
Component library

Owning the component library

Like all other projects, there were cases where changes were requested or we needed to pivot. One of the most frustrating instances was disconnecting components from the master to make edits. We quickly learned that while having almost everything componentized does restrict some design freedom, it is not worth it to detach the component from its parent. It requires us to painstakingly search for that point of disconnect and repair it.

We agreed that one designer will own the master component library and be the keeper of its integrity.

Diverging paths

All 4 brands will look almost identical at launch. This is intended to speed up the design and migration process. The plan is to add and improve on all 4 sites separately as we test new features. With time, all 4 brands will diverge and have enough diversified features and campaigns that will give them their separate identities.

Take a breather

Having a system in place, we managed to push all 4 sites across the finish line just before hand off date. It was not an easy task, but we learned to roll with the punches and create efficiencies where we can. With all the intense labor out of the way, we were able to finally take a breather and have a constructive retro.

Renewlife site
Rainbowlight site
Natural Vitality site
Neocell site

Growth

While CVR and AOV initially dropped due to the migration, the growth pattern have since picked up. Up to date, all brands are outperforming initial revenue projections by an average of 128%. The business is projected to continue on that growth path into FY23.

Future iterations

While most will consider this a rush project, but the the team understood that the objective was to launch the V1.0. What follows will be a series of test and learn iterations. Fast forward to present day, there's been many iterations made on all 4 sites ranging from better checkout experience, diversifying subscription options, to omni-channel marketing experiences. The learnings will continue as we conduct more controlled tests to inform our business and design decisions.