INDUSTRY
TECH STACK
Design and Animation Tools for UI
Figma
Development Stack
HTML5
CSS3
JavaScript
Django
Scala
ROLES
COLLABORATORS
DELIVERABLES
TIMELINE & STATUS
A Home-grown Content Management System | A Design System / UI Kit for College's Websites | Revamped Loading Screens, Animations, Landing Page with added features
More accessbility and ease of use for the college's website, which is the gateway to represent our college to the world. The task of managing 13,000+ webpages with a consistent design was daunting.
The conceptulization and architecture design was done in Figma, where the design system was created. With the advise and feedback from administration and faculty members, the design system was finalized. The design system was then implemented in a component-based content management system, which allows for easy management and updates of the website. The CMS was then built on NextJs, Django, DjangoREST, It has an inbuilt transpiler based on Scala, File Manager to access XML & HTML files. Finally polishing is being done on the landing page with loaders, animations and intuative components that adhere to CMS.
THE HIGHLIGHTS
THE DESIGN SYSTEM
LOADING ANIMATIONS
Designing the loading screen for the IIT Roorkee landing page was a high-stakes, ambitious task, as it served as the first impression of the institute to the world. My initial iteration featured a dynamic logo build-up animation, intelligently synced with the user's device load time. However, feedback pointed out that the use of the IITR logo alone felt too simplistic and lacked the immersive appeal expected from such a prestigious institution. This led to a reimagining of the concept, aiming for a more elaborate yet intuitive user experience.
The final animation was instantly approved by the admin and team for its playful nature and visually intuitive flow, captivating users right from the website's first frame, making the experience truly monumental.
LANDING PAGE
The admin's vision for the landing page was to introduce an intuitive and distinct color palette that could later be overlaid onto the existing design system without disrupting its structure. Additionally, they requested components that would maintain visual consistency with the current default design system, while still offering a fresh, polished, and unique experience that reflects the evolving identity of IIT Roorkee. That is why several colour schemes were prepared for the page some of them are shown below:
The design incorporated multiple color schemes, accessibility features such as dark mode, and a fully responsive mobile view. Most design decisions were made in close collaboration with IITR's admins and faculty. Any additional components proposed for the landing page were crafted to be unique yet consistent with the existing design system, with the intention of contributing them to the Chakra UI library while maintaining stylistic harmony.
SEARCH PAGE
The previous search engine lacked purpose and user-friendliness; hence, it has been revamped with a simplified user flow, as illustrated below:
FACULTY PAGE
The faculty page is among the most visited sections on iitr.ac.in, making a polished revamp essential to enhance its usability/appeal.
CHAKRA
Now imagine this: you're tasked with creating just one page of our website. Let's say it takes around 4 days. For the entire site, that translates to nearly 100 years of work. And if you want to make a minor change to a component later, it could take 5+ years across the site.
Clearly, this is not scalable.
Key Issues with the Traditional Approach:
The solution is Chakra, our in-house Content Management System (CMS) built to solve this very problem. It empowers anyone, even with no development background, to create, manage, and publish webpages using pre-built, consistent design components.
How Chakra Works:
- 1. Component Selection: Users choose from a library of ready-to-use components.
- 2. Content Input: They fill in the data.
- 3. Transpilation Process: Chakra generates an XML, which is then transpiled into HTML using our custom-built transpiler in Scala.
- 4. Automatic Deployment: The system manages file storage and deploys pages automatically.
Post-Chakra Impact:
With the introduction of Chakra, faculty, staff, and students managing departmental or project websites can now effortlessly update and deploy pages within just a few clicks. This significantly reduces reliance on technical expertise and eliminates previous development bottlenecks. The use of pre-built components ensures design consistency across the entire website, promoting a unified visual identity.
Key Features:
Chakra comes equipped with several advanced features such as Elastic Search for quick navigation, Hindi text conversion for regional accessibility, rich text editors for flexible content creation, and tools like short URL and subdomain managers for better organization. Additionally, it supports custom component deployment, allowing power users to integrate personalized elements when needed.
Chakra's Five Pillars:
The platform is built on five main pillars. Chakra Frontend offers a user-friendly interface for intuitive webpage creation. Chakra Backend acts as the system's core, integrating all functionalities with the database. Chakra UI Library maintains a curated collection of reusable, pre-designed components that uphold consistency and quality. Chakra core is where the conversion of XML to HTML takes place. Finally, Chakra Canvas serves as a staging environment where all changes can be tested and fine-tuned before being made live to the public.
Contact me to create fun things together
VERSION
2025©Edition
LOCAL TIME
IST
SCORE
0
SOCIAL MEDIA
