Your Site Title

INDUSTRY

Education

TECH STACK

Design and Animation Tools for UI

Figma

Lotte Files Creator

Development Stack

React

JavaScript

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

LIVE PRODUCT

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

TYPOGRAPHY, COLOUR PALETE AND BRANDING

Iteration 1

Pretty

Iteration 2

A little chaotic

Iteration 3

Too Utilitarian

Iteration 4

Too much wisdom in one frame

Iteration 5

That James Thomson Builduibng svg took time

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