INDUSTRY
Education
TECH STACK
Design and Animation Tools for UI
Figma
figma
Development Stack
HTML5
html
CSS3
css3
JavaScript
js
Django
django
Scala
scala
In this case study we would discuss that how standardization of design system was implemented in a scalable manner through a component-based content management system. The goal was to create a consistent and reusable tool that could be easily managed and updated by staff and faculty members, while also ensuring that the website remained accessible and user-friendly.
ROLES
Project Leader
UI/UX Designer
Frontend Developer
COLLABORATORS
Abishek Arun
Dhruv Goel
DELIVERABLES
Landing, Search & Faculty Pages Revamp
Design System
Content Management System
TIMELINE & STATUS
Ongoing
THE WHAT
A Home-grown Content Management System | A Design System / UI Kit for College's Websites | Revamped Loading Screens, Animations, Landing Page with added features
THE WHY
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 HOW
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
Small Banner
THE DESIGN SYSTEM
Small Banner
Small Banner
Small Banner
Small Banner
Small Banner
Small Banner
Small Banner
Small Banner
Small Banner
Small Banner
Small Banner
Small Banner
Small Banner
Small Banner
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:
Small Banner
Small Banner
Small Banner
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.
The previous search engine lacked purpose and user-friendliness; hence, it has been revamped with a simplified user flow, as illustrated below:
Small Banner
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.
Small Banner
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:
  • Only individuals with development knowledge can create or edit webpages.
  • Every minor change requires re-deployment.
  • Design consistency is hard to maintain across different pages.
  • It creates a dependency bottleneck between non-technical users and developers.
  • 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. 1. Component Selection: Users choose from a library of ready-to-use components.
    2. 2. Content Input: They fill in the data.
    3. 3. Transpilation Process: Chakra generates an XML, which is then transpiled into HTML using our custom-built transpiler in Scala.
    4. 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.
    Small Banner
    Small Banner
    Small Banner
    Small Banner
    Small Banner
    Small Banner
    Small Banner
    Small Banner
    Small Banner
    Small Banner
    Small Banner