marvalero | My Site 4

WEB & MOBILE | AUG 2025 – PRESENT

Designing Marvalero:

A B2B & B2C Salon Management Ecosystem

Designing a 0-1 dual-platform suite for salon operations, walk-in queues, and SaaS checkouts.

✿ Company: Marvalero Inc.

✿ Duration: Aug 2025 – Present (8 months)

✿ My Role: Lead UX Researcher & Product Designer

✿ Platforms: Responsive Web, Native iOS/Android

✿ Scope:0-1 B2B Ecosystem (Web & Mobile), SaaS Billing Flow, and Influencer Marketplace Research.

✿ Tools & Workflow:

✿ Ai Workflow:

Business Impact
(Aug 2025- Mar 2026)

Dual-Platform Shipped in 6 Months

22% Increase in Pro Subscriptions

100+ Early Waitlist Signups

The Context

Marvalero is a digital ecosystem built for the beauty industry. While Marvalero’s existing B2C app successfully handled client bookings, the salon’s business operations were entirely disconnected. I led the 0-1 design of the missing B2B ecosystem:

✿ B2B Web App: A command center for owners to manage the business.

✿ Mobile Pro App: An on-the-floor tool for stylists to manage their day.

The Problem

Marvalero clients loved the existing B2C booking app, but salon operations were a mess. Managers were accidentally double-booking chairs on paper ledgers, and stylists wasted 15 minutes a day walking to the front desk to process payments.

♡ The Goal: Build a 0-1 B2B ecosystem (Web + Mobile) that syncs instantly with the B2C app, with zero latency, and zero double-bookings.

7d10a9_dda31109778d498bb4dcb941697754ee~mv2.avif

Scope & Constraints

✿ 6-Month Sprint: Design and ship a 0-1 dual-platform MVP fast to market.

✿ Zero Latency: Live sync was mandatory. A 2:00 PM B2C booking is required immediately, blocking the manager's web app and notifying the stylist's Pro App.

✿ System Harmony: Align the new B2B tools with the existing B2C design language.

Research & Ideation

Our core atomic flows

✿ Smart Calendar Sync (Auto-flag overlapping appointments instantly)

✿ SaaS Pro Upgrade (Frictionless checkout with zero typing, ≤ 3 clicks)

✿ Chair-Side Checkout (1-tap payments for stylists with wet hands, ≤ 30 sec)

Empathy mapping

The users were bucketed into 3 archetypes based on their goals and needs.

David, Salon Owner

Gains: Revenue visibility, conflicts, and automated scheduling were prevented.

Maria, Salon Manager

Gains:

Team metrics, Performance data, Data-driven decisions

John, Independent Stylist

Gains: Mobile checkout, Wait-time estimation, One-handed ergonomics.

Pains: Duplicated entry, Hard to track team, Clipboard chaos

Pains: Clunky reporting, Legacy software, Disconnected systems.

Pains: Front-desk bottlenecks, Wasting floor time, Duplicated bookings

✿ 3 distinct users. 3 unique environments. 1 synchronized platform.

40+ depth interviews

Live floor shadowing

Teardown of 3 legacy tools

split across salon owners, stylists, and influencers

watching stylists juggle phones, shears, and wet hair

mapping the drop-offs in clunky desktop software

Key findings shaped three design principles:

✿ Ergonomics > Aesthetics: a one-handed, thumb-friendly UI is mandatory when a stylist is holding scissors and standing behind a chair.

✿ Clarity prevents chaos: managers don't just need a calendar grid; they need smart alerts that prevent double-bookings before they happen.

✿ Friction loses revenue: every extra tap or typed word in a checkout flow is a dropped Pro subscription. Automate the typing.

B2B Salon Pro Portal-2026-03-18-033411.png

Information Architecture

Design Approach

✿ Journey Mapping → rage points "eliminated peak-hour friction" (stylist busy-hand errors, front-desk bottlenecks)

♡ Wireflows in Figma → clickable MVP → guerrilla-tested with 3 salon managers and 5 stylists. 15+ interactive iterations → tested on-site during peak Saturday salon hours.

Screenshot 2026-03-18 at 10.54.03 PM.png

The Build

Phase 1: The B2B Web dashboard (Aug '25 – Feb '26)

I led a ground-up redesign of the legacy web dashboard. I overhauled the entire platform to modernize the UI, introduce new core functionalities, and optimize data visibility for owners at the front desk.

✿ Smart Calendar Sync: Automatically flags scheduling conflicts to prevent accidental double bookings.

✿ Role-Based Access (RBAC): Secures sensitive financial data and streamlines staff permission management.

✿ At-a-Glance Analytics: Translates complex daily revenue into digestible, high-level visual summaries.

view full figma wireframes

Download App

employee color palette

Phase 2: The SaaS Subscription Flow

Fixing a critical conversion leak in the B2B checkout process.

During early usability testing, I discovered a major drop-off point: owners were abandoning the checkout page due to the friction of manually typing promotional codes. I designed a 0-1 billing system from scratch to eliminate this barrier.

✿ The Fix (Locked-Referrals): Engineered an auto-populating promo flow. When users click a referral link, the discount is instantly applied zero typing required.

✿ Edge-Case Mapping: Architected the complete payment logic, designing 16+ granular error states to gracefully guide users through failed transactions.

✿ The Impact: By removing checkout friction and clarifying error recovery, this redesigned flow directly drove a 22% increase in Pro upgrades.

view full figma wireframes

Subscription Flow Logic

Screen 1A – New User (Monthly Billing – Default).png

Screen 1B – New User (Yearly Billing – Toggle Selected).png

Regular Referred User Subscription Flow (Web App)

Clicking any CTA → Screen 2 (Account Creation + Checkout, referral code pre-filled & locked)

Referred User — Success Confirmation Screen.png

Upgrade/ Downgrade screens

Phase 3: The 0-1 Mobile Pro App (Aug '25 – Feb '26)

A 0-1 "deskless" tool engineered specifically for stylists working on their feet.

Pivoting from the data-heavy web dashboard, I designed this native mobile app entirely from scratch. Knowing stylists are holding shears, engaging with clients, and working with wet hands, I optimized the UI strictly for pure speed and one-handed ergonomics.

✿ 1-Tap Walk-In Queue: A dynamic digital queue that automatically estimates client wait times based on live stylist availability.

✿ Chair-Side Checkout: A frictionless mobile payment flow allowing stylists to process cards and issue e-receipts directly from their station, completely eliminating front-desk bottlenecks.

view full figma wireframes

Download App

Testing

Current Focus: Influencer Marketplace UX Research (Feb '26 – Present)

Validating product-market fit before engineering writes a single line of code.

✿ Generative Research: Led 40+ remote interviews with micro-influencers and salon owners, synthesizing complex qualitative data via affinity mapping.

✿ The Core Insight ("Data is Currency"): Influencers don't want a basic booking link. They need a transparency dashboard that proves their exact client conversion rate so they can negotiate fair pay.

✿ The Strategic Pivot: This research completely redirected our product roadmap. I am currently designing a data-driven dashboard based on this insight, which has already secured 100+ early waitlist signups.