NAVi
AI Study Planner
Client.
Monash University
Tools.
Figma, Jitter, Miro, Adobe Ai, Pr
Year.
2024
Role.
UI/UX Designer
🎯 Project Overview
It started with a question: 𝗪𝗵𝗮𝘁 𝗶𝗳 𝘀𝘁𝘂𝗱𝗲𝗻𝘁𝘀 𝗰𝗼𝘂𝗹𝗱 𝘀𝘁𝗼𝗽 𝗰𝗵𝗮𝘀𝗶𝗻𝗴 𝗳𝗲𝗲𝗱𝗯𝗮𝗰𝗸 𝗮𝗻𝗱 𝘀𝘁𝗮𝗿𝘁 𝗮𝗰𝘁𝗶𝗻𝗴 𝗼𝗻 𝗶𝘁? During my Master’s in Interaction Design at Monash, I joined a cross-disciplinary sprint to explore how AI might support student learning. The brief was open-ended, but the pain points were clear—students were drowning in fragmented feedback. Comments lived in emails, LMS threads, PDFs, and sticky notes. There was no single place to reflect, plan, or improve. 💡 𝗦𝗼 𝘄𝗲 𝗶𝗺𝗮𝗴𝗶𝗻𝗲𝗱 𝗡𝗔𝗩𝗶: A smart, responsive dashboard that could consolidate feedback, recommend study actions and plan, and visualise progress. All tailored to each student’s academic journey based on the university database and the educational progress.
🧭 Discovery: Listening First
In the research phase, we dived deep into the lived experience of Monash students with empathy and learning the journey. We interviewed 8 students across Engineering, Business, and Arts, and surveyed 20 more. Their stories were strikingly similar: • "𝙄 𝙛𝙤𝙧𝙜𝙤𝙩 𝙩𝙤 𝙘𝙝𝙚𝙘𝙠 𝙢𝙮 𝙥𝙧𝙚𝙫𝙞𝙤𝙪𝙨 𝙛𝙚𝙚𝙙𝙗𝙖𝙘𝙠 𝙖𝙣𝙙 𝙚𝙣𝙙𝙚𝙙 𝙪𝙥 𝙬𝙞𝙩𝙝 𝙩𝙝𝙚 𝙨𝙖𝙢𝙚 𝙜𝙧𝙖𝙙𝙚, 𝙗𝙚𝙘𝙖𝙪𝙨𝙚 𝙤𝙛 𝙩𝙝𝙚 𝙨𝙖𝙢𝙚 𝙞𝙨𝙨𝙪𝙚." • “𝙄 𝙨𝙥𝙚𝙣𝙙 𝙢𝙤𝙧𝙚 𝙩𝙞𝙢𝙚 𝙤𝙧𝙜𝙖𝙣𝙞𝙨𝙞𝙣𝙜 𝙩𝙝𝙖𝙣 𝙖𝙘𝙩𝙪𝙖𝙡𝙡𝙮 𝙨𝙩𝙪𝙙𝙮𝙞𝙣𝙜.” We mapped their journeys and found that 𝟰𝟬% of study time was spent just trying to make sense of scattered comments. 𝟳𝟬% admitted they rarely revisited tutor feedback on the website at all. ✨ 𝗧𝗵𝗮𝘁 𝗶𝗻𝘀𝗶𝗴𝗵𝘁 𝗯𝗲𝗰𝗮𝗺𝗲 𝗼𝘂𝗿 𝗻𝗼𝗿𝘁𝗵 𝘀𝘁𝗮𝗿: If NAVi could surface key feedback and suggest next steps at the right moment, students could study smarter, not harder! As one of the designers on NAVi, I was responsible for conducting UX research, analysing survey and interview data, and translating insights into actionable design decisions. I also designed the wireframes, mid- and high-fidelity pages, crafted the branding and logo, and created character illustrations to bring the interface to life.
✏️ Ideation
Crazy Eights on the whiteboard, paper prototypes in hand, and Miro boards filled with sticky notes, every sketch taught me something new. At he end, we honed in on 𝘁𝗵𝗿𝗲𝗲 𝗰𝗼𝗿𝗲 𝗱𝗲𝗹𝗶𝘃𝗲𝗿𝗮𝗯𝗹𝗲𝘀:
We designed 𝗟𝗲𝗮𝗿𝗻𝗶𝗻𝗴 𝗚𝗮𝗽 that summarised tutor comments and generate content, 𝗦𝘁𝘂𝗱𝘆 𝗣𝗹𝗮𝗻 that aligns with the educational needs and lifestyle, and 𝗣𝗿𝗼𝗴𝗿𝗲𝘀𝘀 𝗧𝗿𝗮𝗰𝗸𝗲𝗿𝘀 that visualised growth over time and encourage to learn more..
🧠 Design: Building with Intention
In Figma, I translated sketches into a clean, card-based layout for quick scanning with a friendly sans-serif tone. After Effects and Jitter prototypes brought the roadmap arrows to life, easing sequential transitions so learners feel guided, not rushed. The sitemap included: • Dashboard • Feedback Hub • In-chat Planner • AI literacy The visual identity was also part of my scope. I designed a minimalist logo inspired by Monash’s academic tone, paired with student-friendly UI elements. The characters I illustrated added a human touch to the dashboard, making the experience feel more relatable and engaging. 🧩𝗟𝗲𝘁'𝘀 𝗰𝗵𝗲𝗰𝗸 𝗶𝘁! To elevate NAVi’s usability and keep its narrative-driven experience front and centre, we tested with five students, and our observation led us to focus on three key improvements: • 𝗥𝗲𝗱𝗲𝘀𝗶𝗴𝗻 𝘁𝗵𝗲 𝗣𝗹𝗮𝗻 𝗘𝗱𝗶𝘁𝗶𝗻𝗴 𝗜𝗻𝘁𝗲𝗿𝗳𝗮𝗰𝗲: Surface the “Change Plan” option with a dedicated button or pencil icon. Avoid nesting dropdowns for editing and ensure they are visible. • 𝗜𝗻𝘁𝗿𝗼𝗱𝘂𝗰𝗲 𝗮 𝗣𝗿𝗼𝗴𝗿𝗲𝘀𝘀 𝗦𝗲𝗰𝘁𝗶𝗼𝗻: Add a visual tracker, such as a progress bar, timeline, or checklists that updates dynamically. This gives users a quick overview of completed modules and remaining gaps. • 𝗥𝗲𝗳𝗶𝗻𝗲 𝗟𝗮𝗻𝗴𝘂𝗮𝗴𝗲 𝗳𝗼𝗿 𝗖𝗹𝗮𝗿𝗶𝘁𝘆: Replace ambiguous terms with direct, user-friendly labels. For example, “Transform” becomes “Convert,” and “Needs” becomes “Learning Gaps”. 📈 𝗙𝗶𝗻𝗮𝗹 𝗥𝗲𝘀𝘂𝗹𝘁𝘀: Task completion increased from 60% to 92% after iterations, and System Usability Score improved from 68 to 85. Students could now find feedback, generate study plans, and engage with AI-suggested quizzes. all in under two minutes.
🎨 Motion Meets Meaning: The Animation Challenge
One of the most complex (and rewarding) challenges was integrating live animation (real-time progress updates) with responsive animation (hover states, transitions). I wanted motion to feel intuitive, not distracting. But on mobile, live updates risked overwhelming users. So I dove into motion logic, testing with After Effects and Lottie, and getting help from developers outside the Uni to define animation thresholds. To communicate these animation strategies clearly, I designed pitch decks and presented our solution to academic stakeholders, walking them through the logic behind our motion choices and accessibility considerations. 𝗪𝗲 𝗯𝘂𝗶𝗹𝘁 𝗰𝗼𝗻𝗱𝗶𝘁𝗶𝗼𝗻𝗮𝗹 𝘁𝗿𝗶𝗴𝗴𝗲𝗿𝘀: Animations only played when pedagogically relevant, like hitting a milestone or completing a task. The result was a system that felt alive, but never noisy.
🌱 Outcome
NAVi was awarded “𝗛𝗶𝗴𝗵𝗹𝘆 𝗖𝗼𝗺𝗺𝗲𝗻𝗱𝗲𝗱” by the Monash Design Jury of the Interaction Design Masters Program. Stakeholders praised its blend of AI, branding, and human-centred design. Students reported feeling more confident, more organised, and more in control. But for me, designing NAVi reminded me why empathy drives innovation. The magic happens when we listen without judgment, prototype with curiosity, and iterate with intention. Every “aha” moment from a student was proof that thoughtful research and playful design can transform frustration into growth.