INDUSTRY
Education
TECH STACK
Design and Animation Tools for UI
Figma
figma
Lotte Files Creator
lotte
Development Stack
React
reactjs
JavaScript
js
Rank Matrix is a web app designed to simplify the college selection process for JEE aspirants. Instead of sifting through multiple rounds of counseling data, students can instantly view their best admission chances based on the final seat matrix. The platform features a clean, intuitive UI/UX, smooth loading animations, and full accessibility with both light and dark mode support.
ROLES
UI Designer
Motion Designer
Graphic Designer
COLLABORATORS
Nikhil Nagar
DELIVERABLES
User Interfaces
Light & Dark Mode
Loading Animations
TIMELINE & STATUS
Completed
THE WHAT
I was initially tasked with creating a loading animation, which later had to be delivered in JSON format. Next deliverables were light & dark mode UIs, structured as objects of JavaScript. Finally, SVG files were needed for graphics used across the website.
THE WHY
For a platform built with accessibility in mind, the goal was to ensure a seamless transition from design files to development-ready assets.
THE HOW
All prototyping and ideation began on Figma, including the initial loading animation. To create optimized animations in JSON format, I turned to LottieFiles Creator, despite some limitations that required revising the original animation. Ultimately, the UI screens and graphics were also built on Figma, all with a single goal in mind: ensuring the web app embodied simplicity.
THE HIGHLIGHTS
Small Banner
Small Banner
TYPOGRAPHY, COLOUR PALETE AND BRANDING
Small Banner
Small Banner
Another Banner

Iteration 1

Pretty
Another Banner

Iteration 2

A little chaotic
Small Banner

Iteration 3

Too Utilitarian
Another Banner

Iteration 4

Too much wisdom in one frame
Small Banner

Iteration 5

That James Thomson Builduibng svg took time
Small Banner

Finalised

But it was policy to not advertise our college through this
LOADING ANIMATIONS
This was my very first iteration, fully created on Figma. Clean, minimalistic, and impressionable, it captured the essence of the loading experience. However, the Figma prototype turned out to be comparatively hefty work. I was then informed that for optimized performance, a JSON-based loader was needed. So, I turned to LottieFiles Creator, as the Figma plugin didn’t support the animation style I had built, heck! it didn’t even support gradient colors. The final LottieFiles-based loader is presented below and being used in live website right now:
This loading screen was designed with reusability in mind—it also serves perfectly as a component-level loader within the webpage.
USER INTERFACES
Small Banner
Small Banner
Small Banner
Small Banner