HMTI UBSI Margonda
HMTI UBSI Margonda is the Information Technology student association at Universitas Bina Sarana Informatika's Margonda campus, founded on 2 February 2020. This is their official website: identity, structure, work programs, and publications in one structured home.
Visit the live site
- Client
- Himpunan Mahasiswa Teknologi Informasi, UBSI Kampus Margonda
- Scope
- Organization Website & Information System
- Year
- 2026
- Project
- Live site
The association had nowhere to point people
HMTI is a branch-level association under HMTI UBSI, run by students for students of the Information Technology program. Its founding date (2 February 2020 in Jakarta), its vision, its divisions, and its programs lived in documents and chat groups that nobody outside the current board could find.
The association needed more than a profile page. It needed a place structured enough to hold who they are, how they work, what they run each period, and what they publish, and simple enough that a new student can find any of it in a few taps.
One address the whole association can point to
The homepage on a laptop. The association's headline carries the left column, and activity photos from the Bakti Sosial visit to Asrama Yatim Mekarjaya sit on the right, above a navy panel carrying the association's 'Tempat gagasan menemukan teman' line.
Structure first, styling second
We built the site as an information system before treating it as a visual: seven pages, each answering one question a student might ask. On top of that structure sits an ivory and navy palette with a serif voice, meant to read institutional without feeling stiff.
Seven pages, one question each
Beranda orients, Tentang covers the association's founding and background, Visi & Misi states its direction, Struktur names the people, Program Kerja lists the work with a status per program, Berita publishes, and Kontak carries the contact details. Each page answers one question instead of burying everything in one long scroll.
A news portal built like an archive
Berita is organized into four editorial rubrics: Kegiatan, Opini & Teknologi, Riset & Akademik, and Warta Himpunan, with a searchable, filterable catalog. Only published, non-archived items appear publicly, so the portal shows the record rather than the drafts.
Programs with a visible status
Each work program carries its state, 'Sedang berjalan' or 'Selesai', so the page reflects what the association is doing this period. Programs are documented and evaluated afterwards, following how the association says it works.
Temporary illustrations, labeled as such
Documentation photos are still being collected, so the site says so on the page: the illustrations are temporary and are not official HMTI material.
- 01
Arrive at the headline
The home page opens with the association's line, 'Gagasan mahasiswa, dikerjakan bersama', and shows the founding date and campus identity before any scrolling.
- 02
Understand what HMTI is
Tentang gives the background in plain Indonesian: why the association was formed, what it is a space for, and where it sits under HMTI UBSI.
- 03
See who runs it and what runs now
Struktur names the board and divisions; Program Kerja lists current work with status, so a student can tell what is active without asking anyone.
- 04
Follow the work, then reach out
Berita archives activities and writing by rubric; Kontak leads to the secretariat at Kampus Margonda for anyone with an idea or a proposal.
The same page on a phone. The wordmark truncates to 'HMTI UBSI Mar…' beside a menu button, the two calls to action stack, and the notice about temporary illustrations stays visible at the foot of the page.
What it can do now.
A complete information structure
Home, Tentang, Visi & Misi, Struktur, Program Kerja, Berita, and Kontak are all live at hmtiubsimargo.amx.qzz.io.
Four rubrics over a searchable archive
The news portal organizes writing into Kegiatan, Opini & Teknologi, Riset & Akademik, and Warta Himpunan, with search and filters over the published archive.
The founding date preserved
The association's founding date, 2 February 2020 in Jakarta, and its position as a branch under HMTI UBSI now have a permanent page.
These outcomes describe what is implemented and publicly reachable, not usage measurements. Program and news records follow the association's own cataloging; visitor numbers and engagement are not claimed.
The association now has a real home on the web. Students can read what HMTI is, find who runs it, follow its work programs, and reach the secretariat, and each new board inherits a structure to publish into instead of starting over.
Behind the build.
Scope of work
- Seven-page information architecture and navigation
- Identity, history, vision and mission pages
- Management structure with per-division roles
- Work program catalog with per-program status
- News portal with four rubrics, search, and filters
- Admin image management for swapping page imagery without code
Technology
- Next.js
- React
- Tailwind CSS
Next.js and React render the pages, with Tailwind CSS holding the design system: ivory surfaces, a navy type scale, and mono labels. The stack keeps the site static-friendly and cheap to host, which suits a student organization's budget, and the admin image tools let each new board update page visuals without a developer.
hmtiubsimargo.amx.qzz.ioTell us about it. We start from the need.
MAU'S KITCHEN
MAU'S Kitchen is a home kitchen in Depok selling sate taichan, drinks, and ChocoBerry desserts. The site holds the menu, the cart, and the ordering information in one place.
Jakarta Scooter Shop
Jakarta Scooter Shop sells Vespa parts through a desktop and mobile storefront. The project connects that storefront to the stock, shipping, and payment systems named in its scope.