BiotechBeauty

Creating a Seamless Online Experience to Drive Excitement for Brand Launch

BiotechBeauty is an emerging microbiome-powered makeup startup that aims to change the game in the beauty industry. Upon joining the company, it became clear that there was a necessity to transition from their current templated website to a platform that not only embodied their brand identity but also generated anticipation among their audience for the product launch. Creating an eye-catching landing page and enhancing user flow were crucial steps to enable users to fully engage with what BiotechBeauty has in store.

ROLE

UX/UI Researcher

Design Consultant

Product Design Intern

TIMELINE

February - May 2024

SKILLS

UX Research

Branding

Visual Design

Wireframing

Prototyping

TOOLS

Figma

Webflow

Adobe Illustrator

A quick look into the timeline of my 12 - week internship with BiotechBeauty!

Project Timeline

Take a quick glance...

live

Site

Overview

In January 2024, I met Alanna, the ambitious founder of BiotechBeauty, during a competition hosted by USC’s startup incubator, TroyLabs. As the sole design consultant on her team, we secured first place in the Spring 2024 annual pitch competition.

Following this success, I officially joined BiotechBeauty’s close-knit team as a product design intern for a 12-week internship. During this time, I collaborated closely with Alanna to bring her brand vision to life through a complete redesign of the existing website, focusing on one central question:

How might we garner excitement and engagement between BiotechBeauty and their target audience?

But before we can find a solution, we must first ask...

Who is BiotechBeauty?

To effectively design an experience curated towards the audience, I first had to have a firm understanding of who BiotechBeauty is and what their brand stands for.

Upon many conversations with the founder, I learned that BiotechBeauty is an emerging microbiome-powered makeup startup that aims to change the game in the beauty industry. By emphasizing biotechnology and clean, effective ingredients, BiotechBeauty creates makeup products that heal the skin barrier rather than irritate it—almost like a 2-in-1 makeup and skincare solution!

Project Goals

BOOST ENGAGEMENT

The redesign should focus on increasing waitlist sign-ups for the brand launch.

STRENGTHEN BRAND IDENTITY

Enhance and solidify Biotech Beauty's branding to cultivate a loyal community with aligned values.

01. Research

User Interviews & Surveys

Gathering User Insights

Before starting the redesign, it was crucial to identify what was not working with the current website. To gain insights from the target audience, I conducted 5 in-person interviews where each user walked through the current website, identifying pain points and opportunities for improvement.

Additionally, I conducted a survey using Google Forms, receiving 5 responses. Participants shared their favorite cosmetic websites, specific features they liked/disliked, and provided feedback on BiotechBeauty's current site.

10 circles in two rows of 5. 8 of the circles are shaded in gradient of green to purple. 8/10

Heuristic Analysis

Taking a look inwards

After gathering insights from users, I delved deeper into the existing website to understand why it was causing these issues. This analysis helped identify the key aspects to focus on for the redesign.

Affinity Mapping & Synthesis

Research Findings : Piecing it all together

I compiled the collected data and findings from the heuristic analysis onto an artboard, organizing everything into categories of pains, gains, and actionable steps to present to Alanna (founder).

02. Design Preparations

Moodboarding

Creative Insights from Leading Brands

Rather than diving straight into a redesign, I opted to draw inspiration from existing brands that align with the same aesthetic / brand message. This approach gives me a clearer grasp of the industry standards.

Design Systems and Limitations

Things to keep in mind

When redesigning the website, I encountered several challenges, the most significant being the lack of product photos. One of the hardest aspects was selecting stock images that aligned with the brand's identity without appearing too generic or "stock-image" like. Our goal was for users to feel the brand's essence, but this was difficult without actual product images. Additionally, I had to ensure that all designs adhered to the existing Design Systems established by the company.

03. Design

Wireframes & Iterations

Design and more design

The journey to the final iterations of BiotechBeauty's new website was both challenging and rewarding. With our two primary goals in mind, the website underwent several iterations and extensive user testing to ensure those objectives were achieved.

User Feedback & Testing

Making Adjustments

Once I had designs we were happy about, I conducted quick 15 - minute zoom testing sessions with the mid-fidelity wireframes. During these walkthroughs, I focused on two key aspects:
‍
1. Navigation Ease: Can users intuitively navigate from one page to another while retaining the information and brand message we aim to convey?
2. Engagement Effectiveness: Do users find the content compelling enough to take the extra step to sign up for the waitlist?

Ingredients Page

The ingredients page underwent several iterations. Initially, the ingredients were listed in a single block (as shown in the figure on the left). Based on user feedback, I realized that this layout lacked cohesion with the rest of the website. In the second iteration, I separated the ingredients into distinct blocks with a higher visual hierarchy, making it easier for users to focus on key elements.

***The middle version was later repurposed to use for the mobile screens

04. Final Designs

live

Site

After finalizing the designs, I dedicated four weeks to transforming the wireframes into a fully functional website using Webflow. During this phase, I incorporated micro animations and made necessary adjustments to optimize the design for mobile and tablet screens.
‍Note: My internship concluded in June 2024, so any subsequent edits to the website have been made by the company.

Final Designs

Landing Page

Final Designs

About Us Page

Final Designs

Ingredients Page

Final Designs

Blog Page

Reflection

Being the sole designer on the team, I enjoyed a significant degree of creative freedom, allowing me to explore various approaches throughout the project. However, this also entailed a considerable responsibility that required me to step out of my comfort level and educate myself on different techniques to be able to implement only the best design practices. Nonetheless, throughout this 12 week internship, I was able to grow not only as a designer, but as a team member and I'm so glad I could experience it with BiotechBeauty.

Takeaways & Lessons

Listen to the Users

It's crucial to remember that design choices that seem intuitive or obvious to you might not be the same for new users. User testing and interviews highlighted this fact, underscoring how vital these steps are in the design process. These sessions often revealed issues I had overlooked due to my familiarity with the project, demonstrating the value of fresh perspectives.

Takeaways & Lessons

Finding Priorities

Given the dynamic environment of interning with a startup, the early stages tend to have ambitious goals and expectations. It proved crucial to engage in numerous discussions and ideating with the founder and the team to streamline ideas and establish concrete goals and priorities.