Role: Sr. Product Designer
Team: Senior Designer, Product Manager, E-commerce Director
Duration: 3 months
Tools: Figma, Adobe XD, Illustrator, Figma, Zeplin

Website: Biossance.com

BUILDING THE FUTURE WITH BIOTECH

Biossance is a biotech direct to consumer brand that creates a 100% plant-derived ingredient known as squalane, the leading ingredient of one of the most effective skincare product in the market today. The brand is also endorsed by Reese Weatherspoon and sold at Sephora stores worldwide. Growing tremendously since the beginning, our leadership wanted to optimize the site experience through usability and process improvements.

Business Prioritization

The Goal

  • Build a scalable design library for the Biossance design organizaiton. 

  • Address underlying UX issues and meet ADA compliance standards under WCAG 2.1 guidelines.

  • Explore opportunities in brand education and increase shoppability

Heuristic Evaluation

We evaluated the site experience to find any usability and design issues. While many were minor design and coding flaws, we also found ADA compliance issues that also were flagged as high priority.


Driving functionality & Usability standards

The Brand palette contained the full spectrum of colors for print and out of home advertisements, but it didn’t translate well on digital and did not meet WGAC 2.1 standards. To increase usability and bring inclusive design to all users, we crafted a new spectrum of shades that are flexible, functional, and most importantly web safe. The contrast ratio of 4.5:1 was required to pass level AA compliance, for the loss in contrast sensitivity usually experienced by users with vision loss equivalent to approximately 20/40 vision.


Design System


MOLECULES AND ORGANISMS

Takeaway

There were many existing hurdles to complete the design system, including gathering requirements and assets, and educating our design and development partners. Some designers were also new to the tools and components, so we hosted design workshops in order to train users, walkthrough new updates, and for Q/A. The new design systems improved our organizational process for brand, digital, and product.


Also…

Shopping EXPERIENCE

In 2022 - 23, I led the global experience designs under the parent company with a small team of designers, PMs, and engineers. Some of our key initiatives included the optimization of the E2E shopping funnel under this organization.
Through user interviews, usability testing. and site analytics, we learned about the paint points/challenges that users have with the site experience.


key highlight

  • Biossance cart updates saw an 15% improvement over checkout transactions YoY (2022)

  • Bounce rate decreased by 2+% with an avg session time increase by 10+ seconds.


LiveStream Events

Our ecommerce partners grew excited about scaling shopping events as they hosted their first digital shopping event in 2021. To scale the cms features and capabilities, I worked with our design partners to create wireframes, user flow and high-fidelity prototypes for the streaming platform.

The shopping platform allowed peer-to-peer video and messaging on the mobile and desktop site. The purpose was to promote products and new offers during the show, allowing the customers to benefit from actively engaging with the brand during the event.

Through secondary research, we found that 31% of users said that livestream shopping enabled them to shop smarter and make more informed buying decisions. In addition, the main benefits of livestream shopping globally were access to exclusive discounts, product education, and inspirational and social content.

Streaming results in growth:

  • Higher conversion rates and more successful launches

  • Lower return/exchange rates

  • Potential to become a long-term growth channel

User journey / Prototypes


trending results

The results from our livestream shopping were exceptional and drove new sale’s growth for Biossance.

  • After 6 months, we saw an increase of +38% vs our first live shopping event in December

  • June 22 single day live shopping event drove $30K in incremental sales in one day.

  • 2.4K+ viewer tuned in for the event, exceeding the target by +140%

  • 6.1% conversion rate during the event, 2 pts higher than site YTD avg conversion rate

  • ~16.4% of viewers added to cart during the event