Surfers buy the photos and videos that photographers shoot of them from the beach, and photographers sell their sessions. The contest asked for three pages at desktop and phone size, plus the iOS app: the map home, the spot page, and the photographer's studio.
🏁 Contest entry. It went to another entrant, so the product stays theirs and is not named here. Every screen below is the real build in HTML and CSS on the client's own design tokens, not a flat mockup.
The prototype already existed and worked. What it lacked was composition and presence: cramped page tops, a brand that repeated itself, two offers that were easy to miss, and headers the founder called the common weak point. The brief invited UX proposals as long as they were shown and argued, so each change here is presented next to the screen it replaces, with the reason in one line.
Thirty-two spots cannot each get a hand illustration, and stock art would break the mood. So the header became a recipe: one prompt template, one scene line and one fixed seed per spot, generated from that spot's own photograph and cleaned into a transparent ink PNG of 60 to 90 KB. Rebuild it a year later and the same drawing comes back.
The product's best feature was buried inside a single capture page. It moved into the grid: tick the clip you are in, run Find my wave, and the whole session comes back filtered on you, with the days before offered next to it. Any selection can also save or go to the cart, from the same bar on phone and desktop.
Arrows walked people into empty days. The row now carries a capture count per day, groups the day by hour, and opens on the latest day that actually has footage, so nobody lands on a blank page.
Coastline, shallows and depth lines on paper instead of a stock basemap, and every spot name moved out to sea on a leader line. Seven spots that used to overlap in one bay are all readable, and one tap on a name opens the spot instead of two.
Each capture carries its time, its length, the photographer who shot it and what it costs, so the pricing column on the side disappears and the grid answers everything at a glance.
Built the way the product is built: server-rendered HTML with a single 640 px breakpoint, the iOS app being the same phone layout without the site header and with a native tab bar. The screens hand over as classes, not as a picture to rebuild.
A small extra that came out of watching how photographers actually work: a beach card in the studio, with the product name and a QR code big enough to hold up on the sand, so a surfer can find their session before they have dried off.
Existing app or site, redesigned page by page, argued decision by decision, and handed over as real code.
