Class App
Client
Personal project for learning
Year
2022
Duration
2 weeks
Tools Used
Figma, Photoshop, Illustrator
The Class App was a personal design concept inspired by popular e-learning platforms like Canvas, developed as part of my journey to learn Figma and understand the foundations of interactive design. The goal was to create an intuitive and visually clean platform that helps students manage their academic life more efficiently—from tracking course progress to accessing assignments, resources, and chat support.
This app also explores how a centralized, mobile-first dashboard could improve how students interact with course material, faculty communication, and resource access—all within a minimal and task-focused design system.
Figma prototype below (Refresh if not loading)
Since this was one of my first projects using Figma, my process was focused heavily on exploration and practice. Here's how I approached it:
Research & Inspiration:
I observed how Canvas and Google Classroom organize their features. I narrowed down what mattered most to students—simplicity, communication, and access to assignments/resources.
Feature Planning:
Created a basic app map that included key screens such as Signup/Login, Dashboard, Assignments, Chat (student-to-student and student-to-faculty), Notifications, Resources, and Help.
Design Tools:
Figma was used for all wireframes, UI design, and interactive prototyping.
Illustrator was used to craft custom icons and supportive visuals.
Learning While Building:
This project marked my first experience working with Figma's prototype mode. I leaned on tutorials, UI kits, and community feedback to build connections, transitions, and flows across 20+ screens.
Feedback:
After sharing it with friends and my professor, I was advised to adjust icon sizes and improve contrast to make the UI more accessible. I iterated based on that feedback.
Learning Outcomes:
Developed a complete clickable prototype showcasing 20+ fully designed screens with end-to-end flows.
Learned how to structure an app visually from login to task completion, including how to think about user hierarchy, screen layout, and logical flows.
Strengthened my Figma skills significantly, from static layouts to creating interactive prototypes.
Built confidence in planning and executing UI/UX projects independently.
If I were to recreate this app today, I would apply a mobile-first mindset, conduct usability tests, and improve the UI using design system principles to ensure scalability and accessibility.
