Building a marketplace from scratch for a sport with nowhere to buy or sell boats
Freelance (Top Mark) | 2026 | 12 weeks
Role: Product Designer, Website Builder, Copywriter
Team: 1 Product Designer
Tools: Figma, Wordpress, Listivo, Elementor, WooCommerce, Google Maps API, Claude
Top Mark is a live marketplace for one-design sailboats that was designed, built, and launched by me, end to end, with real listings and real sellers within the first week.
Problem
There was no dedicated marketplace for buying and selling one-design sailboats (boats built to strict, identical class specifications, so that every boat in a given class is essentially the same). Because buyers for these types of boats care about class-specific details, a generic boat listing site doesn't meet their needs. Instead, sellers were stuck posting in a patchwork of Facebook groups, Craigslist, and general boat-sale sites that weren't built for how one-design sailors actually need to search for and compare boats.
My Role
I owned this project end to end: choosing the platform, designing the visual identity and site structure, writing the copy, and building the entire live site myself—from the homepage to the listing forms, payment packages, and search experience.
Initial Conceptualizing
Grounding decisions in a competitive audit
Before designing anything, I looked at how sailors currently search for and list boats: Sail1Design, Facebook Marketplace, Craigslist, YachtWorld, and Melges' own site. I wasn't deciding whether this marketplace should exist, the client had already made that call, but this audit shaped nearly every design decision that followed: what information a listing needed to lead with, how search and filtering should work by class, and where existing sites felt cluttered or generic in a way Top Mark could avoid.
Choosing a platform with Claude as a research partner
The client wanted a subscription-based paywall for posting listings, so before any design work started, I used Claude AI to research and compare no-code classifieds platforms: Yclas, Brilliant Directories, and WordPress with the Classima theme. I weighed each on cost, design flexibility, and—since recurring billing was a hard requirement—how well each could handle subscriptions.
Yclas was cheapest and fastest to launch, but its design ceiling was lower and subscriptions were a secondary feature rather than a real strength. Brilliant Directories was the most turnkey and handled subscriptions natively, but it was a closed platform, meaning I'd be renting infrastructure the client didn't own at an ongoing monthly cost, bundled with a long list of built-in features that we would never use. WordPress had the steepest learning curve and the most setup work—hosting, theme, Elementor, WooCommerce—but it gave the client full ownership of their site and data, the most design freedom, and room to grow later without a platform migration.
I recommended WordPress. Since I hadn't built a WordPress site from scratch before, I used AI to walk through the setup step by step—buying the domain, choosing hosting, installing WordPress, and layering in the theme and subscription plugin.
Once inside WordPress, I initially built on the Classima theme, but pivoted to Listivo when Classima proved too rigid for the class-specific listing structure the marketplace needed.
Designing the visual identity with Claude Design as a creative collaborator
I used Claude Design as a brainstorming partner throughout the visual identity process—a fast way to generate and compare directions, not a shortcut that made the decisions for me.
For the logo, I went through several rounds: early concepts explored a Melges-inspired navy and steel-blue sail mark, before I redirected toward a bolder red/white/navy palette that felt more like performance sailing gear than a generic boat-sale site. I pushed the concept further by asking for a version where a letterform itself doubled as a boat—reshaping the "K" so its strokes read as a mast, sail, and boom. I had Claude generate a few variations of that idea (a masted K, a spinnaker-curved K, a hull-curved K) so I could compare which read most clearly at small sizes, like a favicon or nav bar. (The logo live on the site today is still a placeholder and final direction is still in progress.)
I used the same iterative process with Claude for typography, comparing pairings like Barlow Condensed with Barlow, and Bebas Neue with Jost, before settling on a direction that felt performance-oriented without reading cold, as well as for on-site microcopy, testing a few tones for small UI text.
Site moodboard I used to have Claude Design create an initial concept
Initial concept for site from Claude Design based on my prompt and uploaded materials
Design & Build Process
Designing for mobile-first
Since most sailors were likely to browse and list boats from their phones, I designed the entire site mobile-first. That meant prioritizing easy-to-tap search and filter controls, a listing form that stayed usable on a small screen, and ensuring the landing page was optimized for mobile. Desktop was designed as an expansion of the mobile experience, not the other way around.
Iterating with the client
Because the client was also the subject-matter expert on one-design sailing, I treated her feedback as a core part of the design process rather than a final sign-off step. We checked in weekly throughout the build, sharing designs early and adjusting based on what actually mattered to sellers and buyers in this specific niche, not just general marketplace best practices.
One concrete example: I'd originally planned a simpler, cheaper search experience where buyers typed in a state to filter listings by location. In one of our weekly check-ins, she pushed back—she wanted buyers to be able to search visually on a map instead. That feedback meant taking on real added scope: integrating the Google Maps API, which I hadn't worked with before, instead of shipping the simpler version. It was a clear case of the client's on-the-ground knowledge of how buyers actually search improving the product beyond what I would have shipped on my own.
Solving friction inside the template
Listivo got me most of the way there, but I hit several constraints:
Global styling didn't always apply. Colors and fonts I set in Listivo's global design settings wouldn't consistently update across the site, so I used Claude Code to help write custom CSS to force the correct styling in the places the theme wouldn't cooperate.
The listing form needed real logic. To make sure sellers filled out the right fields for their specific boat class, I built out if-then logic in the listing form so the fields shown adapt to what the seller is actually listing, instead of showing every possible field to everyone.
The homepage needed a full rebuild. Listivo's default homepage layouts didn't fit what a one-design-specific marketplace needed to communicate, so I fully custom-built the homepage in Elementor, which meant taking a 4-hour Elementor course first to learn the tool well enough to do it right.
New technical skills, learned on the fly. I integrated the Google Maps API for location-based search, and set up WooCommerce for payments, including building out the pricing tiers and coupon system from scratch.
Launching and finding the first users
Once the site was live, I didn't just wait for sellers to show up — I posted through Top Mark's Instagram and reached out directly to my own sailing community to get the first listings on the platform.
Outcomes & Reflection
Key Outcomes
Within the first two weeks of launch, Top Mark had 8 listings from real sellers. The site is live now at topmarkboats.com, with a “list your boat” flow, a customizable search and compare experience, pricing packages, and a unique visual identity.
This project is the one I'm proudest to point to for a simple reason: nothing about it was theoretical. I made the platform decision, learned the tools I didn't already know, built the thing, and then went and got the first users myself.
Final Thoughts
Top Mark is the clearest example of how I like to work when I have full ownership: ground decisions in research even under tight scope, know when a tool or platform isn't working and switch rather than force it, and pick up whatever new skill the project actually needs—whether that's Elementor, an API, or a payment system—rather than treating "I don't know how to do that yet" as a stopping point.
Example of a real listing on the site