ANODA Discuss your product

Charity property marketplace, empty space matched

SpaceBridge is a web marketplace where property owners offer free or discounted space and charities find it.We designed both sides and refined its logo.

SpaceBridge search for a charity: filters by location and price on the left, property cards with the causes each space suits, dates, rooms and price
64
screens designed for both sides of the platform
2
roles property owners and charities, each with its own product
Q&A
instead of chat answers an owner can compare and shortlist

SpaceBridge connects property owners who have free or discounted space with the charities that need it. We designed both sides of the marketplace , from information architecture and user flows to the final desktop web UI , refined the logo the client came with, and built a project UI kit on Untitled UI . Our part was design; building and launching it was outside our scope.

What moves through SpaceBridge

One chain, from an empty room to an agreement:

  1. Listings

    • Property type
    • Causes it suits
    • Dates it’s free

  2. Search

    • Location radius
    • Price or free
    • Rooms and access

  3. Interest

    • Owner’s questions
    • Charity’s answers

  4. Applicants

    • Pending
    • Shortlist
    • Active
    • Archive

  5. Agreement

    • Letter of intent
    • Contract

  6. Requests

    • Charity listings
    • Owners’ offers
A cause A property
Listings lead with the causes a space suits, then its rooms, price and dates.
Structured Personal
Set questions instead of chat, with Contact one click away.
Template Own face
Untitled UI underneath; SpaceBridge’s colour, type and illustration on top.

A space a charity can judge before applying

Found
A charity has little time to spare, and a listing that hides the dates or the price until the third screen spends it on spaces that were never going to fit.
Decided
One page that reads in the order a charity decides: the photos, the address with the causes the space suits, rooms, price and dates, then the details. The owner’s questions sit beside it, so applying never means leaving the listing.
For the user
A charity rules a space in or out at a glance, and applies from the same page.
SpaceBridge property page for a charity: hotel photos, the listing number and a Melbourne address with Refugee and Hospital tags, rooms, price and size, availability dates, description, amenities and nearby services, and the Submit interest panel with the owner’s questions
After: the listing page a charity reads; the property data is example content

  1. The space

    Photos first, before any detail.

  2. Where, and for whom

    The address, the listing number and the causes it suits.

  3. Rooms, price and dates

    What’s inside, what it costs and when it’s free.

  4. The details

    Description, amenities and what’s nearby.

How the work progressed

Roles and flows first, then wireframes in grey, the logo and a visual direction, then the final screens and the kit they are built from.

  1. User Flow

    Who does what: property owners and charities, and every path from sign-up to an agreement

    Artifact Information architecture and user flows for both roles

  2. Wireframes

    What sits where on each page, agreed in grey before any colour

    Artifact Desktop wireframes for both roles

    Grey wireframe of the charity’s property page: photo placeholders, address, tags, rooms, price, dates, description and the Submit your interest panel with the owner’s questions

  3. UI & Design System

    Which visual direction the product takes, tried on the same screens before choosing

    Artifact Style directions, the final screens for both roles and a UI kit on Untitled UI

    Two SpaceBridge style directions, each tried on the owner’s home and applicants screens, with its palette and notes on stroke, shadows, corners, illustration and the top bar

  4. Delivery

    What the developers need to build it without guessing

    Artifact The client file, a screen map, a clickable prototype and the UI kit

Two roles, two products, one platform

Found
Owners and charities do opposite jobs: one publishes and chooses, the other searches and applies. A shared dashboard with relabelled buttons would serve neither.
Decided
Each role’s paths were mapped in FigJam first, then each got its own menu: an owner’s home is their properties and the charities’ requests; a charity’s is the search, its applications and its own requests.

  1. Property owner: from applicants to a contract

    The applicant list, one applicant’s details, then the contract to upload and sign.

    Open the full map
    FigJam fragment of the owner’s flow: List of applicants with its table contents, Details of the applicant with the answers and actions, and Contract information with upload and sign

  2. Charity: from a search to an application

    Search, the listings it returns, one property, then the owner’s questions to answer.

    Open the full map
    FigJam fragment of the charity’s flow: Search, the list of published listings with what each card shows, the property details and the expression-of-interest form with its questions

  3. Charity: its own requests

    The list of its requests, editing one, deleting with a confirmation, and each request’s details.

    Open the full map
    FigJam fragment of the charity’s requests flow: the list of its opportunities with an empty state, editing, a delete confirmation with its notification, and opportunity details
Two SpaceBridge headers: the property owner’s Home and Charity Listings with Publish Property, and the charity’s Explore, My Applications, Active Charity Listings and Past Charity Listings with Publish Opportunity

The menu changes with the role

Top: a property owner. Bottom: a charity.

  • Information architecture
  • User flows for both roles
  • Wireframes
  • Screen map
  • Clickable prototype

Five jobs, from a search to an agreement

The charity’s search first, then the owner’s side of an application, then requests that go the other way. Addresses, prices and names on these screens are example data.

Space a charity can filter by its needs

Found
A charity needs somewhere specific: near its people, within budget, with the right rooms and step-free access. A plain list of addresses makes it open every one.
Decided
Filters for location radius, price with a free-only switch, size, rooms down to hot desks and meeting rooms, property type, amenities, nearby services and step-free access. Every card shows the causes it suits, its dates and how many charities have applied.
SpaceBridge Explore page: location, price, size and room filters beside six property cards, each with its type, listing number, address, preferred charity type, dates, rooms, price, size, a short description, how many charities applied and Apply

The owner’s questions instead of a chat

Found
Chat was cut from the scope, and without it an owner would get free-text messages that can’t be compared side by side.
Decided
Publishing a property ends with the questions every applicant answers: six defaults, each editable, and more can be added. Charities answer them on the listing page; Contact stays for anything else.
Publish Property, step 2 of 2: six pre-populated questions about the charity’s goals, planned use, activities, needs and conditions, each removable, with Add more, Previous and Publish

Applicants an owner can compare

Found
A popular space draws many charities, and an inbox of messages hides who is serious.
Decided
A table for each status (Pending, Shortlist, Active and Archive) with each charity’s contact, cause, property and date, and an offer from the row; then every application’s answers on one page, beside the charity’s profile.
Applicants for a property owner: Pending, Shortlist, Active and Archive tabs over a table of seven charities with contact, status, cause, property, location, date and Make an Offer
View Application: the charity Helping Hand with See Charity Profile, its answers to the owner’s six questions, and Contact and Upload Contract buttons

An application a charity can follow

Found
A charity applies to several spaces at once and needs to see which applications wait for an answer and which have moved on.
Decided
My Applications, with the same four tabs the owner works in: each row with the property, its owner’s contact and the date, and shortlisting, contact or withdrawal from the row menu.
My Applications for a charity: Pending, Shortlist, Active and Archive tabs over seven applications with the owner, contact, status, property, location and date, and a row menu with Add to Shortlist, Contact and Withdraw

Requests that go the other way

Found
Some charities know exactly what they need before any listing fits it.
Decided
A charity publishes its own request (photos, the property type it seeks, a budget and dates), and owners browse these requests by budget, period, property type and cause, then send an offer.
Publish Opportunity for the charity Helping Hand: five photos, the title Helping Refugees, the property type sought, a budget of $1,000, a description and the required period
Charity Listings for a property owner: budget, period, property type and charity type filters beside three requests from Helping Hand, each with its budget, dates, property types sought, See Details and Send Offer

A logo refined from the one the client brought

Found
The client came with a logo of their own, and it needed to become a mark that works inside the product, from the header to a small icon.
Decided
Hand sketches of the letter B first, then wordmark options in Figma and rounds of revision, until the B became a mark of its own beside the wordmark. The colour and type the product uses were set in the UI kit.
Fifteen SpaceBridge logo options: rounded and outlined wordmarks first, then the letter-B mark beside a SPACE BRIDGE wordmark
Six pencil sketches of the letter B on grid paper, each a different idea for the mark
Logo mark page: the B mark in monochrome and orange, each on a light and a dark background
Logo page: the orange B mark beside the SPACE BRIDGE wordmark on white, and the same lockup on black
UI kit colour page: the gray and primary orange scales from 50 to 900, each swatch with its hex code and contrast score

Untitled UI underneath, SpaceBridge on top

Found
The budget ruled out a system drawn from zero, and a template left as it was would make a charity platform look like everyone else’s.
Decided
Untitled UI adapted into a project kit: its grid, inputs and tables kept; SpaceBridge’s colour, type, illustration and cards added; every screen built from it.

One card, read from both sides

A charity sees a listing with Apply and the interest so far; its owner sees the same card with an edit pencil and a way to the applicants.

  • Property card as a charity sees it: hotel photo, listing number, Melbourne address, preferred charity type, dates, rooms, a one-off price, size, a short description, how many charities applied and Apply
    Charity: A listing to apply to.
  • Property card as its owner sees it: an edit pencil, the listing number, a Sydney address, preferred charity types, dates, rooms, price and size, with See Applicants and See Details
    Property owner: Their own listing, with See Applicants.

A request, open and then closed

While it runs, owners see a charity’s request with Send Offer; once its period ends, the charity sees it closed, with the date.

  • A charity’s request as owners see it: Helping Refugees by Helping Hand, hotel or residential space sought, dates, a $1,000 budget, See Details and Send Offer
    Open
  • The same request as its charity sees it after the period: a note that the charity closed it on 20/04/2024 and See Details
    Closed

A handoff developers could build from

The work ended in one organised client file rather than a folder of screens.

UI kit
Grid, buttons, inputs, cards, tables, colour and type, adapted from Untitled UI.
Screen map
Every screen and state laid out by role and area, in the order a user meets it.
Clickable prototype
The flows of both roles, linked end to end.
Development handoff
The client file, with wireframes and style directions kept beside the final UI.

Flows in the handoff

  1. Wireframes for property owners and charities
  2. Style directions
  3. Charities: search, applications and their own requests
  4. Property owners: listings, applicants and agreements
  5. UI kit: grid, components, colour and type
Screen map of the charity side: rows of Explore and My Applications screens with their filter, loading, detail, pop-up and notification states
Screen map: The charity’s Explore and My Applications, every state in a row.
UI kit button sheet: filled orange, outlined, grey and text buttons in five sizes, each in default, hover, pressed and disabled states
UI kit: Buttons in every style, size and state engineering had to build.

Where the product ended up

Both sides of SpaceBridge designed for desktop web: a charity’s search, listing pages and applications; an owner’s listings, questions, applicants and agreements; and requests charities publish for owners to answer.

Built on a project kit adapted from Untitled UI, with the client’s logo refined, and handed over with a screen map and a clickable prototype.

screens across both roles
64
roles, each with its own product
2
set questions in place of chat
Q&A

Afraid your marketplace will turn into an inbox?

In SpaceBridge, set questions replaced chat, so owners compare charities in a table instead of reading threads. Show us both sides of yours, and we’ll design how they meet.

Discuss your product Explore more case studies

What we brought to SpaceBridge

The product

The interface and the work