From Third-Party to Custom Platform: Rebuilding Mayflower’s Web Experience
Designing a hybrid e-commerce and appointment booking platform for a specialized Tallinn hair studio—engineered from custom design tokens to a production Shopify build.
Product Designer
Role
8 Weeks (Est. for full rollout)
Duration
Cursor, Figma, Gemini, Shopify, Instant
Tools
Background
Mayflower operates as a specialized hair and beauty studio in Tallinn, currently constrained by a third-party booking tool that lists services and products but lacks payment processing, digital checkout, and sales infrastructure. The tool functions solely as an appointment calendar, forcing all retail transactions and client payments to happen offline. The goal is to design and build a unified hybrid Shopify platform to consolidate service bookings and retail checkout into a single, transactional storefront.
Research & Strategy
Audited industry benchmarks—including Heat Free Hair, Ayya Hair, Notino, and the current HeyGoldie page—to establish the visual direction, catalog layout, and booking flow. The audit included reviewing the existing inventory of 15 main categories and over 60 individual products.
Core Deliverables
One Store Front, Two Operational Engines
A unified architecture that handles both retail orders for the business’ products and calendar bookings for its salon service.
Flexible Payment Options
A checkout system that supports online card payments, bank transfers, and in-person/cash payment options.
Multi-Modal Order Fulfillment
Structure a versatile delivery and pickup system for product orders which will support standard shipping alongside options for in-person collection—covering both traditional cash-on-pickup and customer-ordered courier dispatch.
Design System & Visual Tokens
Established a foundational token architecture—pairing editorial luxury typography with accessible color ramps—and built a comprehensive interactive component matrix to ensure exact visual parity when translating Figma layouts into Shopify
Design System & Visual Tokens
Design Tokens & Foundations
Standardized color scales, Fraunces and Inter typography hierarchy, elevation shadows, and a 4–64px spacing system.
Design System & Visual Tokens
Interactive Component States
Mapped Default, Hover, and Pressed states across primary booking triggers, secondary actions, and tonal selection pills.
Next Steps
UX Architecture & Flow Mapping
Map the sitemap and core user journeys, establishing how clients navigate between retail shopping and salon service bookings.
Low-Fidelity Wireframing
Create wireframes to explore layout options, test content hierarchy, and validate key screen interactions before applying visual styles.
High-Fidelity Interface Design
Translate approved wireframes into responsive production screens in Figma, applying the established color tokens, typography scales, and interactive button states.
Shopify Build & Integration QA
Convert approved layouts into custom Shopify theme sections via Instant, configure Appointo for appointments and Montonio for localized payments, and complete end-to-end testing ahead of client ownership transfer.
