Honouring a Legacy, Designing a Future: A UI-Led Web Experience for a 50-Year Theological Institution
- China Graduate School of Theology (CGST)
- UX/UI Designer
- 2 months
- Responsive website
My Role
- 01.
UI & Visual Direction
Led the end-to-end design process, translating the 50th anniversary brand identity into a cohesive digital experience across all pages.
- 02.
Information Architecture
Structured the site's content hierarchy through stakeholder interviews and client meetings, aligning the design with both legacy storytelling and forward-looking vision.
- 03.
Stakeholder Communication
Worked directly with the project and development teams to manage feedback, align on priorities, and ensure smooth handover from design to build.
Challenges
Extending a visual identity into a digital experience
The client's 50th anniversary branding was already established. The task was to stretch it into a full web experience without losing its integrity.
Balancing legacy and progress
The site needed to honour CGST's history while pointing toward its future, within a single coherent visual language.
Telling a 50-year story without overwhelming the user
Decades of content had to be organised, prioritised, and presented in a way that felt curated, not cluttered.
About the Client
Founded in 1975, the China Graduate School of Theology is Hong Kong's only non-denominational evangelical seminary — training pastors, educators, and ministry leaders across the Chinese-speaking world for half a century.
1975
3,000+
210,000+
DEFINE
Maintain consistency
This project didn't begin with personas or field observation — it began with the client's vision. Two non-negotiable constraints shaped everything: the visual identity was already established, and the story had to run in two directions at once.
Insights from user interview
- Showcase CGST’s 50-year history and development, not only its forward-looking vision.
- The digital experience needed to balance legacy and progress, reflecting both the institution’s past achievements and future aspirations.
Idea
Wireframe — Desktop (left), Mobile (right)
Both breakpoints were resolved from the start, with the "50" graphic adapted into a circular motif on mobile rather than forcing the full desktop treatment onto a smaller viewport.
DESIGN
Maintaining consistency with the established branding
- The "50" neon graphic and "A Mission and Beyond" mark were carried directly from the print identity into the hero — no reinterpretation, just extension
- The dark cinematic colour palette was preserved across all sections, keeping the digital experience visually continuous with the anniversary branding
- Typography and layout decisions deferred to the existing identity at every point — the design never competed with the brand, only supported it
History Event Card
- Archival photos paired with key details
- Hover expansion reveals more without cluttering the default view
- Gradient connecting line guides users through the 50-year journey
Visual Transition: Dark to Light
- Dark-to-light transition represents CGST's journey from history to futureWarm greeting and session progress visible immediately
- Keeps content visually organised and easy to follow
Style guide
Colour
Main purple anchors the anniversary theme, with CTA blue #59C8BD directing key actions and neutral greys keeping history-heavy content clean and WCAG AAA accessible.
Typography
Raleway leads all display and heading text with a contemporary weight; Pais handles body copy for legible reading across both English and Chinese.
Iconography
A simple line-based set supports navigation and content without pulling focus from the storytelling.
Outcome & Reflection
78%
2 months
What I Learned
Working within a pre-established brand identity taught me the discipline of restraint. Good design isn't always about making new decisions — sometimes it's about knowing when to step back and let the existing system lead.
