Beijing City International School Alumni Portal

Beijing City International School Alumni Portal

Contract desginer

Role

Solo UIUX design

Project Presenter

Timeline

Jun-Aug 2026

Team

Solo design collaborate with engineers

Tools

Claude code

Codex

Figma

Background

Beijing City International School (BCIS) has over 600 graduating alumni; 150+ active alumni ambassadors; 2600+ withdrawn students; 150 current high school student between grade 10 - 12.

A famous quote in the school:

" Once a BCISer, Always a BCISer! "

But, there's no way to connect students who have left the school with each other. How can we maintain the long lasting connection?

Impact

We launched the first version of alumni portal in Apr.2023. Until now, there are over 300+ alumni signup for the portal and 100+ current high school students start to use the portal.

Onbording

Homepage

Alumni directory

Micro-interactions

The Process

The problem

Alumni data are collected manually and no one gets to see or use

  • Alumni data collection must be done manually using forms

  • When a student requests for connections, a query to the database is executed, and the result is downloaded as Excel and sent to the student via email

  • No one can see each other's information and build a connection

  • Alumni data collection must be done manually using forms

  • When a student requests for connections, a query to the database is executed, and the result is downloaded as Excel and sent to the student via email

  • No one can see each other's information and build a connection

Aim

A sustainable, long lasting connection building

01

Alumni can access their data on their own, edit data as well as knowing others data after leaving BCIS

02

Active alumni members (volunteers) will be able to support students

03

A logistic system for alumni to engage with students and other alumni to build long-term connection

How it started

The first time I got involved in this project was in 2023, during my senior year of high school, when I independently designed the portal in Figma.

In collaboration with three other alumni majored in computer science, the first version went online, ran for 3 years, served over 500 until mid of 2026.

A new chapter

This year, I was invited back to design for new functions as well as polish the existing visual design style. So I decided to experiement with vibe coding & Figma

Started design in Figma, prototyping with claude to visualize directions

Feedbacks

Prompting with specificity, context and reference

Use specific list instead of lengthy paragraph to specify each task that wish to be performed. Learn from AI's wording to better describe and communicate the specific components/interactions.

Brainstorm with Claude, generate visual directions first

After prompting and confirmed specs, I don't let it generate interface direction. Instead, I usually brainstorm visual directions along with Claude to explore the best ways to realize a function,

Multi-platform adaption, tradeoff in experience

The same function get visualized fully on desktop view than mobile view. I prioritized the fun, full experience in desktop; Efficiency, ease of use in mobile.

The portal shaped me as much I shaped it

Intro

Design

Research

Development