Academate
At a Glance
Problem
Canvas-inspired LMS felt cluttered and unclear. We aimed to simplify navigation and improve task visibility for students and faculty.
Collaboration
Worked closely with backend to shape data structures around UI needs—especially for cards, filters, and navigation logic.
Developed
Built a functional, responsive UI solo—while learning to think like a designer. Balanced speed, usability, and structure across 4 agile sprints.
Outcome
Shipped a working LMS with cleaner UI, simplified access to key features, and improved transparency across user roles.
Overview
I led the design and development of Academate, a responsive learning management system built in a team of three. Inspired by Canvas, the goal was to simplify the interface for students and faculty by improving task visibility and reducing UI clutter.
I owned the entire frontend and UI design. From layout choices to reusable components, everything was built using React and Tailwind. I worked closely with backend teammates to ensure the interface aligned with data logic and user actions.
Role
UX Designer & Frontend Developer (Team of 3)
Duration
10 Weeks
Tools
Figma
VS Code
Tailwind CSS
Framing the Challenge
The project began as a software engineering prompt: build a learning management system inspired by Canvas. We saw it as a chance to create something better—clearer navigation, better visibility, and improved task flow.
We treated this project as more than an assignment. It was a chance to build with purpose—while learning along the way. These four pillars shaped our approach:
This framework helped us stay focused as we moved from idea to execution.
What We Built
A quick walkthrough of Academate’s UI built with React and Tailwind. Designed to simplify learning with a clear structure and smooth task flow.
A walkthrough of Academate’s UI built using React and Tailwind. Designed to simplify learning for students and faculty.
From Code to Clarity
Built interfaces with users in mind, even when speed and simplicity were the priority.
Collaborating with developers improved adaptability and problem-solving.
Self-testing helped me make faster layout decisions using whitespace, cards, and grouping.
Tight timelines taught me to reuse components strategically and ship what mattered most.
Back to top