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

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 over 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!