Vaibhav Singh



Imperial College Radio A redesign from the web development team (finished)

Client: Imperial College Radio
Format: Website
Location: London
HTML, CSS, React.Js, Next.Js, SQLite, Figma 
Year: 2024
As part of the committee of Imperial College Radio (ICRadio), I was tasked along with some others to conduct a full redeisng of the website. This was to enhance online user experience, and to attract more listeners across campus. To achieve this, the following steps were carried out to reach the current redeisgn: 
1. Adapting from inspiration
2. Building iterations for each page
3. Protoytyping scrolling and carousels



Parallax and smooth scrolling
The motion between pages and scrolling was made smooth and parallax, with the background moving at a slower rate in comparision to the foreground elements. The image carousel was also looped.  Motion Design 
Website motion graphics were also made for show visuals, committee members, 3D brand logos, etc. They were prototyped in various softwares, alongwith Blender for 3D modelling as well. 




Inspiration - ntsradio.live

Other inspirations were taken from Rinse.fm, Vandelay. 
Annotations were made on webspread using Procreate.
Scrolling and motion animations were converted from HTML 
to Figma
Taking inspiration from Rinse.FM and NTS.Live, I aided with rebuilding the website. I built visual assets, motion design new pages for easier user experience. Here are some key features that were observed:

1. Grid layout - Thumbnail and 2 carousels for shows under
2. Fixed header - Audio player and pages linked
3. Video & image balance - Videos attract more retention

Page Development

Developed first in Figma, and prototyped using HTML, CSS, JS.
First page: Home page
Second page: Archive page
Third page: Roster page

The page flow of the website was interpreted and prototyped on Figma as that was the easxiest way to map interactions between pages and motion design. In the time between 2023 - 2024, new designs were made and tested. These were the following pages and their developments. The changes were made to the home, archive & roster pages.





Website page flow from home to roster to archive. Layout of shows, committee members, archived shows, embedded videos from YouTube. 




Figma Spread of development, design, inspirations, etc

Shows development of pages from Aug 2021-2024. 
UI elements were designed and exported to HTML, CSS.  
Page flow was achieved using Figma Prototype. 
The figma spread shows different designs for mobile, desktop website formatting, universal elements, image carousels, etc. Sections were created for different timelines, and iterations were made for each button, motion graphics/animation was also prototyped in After Effects. 
Prev    Next