Website Redesign — Figma Design

We are seeking a design agency or freelance product/web designer to redesign the TrichoLab website and deliver the result as a production-ready Figma working file.

This is a design-only engagement. We will build the site ourselves on Shopify. You are quoting for UX + visual design and a Figma design system — not for development, hosting, content, or SEO.

The current site (tricholab.com.sg) runs on WordPress. Its content and information are sound, but the layouts are dated, basic, and visually flat. We want a mature, modern, conversion-focused redesign that keeps TrichoLab's established brand identity (logo, palette, typography) while dramatically raising the quality of layout, hierarchy, and visual craft.

Deliverables centre on 10 page templates + a reusable component/design-system library, designed at desktop and mobile, plus three key interactive flows.

TrichoLab is a hair & scalp specialist clinic in Singapore offering clinically-led, plant-based hair and scalp treatments, salon/beauty services, and a head-spa experience, alongside a small retail product range. The brand positioning is science-led and botanical — "Healthy Hair, Simple Science", "rooted in scalp science" — with a calm, clinical, premium tone.

• Live site: www.tricholab.com.sg (WordPress — to be replaced)
• Audience: adults in Singapore with hair-loss, scalp-health, and hair-quality concerns; skews mobile.
• Primary conversion action: booking a treatment / first-trial appointment (via form and WhatsApp).

1. Elevate the visual design. Move from the current dated, template-y look to a mature, editorial, premium aesthetic worthy of a science-led clinic — stronger typographic hierarchy, considered spacing, purposeful imagery, and a confident, modern layout system.
2. Keep the brand recognisably TrichoLab. Evolve within the existing identity (see §11). The logo, core palette, and type pairing are fixed constraints — the improvement comes from layout, composition, hierarchy, and visual craft, not a rebrand.
3. Improve UX & information architecture. The current navigation exposes ~40 treatments in an overwhelming mega-menu. Simplify wayfinding and make it easy to move from concern → treatment → booking.
4. Design for conversion. Make booking / first-trial sign-up and enquiry obvious and low-friction on every template.
5. Mobile-first quality. Mobile is the majority of traffic and the current site's weakest surface. Mobile designs must be first-class, not afterthoughts.
6. Deliver a build-ready, component-based system (see §9 and §10) so our in-house team can build it faithfully and efficiently on Shopify.
7. Accessibility: design to WCAG 2.1 AA — sufficient colour contrast, legible type sizes, visible focus states, and touch targets ≥ 44×44px.

The engagement covers, at minimum:

• 10 page templates designed at desktop (1440px) and mobile (390px); tablet (768px) behaviour documented in specs (reflow rules), not pixel-designed. See §6.
• A reusable component / design-system library that every template is built from. See §7.
• Interactive flows & components designed end-to-end with all UI states — booking/appointment enquiry (HubSpot-based), reviews & ratings module, mega-menu / navigation, before/after results slider, logo slider, a performance-aware Instagram feed, and tabbed/accordion content. See §8.
• Motion & interaction specifications — documented hovers, transitions, scroll behaviour, and micro-interactions sufficient for our team to build them.
• A Figma working file meeting the specification in §9, with full ownership transferred to us.
• A design-system handoff — a short readme/walkthrough of the file, tokens, and components (written notes plus a recorded or live walkthrough).

The live site has ~50 URLs, but they collapse into 10 core templates (see Appendix A for the full URL → template mapping). Design the template once; it applies to all its instances.

Every template must be assembled from the component library (§7). Treat each template as an ordered stack of reusable sections (see §10), not a bespoke one-off canvas.

Design a coherent, reusable component library — the foundation of the system. Expected components (non-exhaustive; propose additions):

• Global header + mega-menu (desktop) and mobile nav drawer — see §8.3
• Global footer (hours, nav columns, socials, WhatsApp, newsletter signup)
• Buttons — primary / secondary / text; all states (default, hover, focus, active, disabled)
• Forms & inputs — text, select, date, checkbox, textarea; label, help, validation/error, and success states
• Cards — treatment, signature-treatment, review, blog, product, award/press-logo, outlet/location
• Reviews & ratings module — aggregate score, source tabs, review cards
• Tabs & accordions — reusable tabbed + collapsible content (incl. the FAQ accordion) — see §8.7
• Before/after slider — draggable image-comparison component (mouse + touch) — see §8.4
• Logo slider — awards / press-logo carousel — see §8.5
• Instagram feed + post modal — performance-aware social grid — see §8.6
• Price-list rows / pricing table
• Breadcrumbs
• CTA banners (booking / first-trial)
• Media blocks — image+text, gallery, carousel
• Badges / labels — e.g. "First Trial", promotional price
• Pagination

Components should use variants + properties and auto-layout so they are truly reusable and responsive (see §9).

Beyond static templates, design these interactive flows and components end-to-end with every UI state (default, hover, focus, loading, empty, error, success). Where a component implies performance behaviour (e.g. deferred scripts), design and document that behaviour too:

This section is the heart of the engagement. The final deliverable is a single, well-organised Figma working file (or Figma project), with full ownership and edit rights transferred to SkinLab / TrichoLab on final payment. The file must meet all of the following:

9.1File organisation

Clear, navigable pages, e.g.: Cover · Foundations / design tokens · Components (library) · Templates — Desktop · Templates — Mobile · Flows / prototypes · Handoff & specs · Archive.

9.2Design tokens as Figma Variables

Define the design system as Figma Variables (not ad-hoc hex/values), including:

• Colour — the brand palette mapped to semantic roles (background, surface, text, primary, accent, border, etc.), organised so it can drive a theme-level colour system (see §10). Support any needed modes (e.g. light / on-dark sections).
• Typography — a complete type scale as text styles for the brand fonts (EB Garamond headings, Inter body): H1–H6, body, small, labels, buttons — with line-height, weight, and tracking.
• Spacing scale, radii, border widths, shadows/effects, breakpoints.

9.3Components

• Every reusable element is a component with variants + properties.
• Auto-layout throughout; responsive resizing via constraints/auto-layout.
• Templates are assembled from library component instances — no detached, one-off copies.

9.4Breakpoints

• Fully designed frames at desktop 1440px and mobile 390px for every template and key flow.
• Tablet 768px behaviour documented (reflow rules, column changes, breakpoint notes) — not necessarily pixel-designed.

9.5Dev-Mode ready

• Clean, human-readable layer and frame naming (consistent conventions).
• Legible spacing/measurements; annotations for interactions and any non-obvious behaviour; redlines where helpful.
• The file should be usable in Figma Dev Mode by our build team without needing to reverse-engineer intent.

9.6Prototype

• An interactive prototype linking the key flows (navigation, booking flow, and at least one full template scroll) sufficient to demo and validate UX.

9.7Assets & fonts

• Inventory the assets used; clearly mark placeholder vs. final.
• Confirm font licensing. Our brand fonts — EB Garamond and Inter — are open-licensed (SIL OFL), so no licensing cost. Flag any other font or stock asset you introduce and its licence.

9.8Accessibility

• Meet WCAG 2.1 AA: contrast, type legibility, visible focus states, touch-target sizes ≥ 44px. Note any intentional exceptions.

9.9Handoff

• A short design-system readme (tokens, components, usage) plus a recorded or live walkthrough of the file for our build team.

You do not need Shopify experience to bid, but you must design in a way our team can build. Please read this.

We will build the site in-house on Shopify, using a theme based on Shopify's Dawn reference theme (an Online Store 2.0, section-based theme). In this model:

• A page is an ordered stack of "sections" — self-contained, reusable, configurable content blocks (hero, feature-cards, testimonials, FAQ, CTA, etc.). Merchants can reorder, add, remove, and re-theme sections.
• Styling is driven by a theme-level design-token system (global colour schemes + a type scale) applied consistently across sections.

What this means for your design:

1. Design modular, reusable sections and components — not fixed, bespoke page canvases. Each template should read as a stack of sections that could be reordered or reused elsewhere.
2. Map your Figma Variables to a token system (semantic colour roles + type scale) so they translate cleanly to theme settings and colour schemes.
3. Favour reuse across templates. A card, CTA, or media block designed once should recur consistently — this is what makes the build efficient and the site coherent.
4. Avoid layouts that can only exist as one-off, pixel-perfect artwork and can't be expressed as a configurable, content-driven section.

We will provide the selected bidder with:

• Logo (SVG wordmark + brand mark/favicon).
• Core colour palette (fixed):

• Sage green#8a9065
• Deep olive#545a3d
• Cream#f1f0ea
• Warm sand#f3eada
• Ink#212322
• Muted#756f60
• White#ffffff

You may extend with tints/shades and functional colours (success, error, etc.) but the core hues are fixed.

• Typography (fixed pairing): EB Garamond (headings) + Inter (body).
• Photography & imagery — existing brand/clinic photography and treatment imagery.
• Copy / content — existing page copy to use as real content (you are not asked to rewrite it).
• Brand icon / illustration assets — from our in-house brand system, where needed.
• Full current sitemap & content inventory (Appendix A).

You are responsible for: the design system, layouts, component library, interaction & motion specs, and arranging the provided assets into a mature, cohesive design. Where a final asset isn't available, use a clearly-marked placeholder.

• Target: approximately 6–8 weeks from kickoff to final handoff for the full design-only scope.
• Bidders must propose a milestone schedule — e.g. discovery → homepage/direction → templates → revisions → handoff — with dates.
• Indicate your current availability / earliest start.

Target kickoff date: 20 July 2026.

Please submit:

1. Profile — agency or freelancer, team, location, years active.
2. Portfolio — 3–5 relevant projects. Highly relevant: beauty / clinic / wellness / healthcare, premium e-commerce, and Shopify projects. Include links; live sites preferred.
3. Figma proficiency evidence — a sample or description showing you work with components + variants, auto-layout, Figma Variables/tokens, and Dev Mode. A shareable Figma link from past work is ideal.
4. Proposed approach — how you'd tackle this project, including your concept and revision process (how many concepts, how revisions work).
5. Itemised fixed-fee quote (SGD) — broken down by, at minimum: templates (or groups), component library, interactive flows, motion specs, and handoff. Your quote must be inclusive of all revision rounds needed to reach final approval (state your fair-use limit if any). List any optional pages (§5) separately.
6. Milestone timeline (§12) and earliest start.
7. References — 1–2 contactable clients (or written testimonials).
8. Terms — payment schedule, and confirmation you accept the ownership / IP-transfer terms in §15.

Bids will be assessed on (not in priority order):

• Design quality & craft — portfolio strength; evidence you can deliver the mature, premium uplift we want.
• Relevant experience — beauty/clinic/wellness, premium e-commerce, Shopify.
• Figma craft & build-readiness — components, variables/tokens, auto-layout, Dev Mode; ability to design the modular, component-based system in §10.
• Approach & process — clarity of method, concept & revision process, communication.
• Price — value for the itemised fixed fee (lowest price does not automatically win).
• Timeline & availability — fit with our target and your capacity.

We may shortlist and invite a short call / interview before awarding.

• Fixed-fee engagement, quoted against this scope. Any scope change is agreed and priced in writing before work proceeds.
• Ownership / IP: on final payment, full ownership and edit rights of the Figma working file and all deliverables transfer to SkinLab / TrichoLab. You retain the right to show the work in your portfolio unless we agree otherwise in writing.
• Revisions: the fee is inclusive of the revision rounds needed to reach final approval (per your stated fair-use terms).
• Confidentiality: brand assets, content, and any materials we share are confidential and used only for this engagement. We are open to signing a mutual NDA.
• Subcontracting: disclose any subcontractors; no subcontracting of core design work without our written consent.
• Payment: propose a milestone-based schedule (e.g. deposit / midpoint / on-approval). Final ownership transfers on final payment.
• Fonts/assets: any third-party font or stock asset you introduce must be appropriately licensed and disclosed.

The current site (WordPress) URL inventory, grouped by the template each maps to. Full brand asset pack, content inventory, and any additional URLs will be shared with the selected bidder.

Home → /

Treatment / service detail (template 2) — ~40 pages, e.g.: /anti-grey-hair-treatment/, /moringa-seed-oil-treatment/, /signature_tcl_customised_restore/, /hydra-moisture-treatment/, /caviar-treatment/, /hair-loss-control-treatment/, /hair-vitality-treatment/, /signature-microneedling-hair-growth/, /signature-microneedling-hair-growth-with-iyashi-exosomes/, /sebum-control-treatment/, /hydra-balancing-scalp-treatment/, /salicylic-acids-peel/, /follicle-boost-tri-active-treatment/, /demodex-scalp-treatment/, /sensitive-reduction-treatment/, /hydrating-exfoliating-treatment/, /renewing-scalp-treatment/, /dermatitis-care/, /psoriasis-rescue/, /folliculitis-remedy/, /hair-loss-prevention-treatment/, /intense-scalp-treatment/, /360-essential-scalp-treatment/, /scalp-balance-treatment/, /youth-v-protect-scalp-treatment/, /scalp-exfoliating-treatment/, /scalp-revival-treatment/, /dandruff-prevention-treatment/, /milbon-hair-treatment/, /deep-repair-and-hydration-with-the-kochie-express-treatment/, /trichosmooth-hair-treatment/, /tricholuxe-heavenly-head-spa-singapore/, /hair-salon-services/, /professional-beauty-services/hair-colouring/, /hair-bleach/, /rebonding/, /perm/, /enhance-your-hair-treatment-results-with-specialised-add-ons/.

Some concern/education pages — e.g. /hair-loss-causes-and-treatment-in-singapore/, /female-hair-loss-types-causes-treatments/, /oily-scalp-causes-symptoms-treatments/, /guide-to-sensitive-scalp-causes-and-treatments/, /the-ultimate-guide-to-dandruff-causes-treatments/ — read as long-form article/landing content and may use the article or treatment template.

Treatment menu / price list (template 3) → /treatment-menu/
About (template 4) → /about-us/
Contact (template 5) → /contact/
Insights — article listing (template 6) → /insights/
Blog article (template 7) → individual Insights articles
News / press mentions (template 8) → /news/ (index of external media mentions with linkouts)
Shop / collection (template 9) → /products/
Product detail (template 10) → individual products

Optional / low-priority (not required) → /csr-initiatives/, /privacy-policy/ (generic content page), plus 404 & search-results.

• Template — a page layout designed once and reused for many pages (e.g. one treatment-detail template serves ~40 treatments).
• Component — a reusable UI element (button, card, form) with variants.
• Section — in the build system, a self-contained, reusable, configurable content block; a page is an ordered stack of sections (see §10).
• Design token / Figma Variable — a named design value (colour, spacing, type) reused across the system.
• Dev Mode — Figma's developer-handoff mode; the file must be clean and annotated enough to be built from directly.
• Breakpoint — a screen width the design targets: desktop 1440px, mobile 390px (tablet 768px documented).