The Lion's Roar Website

TLR Website

Web Development
Google Cloud

A content hub for The Lion's Roar.

Role UI/UX Designer, Frontend Developer
Date 10/10/2023
UI/UX Designer
Frontend Developer

The Lion's Roaris a student run news program at Zurich International School. I contributed to the program by creating a content hub website for the program. The website features an admin panel for moderation, and the ability for users to upload content. It uses an user-friendly interface accessible on both mobile and desktop.

The Lion's Roar

The website is built using Next.js and is hosted on Vercel. The content is stored in a Google Cloud database, and uses Firebase for caching.

The website allows user to create rich posts with text, images, and videos. The users can also create events, which are displayed on the events page.

To log in we created our own authentication system that sends a verification code to a user's school email. Everyone at our school has access to one of these emails, so we can ensure that only students can create an account. We also have a moderation system that allows us to approve or reject posts and events.

The UX and UI design was iteratively designed by me over the development process. We soon realised that mobile users would be our main userbase, as it would be easier for people at the school to view it on their mobile device. Here are the designs I created in Figma:

Your student voice

We let everyone with a school email log in and contribute. This way we can ensure that everyone can have their voice heard.

Stay informed,
stay ahead

Our weekly videos give you an overview of your week. Livestreams and events show what is going on and schools. Handwritten Articles and Posts share stories.

Get featured

We let event organizers and club leaders create their own posts and events. They can also contact the team to get featured in our weekly videos.

Our Team

We are a dynamic and passionate team of student journalists from grades six to twelve. With two teacher advisors as producers, we handle every aspect of our student-run news broadcast show. From design and creation to publication, we strive to keep our school community informed, engaged, and connected.


GnomeQuest: Odyssey

GnomeQuest: Odyssey



The Lion's Roar Intro

The Lion's Roar Intro