Introducing shade variants and a digital “try it on” feature—all while optimizing UI + UX for the e-commerce checkout flow.



Rodan + Fields had a convention coming up in September 2018 where they would be announcing their newest collection, the Dermacosmetics line—a dermatology-inspired line of skincare products that have immediate complexion-perfecting results. The first product would have 6 shade variants—the first of their kind at R+F—and would need to be seamlessly integrated into the responsive web designs from product introduction through product checkout. In addition, there would be the new functionality of being able to virtually “try on” the various shades.

As the UX Designer leading these efforts for the Convention 2018 team, I worked closely with the senior director, product manager, and developers of the Digital Product Experiences team to not only ensure that the new variant designs and the new “try it on” feature were intuitive and feasible within the project scope, but that they were also aligning with the new design system that was in the works of being refined.

After 4 months of testing and iteration, we successfully launched the new features and Dermacosmetics’ Radiant Defense at Convention 2018, which had over 14,000 attendees! Read on to see the final deliverables.




Since their focus has always been on skincare, Rodan + Fields’ newest Dermacosmetics line would be the company’s first line of products to have a cosmetic variant.

Introducing this line brought the challenge of finding the right UI + UX balance in integrating two new features: picking a shade variant and being able to virtually “try it on." My team and I worked on the company’s responsive e-commerce web designs over the course of 4 months.


Rodan + Fields is an American manufacturer and multi-level marketing company specializing in skincare products—they are most known for creating Proactiv back in 2002. Their current business model utilizes independent consultants as the distributors of their product, and are being sold in the United States, Canada, and Australia. Having made $1.3 billion in sales in 2017, R+F continues to take the title of being the #1 skincare brand in North America in terms of dollar sales in the skincare industry—surpassing longtime leaders Neutrogena and Olay, according to Euromonitor.


I was given the task to optimize the integration of shade variants and a virtual “try it on” feature that would allow users to pick and virtually try on their shade of choice.  The challenge was that I needed to seamlessly integrate these features into a user flow that made sense from both business and customer standpoints, while also making sure it was aligning to the rest of the R+F brand aesthetic.


I worked closely with the senior director and product manager on the Digital Product Experiences team to execute the project from ideation to final delivery.  As the only designer on the Convention 2018 project, communication was important to ensure that visuals were aligned with the rest of the brand’s design system and that I had the extra eyes and guidance from the company’s core UX team. My responsibilities included:

  • leading the design direction for R+F digital products to align with the Convention 2018 experience

  • ideation, wireframing, & prototyping

  • partnering with product managers and engineers to ensure design feasibility

One thing I had to keep in mind was that the platforms used between countries were different, so the functionalities and limitations varied as well. The United States platform was significantly different from the Canada & Australia platform, so it was essential that there was constant communication with the rest of the team to make sure I was designing with the right restrictions in mind.




In order to start designing for these features, I had to familiarize myself with the different platform limitations for the different country regions that R+F was selling in. Once I did that, I was able to begin the ideation and wireframing process.

The following images showcase how the e-commerce site looked before the launch, the designs that were explored, and the final deliverable post-convention product launch. My task was to create a template that could be used for any instance—whether that meant new product reveals or limited edition bundles that are convention-exclusive. Since the upcoming convention was my #1 priority, the explorations below were mocked specifically for that event—the final layout was then adjusted accordingly due to platform restraints. Since R+F sales rely heavily on desktop-first designs, I focused on streamlining the desktop experience before moving on to tablet and mobile. Ultimately, I had to design across all breakpoints—read on to see the following:

Before USA Desktop CatPg.png








While working on this project for the upcoming 2018 Rodan + Field’s Convention, it was clear that constant communication with the project managers and the developers was key in order to keep consistent branding across all platforms on the introduction of variants and a new digital ‘try it on’ feature. There were some moments where I had almost confused the design dimensions between the USA platform and the Canada/AUS platforms, but had caught the mistake early on because I was diligent on having routine check-ins and scans. Other times, it’s always great to have an extra pair of eyes to help scan and provide feedback as well (special thanks to my teammates on the core UX team who always had great insight & suggestions!).

The product reveal at the 2018 Convention was a success, and we were able to ship the new variant and ‘try it on’ features. Check out the Rodan + Field’s Dermacosmetics line here!