INDUSTRY
TECH STACK
ROLES
COLLABORATORS
DELIVERABLES
TIMELINE & STATUS
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.
For a platform built with accessibility in mind, the goal was to ensure a seamless transition from design files to development-ready assets.
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 thisLOADING 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



