Pluto
A student portal app that keeps classes, deadlines, and coursework in one place.
Role
UI/UX Designer
Category
Mobile App
Year
2026
Overview
Pluto is a student portal app that brings classes, calendar, coursework, and to-dos into one place, with an AI study companion for quick answers about schedules and deadlines. I led the end-to-end UI/UX design — research, wireframes, the visual design system, and a tested high-fidelity prototype.
The Problem
Student life runs across too many disconnected tools — a timetable app, the university LMS, a generic to-do list, group chats for deadlines. Nothing surfaces what actually matters today: what's due, what's next, and how a course is going. That gap is where things get missed.
A look inside
Research
Mapped the everyday tools students juggle — timetables, the LMS, group chats, generic to-do apps — to find where deadlines and schedule info were falling through the cracks, and where a single home base could help most.
Timetable app
Shows the schedule, nothing else
University LMS
Assignments buried in a portal
Group chat
Deadlines get lost in the scroll
Generic to-do app
Disconnected from any of it
Wireframes
Mid-fidelity wireframes showing screen anatomy, navigation structure, and component placement across all 8 screens.
Auth Flow
Welcome
Login
Register
Main App — Tab Screens
Home
Calendar
Courses
AI Assistant & Drill-Down Screen
Course Detail
Pluto AI
Color System
Core Palette
Pluto Yellow
#FFD93D
Primary accent, CTAs, highlights
Ink
#1A1A2E
Headings, borders, shadows
Canvas
#FDFAF4
App background, warm white
Card White
#FFFFFF
Card surfaces, modal backgrounds
Muted
#64647A
Secondary text, captions
Surface
#F0EDE6
Input fills, inactive states
Semantic Colors
Exam / Danger
#DC2626 · BG #FEE2E2
Exam deadlines, critical alerts
Assignment
#D97706 · BG #FEF3C7
Homework, upcoming tasks
Class
#1E3A5F · BG #DBEAFE
Scheduled lectures, sessions
Completed
#059669 · BG #D1FAE5
Done items, success states
Typography
Plus Jakarta Sans
AaBbCcDdEeFfGg
0123456789 !@#
DM Sans
AaBbCcDdEeFfGg
0123456789 !@#
Components
Buttons
Cards
Standard Card
2px offset shadow — main workhorse
Dark Card
Dark mode surface (#252525)
Accent Card
Yellow hero cards and carousel banners
Status Tags & Badges
Navigation Bar
Spring physics sliding pill — layoutId="nav-pill" · stiffness: 460 · damping: 32
Prototype & Test
Took the system into high fidelity across all 8 screens and iterated on navigation, task flows, and color-coding for clarity — tightening spacing, touch targets, and copy with each pass.
Outcome
A complete design system and working high-fidelity prototype spanning onboarding, home dashboard, calendar, courses, to-dos, profile, and the Pluto AI assistant — ready to hand off for development.
