top of page
TableTurn POS Marketing Site
POSMarketing_HeaderImage.png

Overview

TableTurn POS is a self-initiated concept for a restaurant point-of-sale marketing site. The goal was to make costs and next steps obvious within seconds and remove guesswork from sign-up. I defined the information architecture and key flows (Pricing, Start free, Talk to sales), sketched interactions, built a small component set, and produced mid- and high-fidelity screens. Navigation and form patterns were reviewed during the mid-fi phase via quick remote checks and carried through to hi-fi.

iconfinder_3643745_human_man_people_pers
My Role

UX/UI designer

iconfinder_226587_clock_icon_512px.png
Time Frame

1 week

iconfinder_290121_computer_desktop_monit
Tools Used

Figma

Miro

Adobe CC

Process

I ran a lean loop: scan → scope → structure → prototype → validate. I first 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.

Research

Competitive Benchmarking

​

Objective: learn how leading tools handle positioning, IA, pricing, and sign-up UX.​

​

Sample set: Toast, Square, Flipdish

​

What I measured:

  • Header & hero: I checked whether "Pricing" is visible in the top navigation, which CTA pair appears (e.g. Start free vs Talk to sales), and whether any friction reducers are shown near the primary CTA.

  • Pricing experience: I reviewed how plan names, processing fees, contract terms, and add-ons are presented and whether a monthly/annual toggle exists; and how quickly a buyer can confirm actual costs.

  • Sign-up & demo forms: I walked each flow to see if password rules appear on focus, email validates on blur, and whether both inline errors and a submit-level error summary are provided. I also checked keyboard focus visibility.

Some key insights

  • Pricing is easy to find (top-nav), but fees/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.

Usability Testing

I ran three 20-minute think-aloud sessions over Zoom. Tasks included:

  1. Find Pricing and choose a plan for a single-location small restaurant.

  2. Start a trial or schedule a demo.

  3. Note form feedback.

​

Observed issues:

  • Participants reached Pricing quickly but struggled to confirm processing rates/terms without digging.

  • Several forms surfaced errors only after submit; password guidance wasn't visible until failure on some flows.

​

Implications:

Surface rate/term callouts near CTAs and adopt modern, forgiving form patterns (on-focus rules, on-blur email, inline errors and submit summary).

Insights

  • Pricing is easy to reach, but processing rates and contract terms are vague or split across pages.

  • CTAs lean sales-first. “Get a demo / Talk to sales” is the dominant action; a clear self-serve trial is inconsistent.

  • Friction reducers and trust cues (e.g., “No credit card,” PCI/EMV) aren’t placed near primary actions.

  • Form feedback comes late. Many errors appear only after submit; password rules aren’t visible until failure, and there’s no page-level error summary.

  • Show plan price, processing rate and contract terms together near the pricing and with CTAs.

  • Choose a path immediately. They need a visible self-serve Start free option alongside Talk to sales, without hunting.

  • Place concise friction reducers and trust badges directly adjacent to CTAs on the hero and Pricing.

  • Avoid guesswork in forms. They need password rules shown on focus, email validation on blur, inline errors as they type, and a submit-level error summary.

User Needs

Design Decisions

  • Hero/first fold: Primary start free and secondary Talk to sales. Add a visible friction reducer under the primary CTA (e.g. "No credit card. Cancel anytime." Keep pricing in top nav and linked in the hero.

  • Pricing page: Put plan price and processing rates (card-present and online) above the fold, with contract terms and a monthly/annual toggle. Add short notes right on each card (e.g. "1.75% card-present. No long-term contract").

  • Sales path: Keep Talk to Sales visible for multi-location or negotiated rated, routing to a short, focused lead form.

  • Sign-up form quality: Show password rules on focus (live checklist), validate email on blur, keep inline errors and add a submit-level error summary that steals focus. Keep the button enabled; don't make users guess.

Design

Flow Diagram​

​

With research and analysis complete, I defined three high-value flows that reflect how buyers evaluate a POS on the marketing site:

  1. Find Pricing and choose a plan suitable for a singe-location small restaurant.

  2. Start free and create an account.

  3. Talk to sales and submit a short enquiry form.

​

These user flows helped to flesh out the key interfaces and states they would interact with, as well as the different paths they could take to accomplish these tasks.​

Mockup_LandingPage_edited.jpg
Mockup_SignUpForm_edited.jpg

Medium-Fidelity Designs

​

Using my sketches as reference, I built an interactive medium-fidelity prototype in Figma. Mid-fi was the right level here since the goal was to prove the IA, layout and form behaviour without getting distracted by visual polish.

​

I kept a neutral palette and basic components so I could focus on finding pricing fast from the header/hero and scanning plan cards (price, processing rates, terms), CTA hierarchy ("Start Free" as primary, "Talk to Sales" as secondary), form quality (password rules visible on focus, email validation on blue, inline errors, and submit-level error summary).

​

This prototype covers the Landing page, Pricing, Sign-up and Talk to sales flows. It was wired for realistic interactions (nav, toggles, error states) to surface usability issues before committing to high-fidelity styling. I ran quick remote checks at this stage to review navigation clarity and form patterns, then carried those decisions into the high-fidelity pass.

​

​

Interaction Design

​

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

High Fidelity Designs

I translated the flows into a focused UI geared for conversion: The hero establishes hierarchy with a clear H1, a primary Start free and a secondary Talk to Sales, plus small trust cues. Pricing cards bring the numbers to the surface—plan price, card-present and online rates, and contract terms—so you don’t have to dig; a monthly/annual toggle updates values without visual noise. Forms are designed to be 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.

Typography & Colours

Landing Page

Sign-Up Form

Learnings & Takeaways

Clarity beat everything. Benchmarking Toast, Square, and Flipdish showed how often processing rates and terms sit a click away and how CTAs lean sales-first. Surfacing plan price + processing rate + contract note above the fold, pairing Start free with Talk to sales, and placing trust cues (PCI/EMV, “No credit card”) right beside CTAs reduced hesitation in quick hallway tests. Form patterns mattered more than polish: email on blur, password rules on focus with a live checklist, inline errors, and a focus-stealing error summary cut dead ends.

​

If I iterated further, I’d A/B the CTA pair order by audience, run a short unmoderated test on pricing comprehension (can users state total cost in 10 seconds?), add a lightweight processing fee estimator, and extend to mobile. The boarder takeaway: expose the real costs and next step in one view, make the self-serve path unmistakable, and make forms forgiving so first-attempt completion stays high.

Attribution

​

Hardware imagery © Toast, Inc. Used for illustrative portfolio purposes. No affiliation or endorsement implied.

​

"Person paying the bill at a restaurant using nfc technology" Designed by Freepik

​

Hi-FiDesigns
bottom of page