Everyday Chemist B2B Onboarding: Conceptualizing a Tailored Intake Experience for Everyday Chemist
Overview
I partnered with Everyday Chemist—a platform connecting independent beauty brands with sustainable manufacturing resources—to design a streamlined web onboarding experience. In a fast-paced 4-week timeline, our design team took a fragmented, overwhelming intake process and transformed it into a clear, intuitive framework built to handle two very different types of business clients.
Timeline: 4 Weeks (May – June 2024)
My Role: UX/UI Designer
Tools: Figma
Core Deliverables: Multi-track user onboarding flows, mid & high-fidelity interactive prototypes, and an annotated component styling library.
The Challenge & Core Friction Point
The cosmetics manufacturing supply chain is complex, opaque, and fragmented. Emerging indie brands struggle to source reliable raw ingredients, while legacy suppliers lack streamlined ways to vet small-scale partners.
Everyday Chemist wanted an onboarding platform to welcome new clients and qualify leads.
The Problem: Everyday Chemist wanted an onboarding platform to welcome new clients and qualify leads.
However, looking at their audience, we realized a single, long sign-up form would never work because their clients fall into two completely separate camps:
Novice Creators: Indie creators who have a beautiful vision for a product but lack a scientific background. They need educational guidance, step-by-step hand-holding, and definitions of terms.
Industry Veterans: Experienced professionals who already have professional product briefs ready. Forcing them through a mandatory, basic questionnaire introduces annoying friction and causes them to abandon the form.
The Strategy: Instead of building a one-size-fits-all form, we mapped out a dual-track onboarding path that instantly routes users based on their experience level right from screen one.
2. Fast Discovery & Competitive Research
With a tight 4-week delivery window, our team executed a high-velocity discovery phase combining competitive heuristic evaluation with targeted user validation.
Learning from Competitors
We evaluated Atelier, a primary competitor in the sourcing space, to map out the highs and lows of their intake experience:
The Good: Beautiful, highly visual product previews that make users excited to start building.
The Bad: Cluttered page layouts, overly long tooltips, and inconsistent buttons that make navigating feel like a chore.
What Real Users Need
We conducted three user interviews to understand exactly what beauty brand owners expect when reaching out to a formulator. A few big patterns stood out:
“The biggest challenge is that I have a very specific vision for what I want, but I'm not a scientist or a chemist. I know exactly what I want, but I don't know how the industry speaks.”
The Trust Factor: Custom formulation is a massive business investment. The onboarding screens couldn't just look like a cold, gray survey—they needed to feel premium, safe, and trustworthy.
Tool Familiarity: We noticed that almost all participants naturally rely on Google apps to run their daily business data. This meant our design needed to make document uploading and brief sharing incredibly effortless.
Learning from Competitors
We evaluated Atelier, a primary competitor in the sourcing space, to map out the highs and lows of their intake experience:
Strength: Attractive visual presentation and interactive "build-a-product" preview tools that drive anticipation.
Weakness: Cluttered layouts, overly long tooltips, and poorly placed Call-to-Actions (CTAs) that slowed down the task flow.
Takeaway: Everyday Chemist wanted an onboarding experience similar to Atelier’s but dramatically simplify the navigation and structure. The audit allowed me insight and context for this project.
Competitor analysis: Atelier's onboarding experience. Performed a heuristic evaluation.
What Real Users Need
Overarching themes and patterns that influenced users needs: time management, knowledge of the process, and industry experience.
We analyzed qualitative data from three strategic user interviews representing different tiers of the market. The data revealed several core needs:
100% of participants were open to a paid service.
Specific needs varied based by experience level.
100% of participants utilized Google apps in their business operations.
60% participants saw significant value in the proposed service.
30% prioritized complete control over their process.
"I have a very specific vision for what I want, but I’m not a chemist. I know exactly what I want the product to do, but I don’t know how to specify the raw resources."
— Emerging Brand Creator
Analysis
Affinity map—Making sense of the information and discovering key insights.
After the interviews, I gathered the data audio files and transcript and started sorting the information so myself and my teammates could find themes and patterns to create an empathy map and user personas. Through the project we all participated in interviewing and adding to the data.
Since the first two participants (A and B) were wildly different in their needs, there was a very clear line between them. Adding the third participant (C) helped pull more overarching themes like the need for assistance through the whole process. Taking into consideration the Participant B, who didn’t need much help and wanted to continue his own process. All participants were adamant about creating their vision. Trust was an important aspect as well as catering to the client's needs in a customized experience.
All participants saw the value in the platform with differing ideas on how it would serve their particular needs. Subscription service along with one-projects in instances of smaller projects or the need for independence.
This process helped define specific needs and pain points of the participants and I pulled those themes and some quotes to bring into the empathy map.
Empathy Map
Two distinct personas began to emerge.
I worked together with my teammates to update work on the empathy map, but one of our teammates took this on and did the majority of the work on it. We all reviewed it and updated as we added more user interviews.
We found that there were specific needs and pain points that we could apply to the project and this yielded two distinct personas.
3. Architecture: Defining the User Personas & Flows
To map the digital architecture, we synthesized our insights into two distinct structural personas that informed the dynamic routing engine of the platform.
Simone (The Guided Track)
New to the cosmetics industry.
Has high creative vision but no technical chemistry background.
Her user journey map proved she required step-by-step guidance, clear milestone tracking, and embedded educational context.
James (The Fast Track)
Experienced beauty industry professional.
Works efficiently and wants complete control.
His user journey map highlighted that any mandatory tooltips or repetitive forms would cause immediate drop-off.
Requires a simplified document-drop to upload pre-existing specifications.
HMW Statements
Problem: The complex and fragmented cosmetics supply chain creates challenges for brands, including difficulty finding reliable suppliers, a lack of transparency, limited access to resources for new brands, and hurdles to innovation.
“The biggest challenges were the fact that I had a very specific vision for what I wanted, but I'm not a scientist, I'm not a chemist, I'm not an expert in this field, but I know exactly what I want.”
—Simone persona
How might we provide users with a step by step onboarding experience where they can customize their experience to get the best product from Everyday Chemist?
“I should be able to provide a previously designed product brief that is followed up with clarifying questions, rather than going through an onboarding process that is repeating work already done.”
—James persona
How might we accommodate and add value for an experienced industry professional who doesn’t need hand holding throughout the process?
Discovery
User Insights
Two key personas for the onboarding experience: independent, experienced users and those new to the industry. Experienced users prioritize control over the process and value a streamlined experience without unnecessary features. Conversely, those new to the industry have a vision but require step-by-step guidance. The onboarding experience needs to cater to both these audiences, offering a clear path for experienced users while providing comprehensive support for those taking their first steps in cosmetic brand development.
User Task Flow
New Customer with a product filling out the onboarding form.
Next we created a user task flows to give us direction to start sketching ideas. We outlined five task flows the user could take.
We followed these flows throughout the rest of the project but didn’t have time to complete each one. However, we were able to use the most critical task flow that would touch all flows.
Five user task flows:
New customer curious about what Everyday Chemist has to offer.
New customer with a product filling out the onboarding form.
Returning customer logging in to view their product development status.
Returning customer who wants to create a new product.
New customer who is inexperienced in this field and lacks knowledge about how our product system works.
User Journey
Outlining various stages and identifying opportunities to improve the stages clients would take in their journey to reach the formulation they envision for their brand.
I teamed up with one of my teammates to create the user journey map, helping the team understand what a user might feel while going through the process of starting a new product. We outlined the various stages they would take in their journey to reach the formulation they envision for their brand.
It further allowed me to pinpoint how I could design an onboarding experience, anticipating the user needs from what I knew about the personas and the task flows.
Learning experience: I paired up with one teammate on the user journey map. I still wasn’t sure how to connect them to the research so we had a work session where she explained each step and then left me alone to fill in the rest of the map. Then she came back and reviewed it and made edits as needed. Reviewing what she add helped me further see what details I had left out. It was a fun team effort and was grateful for her help.
4. Interactive Ideation & Strategic Pivots
Our team ran rapid design sprints, moving from individual concept sketches to aligned low-fidelity wireframes to gauge client and development feasibility.
Adapting to Global Technical Constraints
During the mid-fidelity phase, we presented a standalone, wizard-style onboarding layout. Our stakeholders requested that the interface leverage their existing product's global, left-side navigation matrix to ensure platform uniformity.
The Design Pivot: I re-engineered the onboarding layout to seamlessly live within the brand's permanent container framework. This kept the platform visually unified, reduced technical debt for the development team, and let users preview the global layout they would use after completing their intake.
5. High-Fidelity Execution & Component Ecosystem
The final phase focused on turning our structural logic into a polished, premium desktop interface that matches the luxury expectations of the cosmetics industry.
Interface Highlights
The Segment Fork: Built a high-converting entry screen that allows users to seamlessly choose between the "Guided Track" or the "Pre-Designed Brief Upload."
Progress Structure: Designed clean, contextual input forms with integrated helper mechanics that explain chemical terminology without cluttering the screen real estate.
Formulation Showcase: Refined a "Review Your Formulation" step that moves gallery assets into an intuitive, side-by-side inspection layout before final submission.
Design and Iteration
Discussed our combined sketches and collectively decided which ones to develop further into Lo-Fi wireframes.
For the sketching phase, we each created individual versions representing our ideas for the app's functionality. We then convened as a team to discuss all the sketches and collectively decided which ones to develop further into Lo-Fi wireframes. Narrowing down the selection proved challenging, but we ultimately reached a consensus.
Low-Fidelity Wireframes
After making some design choices, we collaborated to build the lo-fi wireframes.
We divided the work of creating low-fidelity wireframes and prototypes to test with the client. This helped us gauge if we were on the right track. We wanted to understand the client's experience: Did the flow feel smooth and intuitive, or were there difficulties navigating it? Did the wireframes capture the necessary details?
Mid-Fidelity Wireframes
Second round of editing created with more information from our stakeholders. Our direction with the menu changed as per client feedback. They wanted to use their current website’s existing left side global menu so I worked on a different version that we ended up using. Overall, many of the changes were content related and they liked the direction of the design and functionality.
Hi-Fidelity Wireframe Prototype
Despite a last-minute scramble fixing a prototype glitch, we presented high-fidelity mockups and received valuable client feedback for final edits. Here, we moved the ingredients images into the Review Your Formulation” column in a collapsible accordion element. Final preparation, I compiled the design system, style guide, adding annotations for the client an d developers, and final assets for on-time delivery.
Scalable Design Infrastructure
To ensure long-term architectural integrity, I compiled and structured a production-ready Figma Design System and component library. All UI components, states (default, hover, active, error), typographic scales, and assets were fully annotated with clear developer guidelines.
6. Value Delivered & Strategic Roadmap
The completed design package provided Everyday Chemist with a high-fidelity blueprint to scale their digital pipeline.
Stakeholder Alignment: Delivered an interactive prototype that successfully aligned business goals with engineering constraints, earning strong approval from client leadership.
Engineering Readiness: The fully documented component library ensures their development team can deploy this onboarding flow with consistent visual polish and minimized implementation friction.
Future Product Roadmap: Outlined clear future-state iterations for their product team, including integration of live interactive dashboards, automated form fields via uploaded document parsing, and guerrilla validation testing plans to optimize conversion rates post-launch.
