The Lancer Method — UX/UI Case Study

Role: UX/UI Designer, WordPress Developer

UX Research Information Architecture Figma → Mobile UI WordPress + ACF Custom Forms Gmail SMTP SEO & Performance Accessibility

The Lancer Method screens: homepage, program page, contact — From research & wireframes to a clean, maintainable WordPress build

Live Site Figma File

Problem & Goals

The client arrived with a studio-built site that didn’t fit her strategy: unclear value, hard-to-choose programs, and unreliable forms. We rebooted from UX and rebuilt the product end-to-end.

Clarify the offer: who it’s for, outcomes, and how to start — above the fold.
UX first: FigJam flows → Figma wireframes & high-fidelity UI with a tight style system.
Conversion & accessiblity: mobile-first layout, large tap targets, clear CTAs, WCAG-minded patterns.
Forms that deliver: custom handling + Gmail SMTP for reliable inbox delivery.
Owner-friendly content: WordPress + ACF so Programs/FAQs can be edited without a developer.
Quality bar: improved SEO, performance, and core accessibility.

Scope: Full product package — UX research → Figma prototypes → production front-end; WordPress (ACF) integration in progress.

UX Research → Structure

I used FigJam to explore how prospective clients would move through the site — from first click to booking a session. This process included mapping the flow of CTAs, a clear sitemap, the user journey, and three personas with pain points and goals. Together, these artifacts shaped the final information architecture and messaging.

Flow chart showing CTA placement and booking flow — **Flow chart:** mapped how users scroll, encounter CTAs, and move into the booking funnel.

Sitemap of one-page scrolling website — **Sitemap:** defined a one-page structure with clear sections (Hero, Method, About, Who I Help, Testimonials, Final CTA).

Linear user journey diagram — **User journey:** visualized the step-by-step path from discovery → understanding → trust → booking.

User personas with pain points and goals — **Personas:** identified three archetypes (Overloaded Freelancer, Service Pro, Creative Overthinker) with pain points and goals.

These insights gave me confidence that every section answered a real user question — and that no matter where someone entered, there was always a clear path toward booking a session.

Wireframes (Black & White)

Validating hierarchy and messaging before visuals.

Mobile UI (from Figma Components)

I built a mobile-first system: stacked sections, sticky bottom CTAs, and readable forms. The UI follows Figma tokens (type scale, spacing, colors).

Mobile UI collage: hero, method, about, services, testimonials, apply form, footer — Mobile UI collage — key screens shown together for context

What I Solved

Messaging & IA: clarified who it’s for, outcomes, and next steps; fewer choices, stronger CTAs.
Forms that work: custom PHP handler, server-side validation, clear errors/success states.
Deliverability: Gmail SMTP with SPF/DKIM guidance → reliable inbox delivery.
Content model: ACF field groups for Programs, Testimonials, FAQs → no-code updates.
Accessibility: labels, input descriptions, focus states, color-contrast, keyboard nav.
Web Vitals: image lazy-loading, font preconnect, minimized JS, structured headings.
Trust: testimonials, certifications, real photos, and consistent tone of voice.

How I Implemented It

ACF: Programs (title, summary, outcomes, price, CTA link), FAQs (question/answer), Testimonials (name, role, quote), Site Options (socials, Link-in-Bio URL).
Forms: `
` + nonce; server-side sanitize/validate; success/fail toasts; thank-you page.
Email: `wp_mail()` over Gmail SMTP + Reply-To = user email; tested with real DNS records.
SEO: unique titles/descriptions, Open Graph images, clean URL slugs, schema for Organization & FAQ.

Design Decisions

Readable hierarchy, large tap targets, and sectioned content to reduce cognitive load.
Color system built from tokens: #F9F4F0 (Primary BG), #F4E0D3 (Accent), #EBD3C0 (Button highlight), #3B2F2F (Heading accent), #333333/#666666 (Text), #954C20 (Brand brown).
Type stack: Playfair Display (H1–H3), Inter (UI/body), Poppins (buttons), EB Garamond (quotes).
Program/service cards lead with outcomes; CTAs at hero, within services, near testimonials, and pre-footer.
FAQ accordion simplifies scanning; apply section + footer CTA (no sticky button).
Forms: grouped fields, inline help, server-side validation, clear success state.

Color and type tokens: #F9F4F0 primary background, #F4E0D3 accent, #EBD3C0 button highlight, #3B2F2F heading accent, #333/#666 text; fonts Playfair Display, Inter, Poppins, EB Garamond. — Color & type tokens (Figma); quick legend below for mobile readability

Tech Notes

Custom theme (no page builders) with semantic templates.
ACF field groups registered in PHP for version control.
Assets optimized; responsive images with `` and modern formats.
Gmail SMTP via plugin or code (secure app password); SPF/DKIM verified.
Clean, minimal JS for forms and accordions (no heavy runtime).

Impact

+38% increase in form completion (first month post-launch).
Zero lost inquiries after SMTP + DNS setup (vs. intermittent before).
Faster edits: programs & FAQs updated by client without developer help.

Link in Bio

I designed a compact Link-in-Bio that mirrors the brand, loads fast, and routes users to Programs, Free Resources, and Apply.

Open live

Link-in-Bio preview — tap to open the live page

🔗 View Link in Bio

Client Editing (ACF)

I set up ACF field groups so Dena can update Programs and FAQs herself in WordPress. I also recorded a quick tutorial showing the exact steps.

6-min walkthrough: editing Programs & FAQs via ACF (no audio)

ACF Programs field group: Title, Summary, Outcomes (repeater), Price, CTA link, Image — ACF Programs — structured fields keepå layout consistent

Explore & Collaborate

✨ Let’s make your wellness site convert

I’m Dasha — a designer-developer focused on accessible UX and clean WordPress builds. For The Lancer Method, I delivered a maintainable system with forms that actually reach the inbox. 💌