Project Context

Designing a directory for riders who are tired of guessing

The tagline says it all: "You just need to know where to start looking." Bikemess was built to solve a specific, frustrating problem for Singapore's cycling community — finding which Local Bike Shop (LBS) carries the brand or component you need. Not every shop stocks every brand. Calling around or posting in Facebook groups was the only option. There was no reliable, searchable directory.

The vision was a community-powered LBS directory — where riders could search by brand, category, or location to find which shops near them stock what they need. Crucially, the community itself could contribute: adding new listings, updating shop information, and keeping the directory accurate over time. I came on board as the founding designer — a freelance engagement where I owned the full design vision, from initial discovery through to production-ready Figma specs handed off to the CTO and development team.

The founding designer freelance model. This engagement operated differently from an in-house role. As a freelancer, every design presentation was a stakeholder sell — I had to bring the founders and CTO with me at each milestone rather than having the luxury of ongoing daily alignment. This shaped how I worked: each session was structured around a clear problem statement, a design rationale, and an explicit call for decision, not just a show-and-tell.

The remote team structure — designers in Europe and Malaysia, founders in a different timezone — added another layer. Design reviews happened asynchronously via Figma comments and synchronously via scheduled video calls. Clear documentation and well-organised Figma files weren't a nice-to-have; they were the connective tissue that kept the remote team aligned and the dev handoff clean. For a community-powered directory, two things were especially critical: getting the taxonomy right (how shops are categorised — MTB, Roadbike, Foldies, E-Bikes — and how brands are indexed) and designing the contribution model so riders could add and update listings easily. The community contribution layer was what made Bikemess sustainable — it couldn't rely on Bikemess staff to keep every listing up to date.

Remote Team Structure

Leading across timezones and cultures

The team was intentionally distributed — each designer brought specific strengths, and the remote structure required a more deliberate coordination model than a co-located team. Clear ownership, async-first communication, and a shared Figma workspace were the three pillars that made it work.

🇸🇬

Singapore

Founding Designer (Lead)

Overall design vision, founder alignment, directory IA & taxonomy, design system, key screens, CTO handoff coordination.

🇪🇺

Europe

Product Designer(s)

Rider-facing discovery flows, shop listing pages, search & filter UX, mobile-responsive screens, and visual refinement.

🇲🇾

Malaysia

Product Designer

Shop owner dashboard, listing management flows, component production, and Figma file organisation for dev handoff.

Async Briefing

Each design sprint kicked off with a written brief in Figma — context, user goal, constraints, and reference screens — so all three timezones started from the same page.

Parallel Design

Designers worked in parallel on their assigned modules within a shared Figma workspace. Daily Figma comment threads replaced stand-ups for async progress tracking.

Founder Review

Bi-weekly video presentations with the founders and CTO. Each session covered decisions needed, not just work done — keeping the founders active participants, not passive approvers.

Dev Handoff

Annotated Figma specs with component notes, interaction states, and responsive behaviour documentation. Direct sessions with the CTO to walk through complex flows before development started.

Research & Discovery

Understanding riders before designing for them

The research approach for Bikemess was lean by design — a freelance project with a focused scope and a tight timeline. The goal wasn't exhaustive research; it was targeted insight gathering to de-risk the most critical design decisions: how riders currently find shops, what information they need before committing to a visit, and how shop owners would want to be discovered and represented on the platform.

Phase 1 — Vision Alignment

Founder Vision Workshops

Before any research, two structured sessions with the founders to document their vision, non-negotiables, and differentiators. Key output: a product vision brief that became the north star for all design decisions — especially useful for async remote team alignment and stakeholder presentations. The founders' deep knowledge of the MTB community provided rich qualitative insight that would have taken months to gather through traditional user research.

2 vision workshopsProduct vision briefNon-negotiables docFounder knowledge capture

Phase 2 — Competitive Audit

Directory & Discovery Platform Analysis

Audited local and regional bike shop directories and general business directories relevant to Singapore's cycling scene. Key finding: no platform indexed Singapore LBS by brand stocked — you could find a bike shop on Google Maps but had no way to know if it carried Wolftooth Components or Revel Bikes before walking in. The few community-maintained lists (Facebook groups, Reddit threads) were unsearchable and rapidly became outdated. The gap was clear: a searchable, community-maintained directory organised by brand, category, and LBS.

8 platforms auditedDirectory UX benchmarkingTaxonomy gap analysisSearch behaviour mapping

Phase 3 — Community Research

MTB Rider Interviews & Community Observation

Conducted interviews with active cyclists across Singapore's MTB, road bike, and foldie communities. Supplemented with observation in Singapore cycling Facebook groups and Telegram channels. Key findings: riders consistently asked the same question in community groups — "which LBS stocks [brand]?" — confirming the core problem. When they did find a shop via word of mouth, they needed to verify: does it actually carry this brand? Is it open today? What other brands does it stock? None of this was findable online without calling ahead. The community contribution insight also emerged here: riders were already sharing this information informally — Bikemess just needed to give them a structured place to do it.

10 rider interviewsCommunity observationShop-finding behaviourInformation needs mapping

Phase 4 — Shop Owner Research

Bike Shop Interviews & Discovery Behaviour Analysis

Spoke with LBS owners and staff across Singapore — covering MTB specialists, road bike shops, foldie retailers, and multi-category stores. Key findings: most LBS had a basic Instagram presence but no structured way to communicate their brand portfolio to new customers. Discovery was almost entirely referral-based. Owners were open to being listed on a directory but wary of maintenance burden — they didn't want to log in weekly to update a profile. This directly validated the community contribution model: let the community add and update listings, with shop owners able to claim and verify their own profile when they choose to.

6 shop interviewsDiscovery behaviour mappingCapability communication needsMVP profile scope

Phase 5 — Design & Validation

Prototype Reviews & Founder Sign-off Sessions

Rather than formal usability testing (limited by freelance timeline and budget), validation happened through structured prototype reviews with the founders — who as active MTB riders themselves provided immediate authenticity checks — supplemented by informal reviews with 4 riders from the interview cohort who reviewed clickable Figma prototypes of the key discovery and shop-finding flows.

Figma prototype reviewsFounder sign-off sessions4 rider prototype reviewsCTO technical review

User Personas

Two sides of the same trail

Research produced two primary personas — a rider trying to find the right shop for what they need, and a shop owner wanting to be discovered for what makes them genuinely different. Every design decision was weighted against both.

Jake Morrison

Trail & Enduro Rider, MTB Enthusiast
Age 27 · Kuala Lumpur

Riding levelIntermediate-Advanced

Shop visits3–6 times per year

Search methodFacebook groups, word of mouth

Trust driversPeer reviews, community rep

Goals

Find a shop that actually stocks the specific brand or component he needs before making the trip
Know which shops near him can do specific services — suspension tuning, dropper bleed, wheel builds
Discover shops he didn't know existed — not just the ones that show up on Google Maps

Pain Points

Currently relies on posting in Facebook groups — slow, inconsistent, and depends on who sees it
Google Maps results are generic — no way to filter by MTB specialisation or brand stock
Has made wasted trips to shops that didn't stock what he needed and didn't say so online

"I just want to know — before I drive 40 minutes — whether that shop actually has what I'm looking for."

Alex Wong

Independent Bike Shop Owner & Rider
Age 33 · Penang

Shop typeMTB specialist, independent

Shop focusTrail & enduro components

Online presenceInstagram, Google Maps only

Tech comfortModerate — mobile-first

Goals

Be discoverable for his shop's specific strengths — not just as a generic "bike shop"
Let riders know what brands he stocks and what services he offers without manual social updates
Attract customers who already know what they want and are more likely to convert

Pain Points

Google Maps only shows his shop name and address — nothing about what makes him different
Managing Instagram to communicate stock and services is time-consuming and doesn't reach new riders
Walk-in customers often ask for things he doesn't stock — wasted visits for both sides

"I specialise in suspension and enduro builds. I just want the right riders to know that before they walk in."

Design Challenges

Four problems worth solving

Brand that rides

The visual identity had to feel authentically MTB — raw energy, trail grit, technical credibility — without tipping into generic extreme sports cliché. Getting the brand right was a prerequisite for every other design decision: typography, colour, imagery treatment, and tone of copy all had to pass the "rider test".

LBS taxonomy & browse model

The directory needed three distinct browse paths — by Category (MTB, Roadbike, Foldies, E-Bikes), by Brand (alphabetical index of brands with retailer counts), and by LBS (find a specific shop directly). Designing navigation that felt coherent across all three entry points, without creating three separate experiences, was a key IA challenge.

Community contribution model

Bikemess's long-term accuracy depended on the community, not a staff team. Designing the "Add New Listing" and "Update Information" flows to be fast and trustworthy — while preventing spam and errors — required careful balance. The update request model (flagging for admin review rather than direct edits) was a deliberate trust design decision.

Remote handoff fidelity

The gap between design intent and implementation is always a risk. With a remote CTO and dev team in a different timezone and without the ability to sit together at a monitor, the quality of Figma documentation and the structured handoff sessions became the only mechanism for ensuring the built product matched the design.

Information Architecture

Two experiences, one directory

The IA needed to serve two distinct modes — rider discovery (find the right shop) and shop owner profile management (be found for the right reasons) — with a shared platform layer and a community dimension (reviews, shop specialisations, rider recommendations) that built trust on both sides. The rider discovery experience was mobile-first; the shop dashboard was desktop-primary.

Rider Discovery Experience

Root

Bikemess

Nav L1

Home / Discover

Home / Search

Browse by Categories

Browse by Brands

Browse by LBS

Add New Listing

L2 Pages

Search by brand / location

Category results (MTB / Road / Foldies / E-Bikes)

Brand index A–Z with retailer count

LBS results list + map view

LBS profile card (hours, brands, services)

Region / Category / Hours / Type filters

Map full-screen view with pins

Update information request

Community Contribution (Add / Update Listing)

Nav L1

Dashboard

Add New Listing

Update Information

L2 Pages

Shop type (In-store / Delivery / Service)

Category (MTB / Roadbike / Foldies / E-Bikes)

Address, postal, contact

Operating hours

Social media links

Brand inventory (+ add another brand)

Request type (Update / Add)

Admin review & approval

Key Design Decisions

Choices that defined the product

◎

Dark, high-contrast visual identity rooted in trail culture

Chose a dark-primary colour system — deep blacks and charcoals with a signature red accent — that evoked dirt tracks, bike frame aesthetics, and the raw energy of technical terrain. Typography used a condensed, bold display face for headings (athletic, punchy) paired with a clean sans for product information. Founders validated this against their own rider instincts in every review session: "does this look like it was made by a rider?"

◈

Three browse paths, one coherent platform

The navigation gives riders three distinct entry points: Browse by Categories (MTB, Roadbike, Foldies, E-Bikes), Browse by Brands (an A–Z index showing how many retailers stock each brand), and Browse by LBS (find a specific shop directly). Each path serves a different rider intent — "I need MTB parts", "I want Wolftooth Components specifically", "I want to check if Emmanuel Cycles is open." Designing the three paths to feel coherent rather than like separate apps was the core IA challenge.

◐

Dual list + map view for search results

Search results are presented simultaneously as a list (LBS cards with shop name, contact, brands stocked, services, and operating hours) and a pinned map — both always visible in a split-pane layout. Riders can scan the list for detail and orient spatially on the map at the same time. Purple pins with shop name labels on the map make the geographic spread immediately readable. This split-pane model was a direct response to the research finding that riders needed both proximity context and detailed shop information before deciding to make a trip.

◇

Community contribution with admin oversight

The "Add New Listing" flow is open to any rider — not just shop owners. The form captures shop type (In-store / Delivery / Bicycle service), category, address, operating hours, social media, and a brand inventory that can grow with "+ Add Another Brand". Critically, when listing information is wrong or outdated, any rider can click "Missing or wrong information?" on any listing card and submit a structured update request for admin review. This community correction model keeps the directory accurate without requiring Bikemess staff to audit every listing.

▣

Structured Figma documentation for async remote handoff

Every component in the Figma file was annotated with interaction states, responsive behaviour, and implementation notes. A dedicated "Dev Handoff" section in each page contained breakdowns of complex interactions — hover states, filter behaviours, mobile breakpoints — in a format the CTO could reference independently without needing a live call for every question. This was the operational design decision that made the remote implementation work.

Figma View the full design file: Bikemess Directory — Figma

Final Designs

The product in action

Six screens from the final Bikemess product — covering the full rider journey from landing and discovery through to search results, map view, brand browsing, listing submission, and community update requests.

Screen 01 — Home

Landing page — "You just need to know where to start looking"

The landing page opens with a search bar and three top nav paths: Browse by Categories, Browse by Brands, Browse by LBS. Three feature sections below communicate the core product proposition — search by brand and region, community-powered listings, and shop-informed discovery. The "Add New Retail Listings" CTA in the nav establishes the community contribution model from the first screen.

Screen 02 — Search Results

LBS listings with split-pane map

Search results for "Wolftooth components" — a split-pane layout showing LBS cards on the left (name, contact, brands stocked, services, operating hours) and a live map with purple-pinned shop locations on the right. Region, Category, Hours, and Type filters sit above the results. Each card surfaces the matched brand in bold, and shows "Missing or wrong information?" as a persistent community correction prompt.

Screen 03 — Map View

Full-screen map with all LBS pins

The full map view shows all indexed Singapore LBS as purple pins with shop name labels — Rodalink, Emmanuel Cycles, Custom Bike Co., Aloha Bikes Shop, Baik Cycles, Kaylor Bike Service and more. A "Show Directory Listings" CTA returns to the list view. The geographic spread immediately communicates coverage and helps riders identify the nearest relevant shop.

Screen 04 — Browse by Brands

Brand index — A–Z with retailer counts

The Browse by Brands page presents an alphabetical A–Z index of all brands stocked across the directory, each with a live count of how many retailers carry it ("5 retailers is selling this brand"). Riders searching for a niche brand like ANVL Components or Airdrop Bikes can see availability at a glance before drilling into specific shops.

Screen 05 — Add Listing

Community listing submission form

The "Add New Retail Listing" form — open to any community member. Covers shop type (In-store shopping, Delivery/Transportation, Bicycle service), category checkboxes (MTB, Roadbike, Foldies, E-Bikes), address, operating hours, social media platform, and a brand inventory with "+ Add Another Brand". Designed for simplicity over completeness — a useful listing can be submitted in minutes.

Screen 06 — Community Update

Requesting an update — community correction flow

When a rider spots incorrect or outdated information on any listing, they can trigger a structured update request modal directly from the results page. The form captures request type (Update Listing / Add Listing), listing name, and a free-text description. Submissions route to admin review before going live — ensuring community contributions improve the directory without introducing noise or errors.

Research Findings

What the research and reviews revealed

Browse entry points

Three distinct discovery paths — by Category, by Brand, and by LBS — each serving a different rider intent. The Brand index alone lists brands A–Z with retailer counts, letting riders find stockists for niche brands like Wolftooth or Revel in seconds.

2-pane

List + map simultaneously

Search results always show the list and map side by side — riders get shop detail and geographic context at the same time. Purple-pinned shop names on the map make the spatial spread instantly readable without toggling between views.

Open

Community-powered listings

Any rider can add a new LBS listing — the form covers shop type, category, address, hours, brands stocked, and social media. The platform doesn't depend on shops self-registering; the community builds the directory.

Flagged

Community correction model

Every listing card shows "Missing or wrong information?" — a structured update request flow that routes corrections to admin review. Keeps the directory accurate without requiring Bikemess staff to audit listings manually.

Singapore-first launch

Launched with real Singapore LBS data — Emmanuel Cycles, Custom Bike Co., Aloha Bikes Shop, Tay Junction, Cannasia, Rodalink and more — giving the platform immediate credibility and searchable value from day one.

Shop categories at launch

MTB, Roadbike, Foldies, and E-Bikes — four categories covering Singapore's primary cycling disciplines, each filterable in search results alongside Region, Hours, and Type filters for precise discovery.

Outcomes & Impact

From vision to a buildable product

The Bikemess engagement delivered a complete, production-ready design system — from brand identity and design tokens through to fully annotated screen designs for the rider discovery experience, shop profile system, and shop owner dashboard. The remote team structure proved effective across the full project lifecycle, with no major redesign cycles and clean development handoffs at every milestone.

0→1

Full product designed from blank canvas to production-ready Figma specs

Timezones coordinated across Singapore, Europe and Malaysia without misalignment

100%

Founder milestone sign-off rate — no complete redesign requests across the full engagement

The founding designer engagement model — freelance, remote, vision-to-implementation — required a different set of skills than in-house product design. The ability to present and sell design decisions to non-designers, manage a distributed team without direct authority, and produce documentation precise enough for a remote dev team to build from independently were all as important as the design craft itself.

Reflections & Learnings

What freelance founding design taught me

→

Vision alignment at the start saves redesign time at the end. The founder workshops in week one felt slow. In hindsight they were the most leveraged investment of the whole engagement. Every design decision that got made quickly later in the project was only possible because we'd already aligned on the vision, the non-negotiables, and the product principles upfront. With founders who have strong opinions, investing in that alignment early is non-negotiable.

→

Freelance presentations are design reviews and sales pitches simultaneously. When you're not on the payroll, every stakeholder session carries more weight — decisions get made, not deferred. This forced me to structure every presentation around the decision that needed to be made, not just the work I'd done. That discipline made the reviews faster, cleaner, and more productive than most in-house review cycles I'd experienced.

→

Remote team leadership without authority requires over-communication by design. You can't nudge a designer in Kuala Lumpur by walking over to their desk. Clarity in written briefs, explicit ownership in Figma, and structured async feedback became the leadership tools. The designers didn't need management — they needed context, clarity, and a shared standard to work toward.

→

Figma documentation is the product when you're not in the same room as the dev team. I've always annotated Figma files, but this project raised the bar significantly. The CTO couldn't ask me a quick question in a hallway — the file had to anticipate every implementation question before it was asked. That standard of documentation is now something I bring to every project regardless of whether the team is remote.

→

If I were to revisit: I'd push harder for at least one round of genuine usability testing with buyers — not just founder and rider prototype reviews. The founders' deep MTB knowledge was invaluable, but it also created a potential blind spot: they already knew how to navigate the domain. A first-time buyer who was new to MTB parts would have surfaced different friction points in the compatibility filter that we may have missed.

Find theRight Shop.