Keeps. UX and a scalable design system for a sport-investment platform.

Blink · the whole case in seven bulletsIf you only have 40 seconds

• 2025–2026 — UX, Visual UI and a scalable design system for Keeps, a sport-investment platform (NDA, details obfuscated).
• Hybrid role: I owned UX across the whole platform, then took two designers’ visual work and turned it into a scalable component system.
• Two products, one platform — a modular marketing website and a login-gated investment dashboard.
• Lets people invest in sport — buy, trade and cash out stakes like shares, across a primary and a secondary market.
• Designed the core journeys: onboarding, investment purchase, and secondary-market listing/buying of fractional shares.
• “Options” — match tickets sold as tradeable rights-to-buy (like stock options), with trading windows, price/volume graphs and first-come seat allocation.
• Built an adaptive design system: decimal-coded colour shades (e.g. Mid Blue 50) and toggleable modular blocks for endless marketing templates.

Glance · 01Two products, one platform

Keeps lets people invest in sport — buying, trading and cashing out stakes the way you would shares. The product splits in two: a modular marketing website and a login-gated investment dashboard, with a plan to keep layering features in over time. I joined with a rough sitemap and a copy structure, owning UX for the whole platform.

Glance · 02A marketing site that scales endlessly

Marketing pages were built as templates that scale endlessly — a set of modular blocks arranged across a deep content tree, including an Academy wiki for everything from quick answers to step-by-step tutorials. Colour variations and on/off toggles let the marketing team spin up landing-page variants for campaigns and SEO without new design.

Glance · 03The dashboard & core journeys

The dashboard pushes users straight into action — stats moved onto the Investment page rather than the landing screen. I mapped the primary-market purchase journey and the trickier secondary market, where investments and ISAs are sold as fractional shares priced by share count, quantity and resulting valuation.

Glance · 04Options — trading tickets, legally

Reselling tickets online is legally messy, so tickets became tradeable “options” — the right to buy at a fixed ticket price, traded like stock options. The design solved the hard parts: time windows per tier so tickets always sell, first-come seat allocation (an option isn’t a seat), and investor tools — price×time and volume×time graphs plus a live list of traded options.

Glance · 05A design system built to grow

I turned the finalised visual designs into a scalable component library — text styles, colours, buttons, cards and links as adaptive templates. Colour shades were generated then pruned and decimal-coded (50 = the brand base, lighter toward 0, darker toward 100) so anyone could shift a hue predictably and keep the front end consistent.

OverviewTwo products, one platform

The product is split in two: a marketing website, and the investment dashboard which sits behind a login gate — though some information is interwoven for the MVP. The goal is to keep adding features into the product as time goes on.

When I joined the project I had a rough sitemap and a document with a copy structure to work from.

01 — MarketingWebsite Wireframes

Marketing pages were designed to be templates that can scale endlessly and evolve with the team's needs. We created a set of modules — blocks that can be arranged across CP and AP with a vast tree structure that adjusts to any content.

Design systemSetting up the styles

We initially generated lots of colour shades with a plugin, then selected the shades we needed and removed the rest. We name-coded them with decimals so we could easily identify the shades — the main ones were 50, so for example ‘Mid Blue 50’ is the original colour that came from the branding guide. The lighter ones go towards 0 and the darker ones towards 100, so we can easily shift to a darker or lighter hue.

Design systemTaking designs and creating scalable components

While I was doing the wireframes, the visual UI designers were finalising the website designs. I took these designs and fleshed them out with the text styles, colours and components — buttons, cards, links and so on — to create scalable templates.

The design system for the website was built to be adaptive, working like a template library that could accommodate all sorts of content, since the marketing team could create all sorts of landing-page variations for campaigns and SEO purposes.

To facilitate this, colour variations were set on certain components, along with toggles to turn cards on or off.

02 — PrototypeWebsite Prototype

03 — OnboardingThe Platform — Onboarding + Investment Purchase

04 — JourneysCore product journeys

JourneyPurchase journey (Primary Market / Buying only)

JourneySecondary market journeys (Listing / Buying)

Investments or ISAs were the most complex things to sell on the secondary market, as you can set fractions by the amount of shares. The variables include the amount of shares and the share price, followed by the resulting valuation.

05 — OptionsOption Listing & Purchases

Because of legal reasons we can't just resell tickets online, as they fall under different legislation in each state, so we created a system similar to stock-trading options. You can trade the option (the right to purchase the ticket) at whatever price you want, while the ticket price itself stays fixed.

To do that we needed a couple of workarounds:

1. How do we incentivise people to trade the options, while still ensuring the ticket gets sold at the end — and we don't end up with unsold tickets and empty stadium seats?Options have a time window to be traded, based on their tier level; once the time is up, or the item isn't sold, the ticket needs to be purchased by the option holder. Pre-approved payments are being considered as an addition.
2. In order to ‘not be a ticket’, an option holder can't select a seat — so how do we allocate seats for an event like a football match?The options are solely for the right to buy the ticket within a time window; seats are allocated on a first-come, first-served basis.
3. Viewed from an investor's point of view, we need tools for trading — how fast the options are trading, price and volume over time.On the option page we added two graphs, price×time and volume×time, alongside a list view showing all available traded options and their price, plus an option to show past (missed) options that are no longer available.

---

06 — Tickets🎫 Ticket Purchase (Video Prototype)

07 — SettingsSettings

Were mostly handled by the core third party.

Thanks for bearing to the end!