Erin Kerr

Live, from OrderSync’s code

OrderSync • 2026

Making an AI ordering tool look like something you’d trust with your orders

Overview

OrderSync reads purchase orders in any format, from EDI to PDFs to plain email, and puts them straight into a company’s ERP.

I redesigned its marketing site and built the design system behind it, so every page, from the homepage to the billing screen, is visually consistent.

8
237
155 → 6
450 → 3
Role
Design engineer (contract)
Timeline
May 18 to June 19, 2026
Scope
Marketing site, design system, business cards

Problem

How might we help buyers confirm OrderSync fits, and make booking a call the easy next step?

OrderSync’s buyers already know their problem: orders arrive in every format, and someone types each one into the ERP. The homepage’s job was to confirm OrderSync fixes it, and make the call easy to book.

Here it is the day before the redesign started, rebuilt live from its code.

Live, from OrderSync’s code on May 17, 2026. Set in Geist here, not OrderSync’s Satoshi.

Heuristic evaluation

I ran a heuristic evaluation of the old homepage and found 5 problems, each tied to a usability principle.

A menu called Pages

Match with the real world

The free tools sat in a menu named Pages, which says nothing about what’s inside.

1 action, 2 names

Consistency and standards

Get Started in the header and Book a free intro call in the hero opened the same calendar.

Sign In outranked booking

Visual hierarchy

The header’s only filled button was for people who already had an account.

The look of an AI-built page

Credibility

Purple, gradients everywhere, colored glows and a glass button: 4 of the patterns on Adrian Krebs’s list of AI design patterns. Of 1,590 Show HN pages he scored in April 2026, 22% had 4 or more.

Gradient everything

VibeCode Purple

Large colored glows

Glassmorphism

A logo strip in many grays

Social proof

The logos used to be in color, then they were grayed out, which left the strip in many different grays. We cleaned it up with one gray, the same as the headline’s, so the social proof comes through consistently and looks stronger.

Before: each logo grayed out on its own

After: every logo in one gray

Goal

Make booking a call the obvious next step, and measure every step to it.

Success metrics

  • Primary metric

    Visitor-to-booking conversion rate. Every design decision serves it.

  • Measured end to end

    Page views, clicks on each call to action, visits to the calendar and finished bookings.

  • No target yet

    Finished bookings weren’t tracked, so there was no rate to set a target against.

User flow and measurement plan

I mapped the path down the homepage: the question a visitor has at each section, the section that answers it, and what to track there. It flagged the biggest gap: clicks on Book a Call were tracked, but not whether anyone finished booking.

  1. 0–3 sec

    “Does this solve my problem?”

    Hero: one headline, 2 buttons

    • book_demo_click, Tracked
    • section_viewed, Add in the build

  2. 3–10 sec

    “Who else uses this?”

    Customer logos

    • section_viewed, Add in the build

  3. 10–30 sec

    “How does it work?”

    Every format flowing into the ERP

    • flow_node_clicked, Add in the build

  4. 30–60 sec

    “Will it fit my workflow?”

    3 feature cards, proof points and a testimonial

    • section_viewed, Add in the build

  5. 60+ sec

    “Can I try before committing?”

    3 free tools

    • free_tool_clicked, Add in the build

  6. Decision

    Decision point

    “Still Typing Orders Into Your ERP?” and Book a Call, 30 minutes with James

    • calendar_page_view, Gap: not tracked
    • booking_complete, Gap: not tracked

  7. Then

    Objection handling

    7 FAQs, 3 of them new: go-live time, IT and SPS

    • faq_opened, Add in the build

TrackedAdd in the buildGap: not tracked

Rebuilt from my user flow and measurement plan, May 18, 2026. Open the original plan

Research

Who buys OrderSync, and what do they need to see before they book a call?

To answer this, I used 5 methods: a stakeholder interview, secondary research, proto-personas, a user journey map and a competitive analysis.

Stakeholder interview

Key finding

Clean and expected, with nothing too innovative.

I started with James, OrderSync’s founder, and we talked about who the site was for. His buyers are business people who don’t want the wheel reinvented, so he wanted the site to feel clean and expected, with nothing too innovative.

The reference James shared: ElevenLabs’ Sound Effects page, a white app with a plain sidebar, a row of image tiles and a simple list of sounds with play buttons.
The reference James shared on April 6, 2026: ElevenLabs’ Sound Effects page.

Secondary research and reviews

Published data and competitors’ reviews showed what buyers worry about, and 2 of those worries changed the homepage.

Mistakes cost suppliers real money.

Walmart fines suppliers 3% of the cost of goods on every case that arrives late or incomplete. So the third card became “Catch Errors Before They Cost You.”

Setups that run for months are the worry.

Reviews of SPS Commerce and TrueCommerce describe setups quoted in weeks that ran for months, so the FAQ now answers how long it takes to go live. The redesign added 2 more questions with it, on IT and on SPS Commerce.

Most customers are processing live orders within a week. There are no templates to build, so onboarding is mostly connecting your store or ERP and forwarding a few sample orders so OrderSync can learn your partners’ formats.

Proto-personas

Key finding

3 buyers, 3 triggers: a retailer’s EDI rules, too much typing, and a system they’ve outgrown.

I had no buyers to interview, so I mined what buyers had already written: competitors’ reviews and customer stories. 3 personas kept coming up.

  • Persona 1

    Forced into EDI

    CEO, president or VP of operations at a consumer goods or food brand

    Trigger
    A big retailer, like Walmart or Target, requires EDI.
    In their words

    “They said it would be 6-8 weeks. It’s been 9 months. And we’re not done”

    Jennifer N., CEO, in a 1-star Capterra review of SPS Commerce, 2022

    On the page
    FAQs: “How long does it take to go live?” and “How is this different from SPS Commerce?”

  • Persona 2

    Drowning in manual orders

    Director of customer service or CSR supervisor at a manufacturer or distributor

    Trigger
    Reps worn out by typing, more errors, and talk of hiring just for data entry.
    In their words

    “CSRs were constantly struggling with the push and pull of rushing to key in a new order, and then dealing with customer inquiries about existing ones.”

    Darlene Bardin, Genpak, in a Conexiom customer story, 2022

    On the page
    The closing call to action: “Still Typing Orders Into Your ERP?”

  • Persona 3

    Outgrown legacy EDI

    CTO, VP of operations or EDI lead at a brand growing into retail

    Trigger
    Slow onboarding, outages and legacy systems they can’t see into.
    In their words

    “Sub-par integrations, unresponsive customer service, heinous billing practices”

    Jessica K., VP, in a 2-star Capterra review of SPS Commerce, 2021

    On the page
    The headline, “One System for All Your Orders,” and the diagram of every format going into the ERP.
Proto-personas, built from reviews and customer stories rather than interviews. Every quote is word for word.

User journey map

Key finding

Every path starts with stress, so each page has to reassure them and make the next step easy.

2 paths for each persona, from what sets them off to a booked call, or to staying in touch. Pick a persona and a path to switch the map.

Forced into EDI • The homepage to a call

  1. 1. Trigger

    A retailer’s email • Panic

    A big retailer, like Walmart, sends its EDI requirements.

    “This reads like a foreign language.”

  2. 2. Search

    Google or AI search • Overwhelmed

    Searches “Walmart EDI requirements” and “SPS Commerce alternative.”

    “Is there a simpler path?”

    The page A page on each big retailer’s EDI rules, and one on SPS Commerce alternatives

  3. 3. Land

    The homepage • Wary

    Reads the headline and the diagram under it.

    “Does this solve my problem?”

    The page “One System for All Your Orders,” with every format flowing into the ERP

  4. 4. Evaluate

    Logos and the FAQ • Reassured

    Checks who else uses it and how long setup takes.

    “How long does it take to go live?”

    The page Customer logos, and FAQs on go-live time, IT and SPS Commerce

  5. 5. Book

    Book a Call • Ready

    Picks a time for a 30-minute call with James.

    “It’s 30 minutes, with no commitment.”

    The page Book a Call in the header of every page

Made for this case study from the May research and the pages that shipped. Feelings at the start come from the research; the later ones are what each page is designed to make them feel.

Competitive analysis

Key finding

Competitors all asked for a demo, and almost none showed the product.

  • Everyone asked for a demo.

    All 7 with a readable button asked for a demo or a meeting. OrderSync’s says Book a Call: 30 minutes with James.

  • Headlines said what they do.

    5 of 9 said what they do with orders. OrderSync’s already did: “One System for All Your Orders.”

  • Almost nobody showed the product.

    Only Conexiom did. OrderSync’s hero now shows every format going into the ERP.

TrueCommerce

TrueCommerce’s homepage: a navy-to-blue band with large swoosh shapes, “Your Supply Chain: Integrated. Automated. Built to Scale.” and an amber Book a Demo button.

Workist

Workist’s homepage: dark navy with hexagon line art, “Automate order entry – from inbox to ERP within seconds”, a mint Book a meeting button and a row of customer logos.

Conexiom

Conexiom’s homepage: a light gray panel with “Process every order accurately, in seconds.”, an orange Request demo button, and a product card correcting an order line to WIDGET-A, 150 EA and 2,450.00 USD.
Homepages from the Wayback Machine: TrueCommerce on May 12, Workist on May 10 and Conexiom on May 14, 2026. Hover a box to read its note.

Ideation

Every section had to earn its spot on the way to Book a Call.

Information architecture

Alongside the wireframes, I mapped every page on the site: the homepage’s 10 sections, 11 free tools, the blog, the EDI guides, about 110 SEO pages and the app.

My site map: ordersync.io branching into the landing page and its 10 sections, Free Tools with 11 tools and an index, the Blog, EDI Guides, Programmatic SEO pages and the App. Below it, the conversion flow from search to the landing page, then to Book a Call or the newsletter.
My site map. 389 indexed pages, with the landing page as the redesign’s scope.

Wireframes

I wireframed the homepage 3 times, and most of the layout carried through to the final design.

Wireframe

The top of my homepage wireframe in grays: the header with Sign In and a black Book a Call pill, “One System for All Your Orders” with Book a free intro call and Try Free Tools, and a row of customer names under “Processing orders from,” with a yellow note on the logo strip.

Final design

The new OrderSync homepage in light mode: “One System for All Your Orders” in navy and silver gray, a navy Book My Free Intro Call button, and a dark diagram of PDF, email, EDI and CSV flowing through OrderSync into an ERP.

Visual direction

The logo started as a full chrome wordmark, and we simplified it to just the O. For the site, the question was how much chrome to bring onto the page. I collected chrome I liked, and left out the directions that went too far, because they didn’t match who we were selling to.

Logo exploration

The OrderSync wordmark as thick 3D chrome letters on black, with the O drawn as a rounded square ring.
The same 3D chrome wordmark on white, its letters tilted and overlapping.
The wordmark in thin raised chrome on gray paper, seen at an angle.
A flatter chrome version: the rounded square O as a separate mark beside OrderSync in chrome letters, on white.
The mark OrderSync kept: just the O, a rounded square ring in polished chrome.

The final mark

Kept: chrome as an accent

A glossy chrome pill button labeled Chromatic Button, made in Figma, on a light gray grid.
A comment field with a chrome Send button at its right end.
A 3D mouse pointer in polished chrome.
A 3D arrow in brushed metal on black.
A dark red business card with the name Maya in raised silver foil script.
A lime green card with the LUXA logo pressed into it, standing in a marble holder.

Left out: chrome as the whole look

A futuristic robotics site: “Touching tomorrow, today” over a row of phones, on pale gray.
The Raftel studio’s R, a thick chrome letter pressed into brushed metal.
A design studio’s site with “Studio” in huge chrome script.
A poster spelling PROGRAMMER in chrome letters.
A jewelry site with a melting glass blob in the middle of a gray page.
A dark poster, Founder Haiku · March 2026: ORDERS FLOW THROUGH CODE PIPELINE GROWS in tall condensed type fading from white to gray, with a purple stripe down the left edge.
The logo renders are AI-generated, from February 2026. The references are from my OrderSync board on Pinterest and other saves, February to May 2026.

Design directions

After the wireframes, I built 2 directions in code: everything on near-black, or light with chrome on a few accents. In between, I wrote the rule I kept for the rest of the project: “Chrome is an accent, not a personality.” The light direction followed it.

A. Dark, all chrome

Direction 1: the homepage on near-black, with “One System for All Your Orders” in white fading to chrome gray, a white Book a free intro call pill and a gray Try Free Tools button.

B. Light, chrome as an accent (chosen)

Direction 2: a white page with the same headline in black fading to chrome gray, a chrome Book a free intro call pill, and a black panel showing PDF, email, EDI and CSV flowing into OrderSync and then an ERP.
The 2 directions I built.
From the design-system sheet, Chrome / Metal Accents: “Chrome is an accent, not a personality. Used for: stat numbers, key headline words, card top-edge highlights, badges, dividers. Never for backgrounds or large surfaces.” Below it, stat numbers, the words All Your Orders and 3 pills in chrome gray.
From the design-system sheet I made.

Later, the near-black became the navy already in OrderSync’s code, #0E172B, with 1 name instead of 4.

Design decisions

Clear over clever: every choice points to Book a Call.

A plain headline, with the line under it saying what OrderSync does

NN/g’s homepage guidelines: say plainly what the company does, in users’ words. In Nielsen’s tests, objective copy beat promotional copy.

One filled button, Book a Call, and Sign In as a plain link

NN/g on utility navigation: sign-in is a secondary action that can be played down if it stays top right. NN/g’s homepage guidelines add that emphasizing everything leaves nothing prominent.

Before

The old header: Features, EDI Inspector, Blog and Get Started, then a filled black Sign In button.

After

The new header: Features, Free Tools, Resources and Book a Call, then a plain Sign In link and a chrome Book a Call pill.
The header before and after: Get Started became Book a Call, a button of its own, and Sign In became a plain link.

Book a Call as the only chrome button

The Von Restorff effect: the one item that looks different is the one people remember, as long as the emphasis is used sparingly.

An FAQ on setup time, IT and SPS before the call

NN/g on FAQs: prospects judge a vendor by whether its FAQ lets them set their concerns aside before spending money. See the FAQ in Research.

Free tools as a second path

NN/g’s B2B research: buyers resist handing over contact details, so a vendor has to earn credibility first.

No gradients, orbs or glass, in a calm, typical layout

Google’s study: simple, typical company sites made the best first impression, in as little as 17 milliseconds.

Before

The old OrderSync homepage: a centered headline with “All Your Orders” in a purple-to-blue gradient, glowing purple and cyan orbs behind it, a gradient Book a free intro call button, and a filled black Sign In button in the header.

After

The new OrderSync homepage in light mode: “One System for All Your Orders” in navy and silver gray, a navy Book My Free Intro Call button, and a dark diagram of PDF, email, EDI and CSV flowing through OrderSync into an ERP.

Copy in buyers’ words

Nielsen’s heuristic #2: use the user’s language, not the company’s.

One system for every page

Nielsen’s heuristic #4, consistency and standards: a consistent site is predictable and easier to learn. See the system.

One place the research pushes back: in NN/g’s B2B study, buyers ranked pricing first of 28 kinds of information. OrderSync’s pricing fluctuates based on lots of factors, so they need to book a call.

None of these studied distributors or ops managers, so they explain why the choices should work, and only OrderSync’s booking numbers can show that they did.

Beyond the site: business cards

The same system went onto James’s business cards: navy and white, with chrome on one small thing. One side is just his name, number and the company, typed out. The other has a QR code to book a call, the site’s one action.

The front of the card: OrderSync at the top left, the chrome O in the middle and “Zero Errors. Zero Manual Entry.” at the bottom right, in white on navy.The back of the card: James and a blurred surname in a large serif, Founder, a blurred phone number and www.ordersync.io. A vertical BOOK NOW label sits beside a blurred QR code at the bottom left, and a small chrome arrow cursor at the top right.
The card we went with, both sides. His surname, number and the QR code are blurred for privacy.

Iterations of the front

The same front with OrderSync set a little higher and further left.Navy card with the chrome O in the middle, “Zero Manual Entry. Zero Errors.” at the top left and OrderSync at the bottom right.The front's layout with OrderSync and the tagline in gray.Navy card with the chrome O in the middle and “Zero Manual Entry. Zero Errors.” below it in a gray sans serif.

The site’s navy and chrome rule on the card

NN/g on consistency across channels: a consistent look makes a company seem organized and earns trust.

A labeled QR code to book a call, with the web address beside it

NN/g’s QR code guidelines: say what scanning does, since unlabeled codes aren’t trusted. In a 2025 national survey, 38% typed the web address instead of scanning.

Chrome on one small arrow

The Von Restorff effect: one item stands out only when nothing near it looks the same.

On the navy side, name largest, then title, then contact, with room around them

NN/g on visual hierarchy: make the most important thing biggest, use no more than 3 sizes, and leave space around it.

No “Zero Errors” tagline

The FTC requires evidence for factual claims, and in Nielsen’s tests, cutting promotional language made a site easier to use, because readers stopped questioning the claims.

Directions I didn’t take

Navy card with the chrome O on the left, and OrderSync with “Scale Your Orders, Not Your Workload.” on the right.Navy card with the chrome O and “Scale Your Orders, Not Your Workload.” on the left, and OrderSync, James, Founder and blurred contact details on the right.Navy card with a thick 3D chrome OrderSync wordmark and “Scale Your Orders, Not Your Workload.” below it.Navy card with a flatter chrome OrderSync wordmark and JAMES with a blurred surname below it.Navy card with the chrome O in the middle and James with a blurred surname below it.Navy card with JAMES and a blurred surname on the left and the chrome O on the right.Navy card with only the chrome O in the middle.Pale gray card with a large chrome O, OrderSync spaced out below it, and JAMES with a blurred surname on the right.Pale gray card with James, a blurred surname and phone number, then OrderSync, centered in a typewriter face.Pale gray paper with the OrderSync wordmark embossed in silver, and JAMES with a blurred surname and a signature line at the bottom left.Pale gray card with the chrome O between a chrome arrow and a chrome cursor.
Including the logo explorations. Contact details are blurred for privacy.

System

One set of colors and parts for every page.

The brand’s navy lived in the code under 4 names, so every tweak meant hunting through hex codes and names. I turned the look into a small system: 5 navies, 9 color roles that flip on their own in dark mode, and 4 shared components.

Color

Brand navy

  • navy-1

    #0E172B • Darkest; replaces black

  • navy-2

    #151F34 • Dark-mode page

  • navy-3

    #1C274C • Headings and links

  • navy-4

    #0F172A • Call-to-action band, diagram

  • navy-5

    #1C274C • navy-3 at 30%, logo strip

9 color roles, light and dark

  • surfacePage: #FFFFFF / #0E172B
  • surface-mutedBands: #F9FAFB / #151F34
  • surface-inverseDark sections: #0E172B / #FFFFFF
  • contentText: #0E172B / #FFFFFF
  • content-mutedSecondary text: #64748B / #D1D5DB
  • content-subtleTertiary text: #9CA3AF / #9CA3AF
  • content-linkLinks: #1C274C / #E5E7EB
  • content-inverseText on dark: #FFFFFF / #0E172B
  • lineBorders: #E5E7EB / #374151

Type

Aa

Satoshi

Headings and buttons

Aa

Inter

Body text

  1. Display • 72 / 78One System for
  2. H1 • 48 / 58Still Typing Orders
  3. H2 • 35 / 45Catch Errors Before They Cost You
  4. H3 • 24 / 32How long does it take to go live?
  5. Body • 16Our AI agent reads, validates, and syncs orders from any source to your ERP.

Components

Button

Eyebrow

Section surfaces

Chrome accent

Chrome shows up twice: on the Book a Call pill in the header, and as a silver glint that sweeps once across each headline’s key words. Hover the gray words to replay it.

Pill

Glint

One System for
All Your Orders

OrderSync’s design system as it shipped, set in its own fonts, Satoshi and Inter.
2,480
26

To keep it that way, I wrote a script that visits every page in the sitemap, screenshots it in light and dark, flags any color outside the system, and compares each screenshot with the last approved one.

Results

The redesign shipped on June 19, 2026, as 8 pull requests touching 237 files, from the homepage to sign-in and billing.

Before

The old OrderSync homepage: a centered headline with “All Your Orders” in a purple-to-blue gradient, glowing purple and cyan orbs behind it, a gradient Book a free intro call button, and a filled black Sign In button in the header.

After

The new OrderSync homepage in light mode: “One System for All Your Orders” in navy and silver gray, a navy Book My Free Intro Call button, and a dark diagram of PDF, email, EDI and CSV flowing through OrderSync into an ERP.
The same homepage in dark mode: white and gray headline on navy, a white Book My Free Intro Call button, and the same diagram.
Dark mode, where the navy becomes the page.

After launch

PostHog started recording on June 26, a week after launch, so these numbers show how the new site performs rather than a before and after.

8
2.4×
196 vs 57

From the homepage to a booking

  1. 52
  2. 4 of 52
  3. 3 of 4

How far down the homepage

  1. 45
  2. 12 of 45
From PostHog, June 26 to October 8, 2026, not counting OrderSync’s own team. Hover a step to see what it counts.

3 of the 4 people who clicked Book a Call went on to open the booking window, so the step from button to booking works.

The paths people took

Path from the journey mapWhat PostHog shows
The homepage to a call57 visits started on the homepage, 45 of them never opened a second page, and 6 people went on to open the booking calendar.
The EDI Inspector first196 visits started there, more than on any other page.
A free tool first38 visits started on a tool page, and 2 of the 8 finished bookings came from those visits.
A retailer’s EDI page8 visits started there, and none booked in the same visit.
A comparison to a callNo one booked in a visit that started on a comparison or the SPS Commerce post.
Not buying yet24 visits started on the blog. Newsletter sign-ups have no event of their own, so PostHog can’t count them.
From PostHog, June 26 to October 9, 2026, not counting OrderSync’s own team. PostHog can’t tell personas apart, so it counts paths, not people types.

Next: move the FAQ’s answers higher, since 12 of 45 visits reach the bottom of the homepage, and give the EDI Inspector a clearer path to a call, since 3.4 times as many visits start there as on the homepage. The tracking needs a fix too: PostHog has 8 finished bookings since June 26, but 6 of them came from visits with no page view, so they can’t be traced back to a page.

Reflection

The research did the most work on the words. It told me what buyers worried about and in what order, and the look followed from who was reading: business people who don’t want the wheel reinvented.

Next time I’d talk to buyers myself. Reviews told me what went wrong with other vendors, but not how someone reads our page. And I’d set up tracking before launch, so there’s a before to compare with.

How I built it

Next.js and Tailwind, with color tokens that flip for dark mode, 4 shared components, and a script that screenshots every page to check it against the system. The engineering side has the details.