Skip to content
Work

UI design

Kongkong Interface

A responsive, mobile-first interface for a student crowdfunding platform.

Role
UI Designer
Timeline
2020
Stack
  • Interface
  • Bootstrap
  • Responsive
  • Mobile first

Brief

An interface for students: flexible, responsive, and able to show activities run by students and student organizations.

Solution

Built from scratch with Bootstrap — no template — prioritising the mobile layout, since phones are what students use most. The engineering side is in the Kongkong project.

Two people, two journeys

Kongkong serves two very different visitors. A supporter arrives from a shared link and should reach a project and back it without creating an account. A student or student organisation signs in to publish proposals and follow their progress. Every screen was designed around one of those two journeys, with one primary action each.

Design decisions

  1. 01

    Mobile first

    Layouts were designed at phone width first, then allowed to spread into columns on desktop — not squeezed down afterwards.

  2. 02

    One search field

    The home page has a single headline, a friendly greeting (#SohibKongkong) and one search box. Nothing competes with it.

  3. 03

    Progress on every card

    Each project card shows its owner, date and a funding bar, so supporters can compare projects at a glance.

  4. 04

    Navigation within thumb reach

    On mobile the top navigation moves to a bottom tab bar: three tabs for guests, five once signed in.

  5. 05

    The main action in the centre

    For signed-in students the centre tab is “+” — creating a proposal sits exactly where the thumb rests.

  6. 06

    Same parts, every size

    Cards, tabs and the activity summary are the same components on desktop and mobile, only rearranged.

Component breakdown

Pulled out of the screens above, these are the pieces the whole interface is built from.

Project card — cover image, title, owner avatar, date and funding percentage.
Activity summary — proposals, events and items waiting, as three numbers.
Profile links — website, social accounts and email in one scannable list.

On mobile the navigation is a bottom tab bar. Guests get three tabs — proposals, documentation and log in, the same items as the desktop navigation:

Once signed in it grows to five, and the "+" for a new proposal takes the centre:

Palette

Built on Bootstrap's defaults on purpose: a familiar blue for actions, a lighter teal for links and names, and a cool gray surface — quick to build, and easy for the next developer to extend.

Chat with me