Make the cost and the next step obvious.

Scan → scope → structure → prototype → validate

I ran a lean loop: benchmarked three vendors (Toast, Square, Flipdish), set success criteria (time-to-pricing, first-attempt sign-up), mapped flows, sketched interactions, built mid-fi screens, and refined into a hi-fi UI with accessible form patterns.

Benchmarking Toast, Square & Flipdish

Objective, learn how leading tools handle positioning, information architecture, pricing and sign-up UX. What I measured:

Where competitors add friction

• Pricing is easy to find (top-nav), but fees and terms are vague or split across pages.
• CTAs skew sales-first (Get/Schedule a demo), and the self-serve path isn't consistently visible above the fold.
• Validation often waits until submit; email on blur and password rules on focus are not consistently implemented.
• Few friction reducers (e.g. "No credit card", "Cancel anytime") appear adjacent to CTAs.
• Navigation labels that mirror buy questions (Product/Features, Pricing, Support, Sign in) make evaluation faster.

Three think-aloud sessions

I ran three 20-minute think-aloud sessions over Zoom. Tasks covered finding pricing and choosing a plan for a single-location small restaurant, starting a trial or scheduling a demo, and noting form feedback.

• Participants reached pricing quickly but struggled to confirm processing rates and terms without digging.
• Several forms surfaced errors only after submit; password guidance wasn't visible until failure.

Implication, surface rate and term callouts near CTAs and adopt modern, forgiving form patterns, on-focus rules, on-blur email validation, inline errors and a submit-level error summary.

What buyers need to see

• Plan price, processing rate and contract terms shown together, near the pricing and the CTAs.
• A path chosen immediately, a visible self-serve Start free option alongside Talk to sales, without hunting.
• Concise friction reducers and trust badges directly adjacent to CTAs on the hero and pricing.
• No guesswork in forms, password rules on focus, email validation on blur, inline errors as they type, and a submit-level error summary.

Expose costs, choose a path, forgive forms

• Hero and first fold, a primary Start free and secondary Talk to sales, with a visible friction reducer beneath the primary CTA ("No credit card. Cancel anytime."), and pricing kept in the top nav and linked in the hero.
• Pricing page, plan price and processing rates (card-present and online) above the fold, with contract terms and a monthly/annual toggle, plus short notes right on each card (e.g. "1.75% card-present. No long-term contract").
• Sales path, Talk to sales kept visible for multi-location or negotiated rates, routing to a short, focused lead form.
• Sign-up form quality, password rules on focus (live checklist), email validation on blur, inline errors as you type, and a submit-level error summary that steals focus, with the button kept enabled so users don't have to guess.

Three high-value flows

With research and analysis complete, I defined three high-value flows that reflect how buyers evaluate a POS on the marketing site: find pricing and choose a plan for a single-location restaurant; start free and create an account; and talk to sales via a short enquiry form.

Sketching the key states

I sketched the header and hero, pricing preview and sign-up states to lock layout, scan patterns and error placement before moving to Figma. Sketches covered the overall landing-page layout, a three-card pricing preview, the password helper on focus and the submit-level error summary.

Proving the IA before polish

Using the sketches as reference, I built an interactive medium-fidelity prototype in Figma. Mid-fi was the right level here: a neutral palette and basic components kept the focus on finding pricing fast from the header and hero, scanning plan cards (price, processing rates, terms), CTA hierarchy, and form quality.

The prototype covered the landing page, pricing, sign-up and talk-to-sales flows, wired for realistic interactions (nav, toggles, error states) to surface usability issues before committing to high-fidelity styling. Quick remote checks at this stage reviewed navigation clarity and form patterns, and those decisions carried into the high-fidelity pass.

A UI geared for conversion

I translated the flows into a focused UI geared for conversion. The hero establishes hierarchy with a clear H1, the primary/secondary CTA pair and small trust cues. Pricing cards bring the numbers to the surface (plan price, card-present and online rates, and contract terms) so users don't have to dig, and the monthly/annual toggle updates values without visual noise. Forms are forgiving: email validates on blur, password rules appear on focus with a live checklist, inline errors sit next to fields, and a submit-level error summary grabs focus for fast recovery.

Hi-fi walkthrough

Short captures of the high-fidelity prototype in motion.

Clarity beat everything

Surfacing plan price + processing rate + contract note above the fold, pairing Start free with Talk to sales, and placing trust cues right beside CTAs reduced hesitation in quick tests. Form patterns mattered more than polish for first-attempt completion.

Next, I'd A/B the CTA order by audience, test pricing comprehension (can users state total cost in 10 seconds?), add a processing-fee estimator, and extend to mobile.