FYP: Edubuddy

-

Production of a standalone portfolio of design artefact derived from the pre-production documentations from previous Major Project 1ã…¤  ã…¤ ã…¤ ã…¤  ã…¤ ã…¤  ã…¤   ã…¤ ã…¤  ã…¤ 

 Table of Contents 


✿ Week 1
✿ Week 2
✿ Week 3
✿ Week 4
✿ Week 5
✿ Week 6
✿ Week 7

 Instructions 



Find out other information about this module below


Module Information Booklet

 Major Project 1 Links 


Tasks:
Task 1: Proposal Development - Slide Link HERE
Task 2: Design Proposition - Slide Link HERE
Task 3: Concept Presentation - Slide Link HERE

Click HERE to view the Task 1-3 process development of EduBuddy in FigJam Board.

Click HERE to view the Blog Post for Major Project 1: Task 1 - Task 3.

 Work Progress 


Week 1

 Items Discussed with Supervisor 

During our first consultation, we presented our Major Project 1 Figma prototype to our supervisor, Mr Razif. The session focused on reviewing the overall project direction, identifying areas for improvement, and refining the core feature of the app. We also discussed how the user flow and feature priorities could be further developed to strengthen the concept.

 Our Actions 

1. MVP Flow Refinement

The prototype was restructured to focus on the core question:

“How quickly and effectively can a user find a study buddy and start studying?”

Key improvements:

  • Simplified onboarding (subject, availability, learning style only)
  • Streamlined Study Buddy matching system (subject, time, preference)
  • Clear study session flow:
    • Join study room
    • Use timer (Pomodoro/countdown)
    • View buddy presence
  • Basic accountability tracking (sessions completed)

Non-core features such as avatar customisation and gamification were moved to future work to maintain focus.


2. Wireframe Planning & Feature Prioritisation
  • Reduced onboarding steps to improve usability
  • Redesigned Home Page to highlight “Find a Study Buddy”
  • Focused MVP on 1-to-1 matching flow
  • Study Room simplified to essential tools:
    • Timer
    • Chat
    • Buddy presence
  • Advanced features (whiteboard, screen share, gamification) marked as future enhancements 

3. Art Direction Development
  • Explored and tested multiple colour palette options in Figma
  • Defined initial visual direction aligned with app concept
  • Considered overall design consistency including typography and UI style

Figure 1.1 Art Directions of Edubuddy

4. Micro-Animation & Sound Exploration
  • Experimented with micro-animations using Adobe After Effects
  • Tested visual motion elements for integration into Figma prototypes
  • Began exploring sound design to enhance interaction feedback 

Figure 1.2 Logo Animation in AE, Exported to CapCut for sound effects

Week 1 focused on realigning the project with its core objective—helping users quickly find and study with compatible study buddies. Based on supervisor feedback, the team successfully refined the MVP, simplified user flows, and began establishing the app’s visual and interaction design direction.


Week 2

 Items Discussed with Supervisor 

In Week 2, we reviewed our previous progress with Mr Razif and presented updates on both design and interaction aspects. This included our initial animation experiments created in After Effects, as well as our first attempt at low-fidelity (lo-fi) prototypes. We also sought feedback on the app’s animation direction, logo style, and splash screen visuals.


 Our Actions 

1. User Flow & Wireframe Refinement

We focused on improving the structure and clarity of the app’s user journey by refining our initial low-fidelity wireframes and progressing towards high-fidelity design.

Key developments:

  • Improved onboarding flow:
    • Landing page, introduction, login/sign-up
    • User details (study field, time, style, etc.)
    • Student ID generation
  • Enhanced Home Page:
    • AI Match system with saved preferences
    • Recommended study buddies and group previews
  • Study Page features:
    • Study timer and subject tracking
    • Avatar-based personal study room
    • Active buddies and group sessions
    • Functional tools (whiteboard, call, AI summary, Spotify integration)

Non-core pages such as Chat and Avatar customisation were identified as secondary features and deprioritised to maintain focus on the MVP.


2. Study Room Visual Development

We focused on designing the visual experience of the Study Room to align with our app’s concept and art direction.

Key progress:

  • Created initial study room sketches using Procreate
  • Transferred and reconstructed illustrations in Adobe Illustrator
  • Refined shapes and layout for cleaner, scalable visuals
  • Finalised the colour palette to ensure consistency across the interface
Figure 1.3 Study Room in Procreate

Figure 1.4 Study Room in Adobe Illustrator


3. Animation Exploration

  • We continued experimenting with animations using After Effects
  • We tested visual styles for the logo and splash screen
  • We explored ways to integrate motion into the user interface without disrupting usability 

Week 2 focused on refinement and visual development. With positive feedback on our design consistency and animation quality, we progressed from low-fidelity to more polished wireframes while strengthening the user flow. At the same time, we further developed visual elements such as the Study Room and overall art direction to support a cohesive user experience.



Week 3

 Items Discussed with Supervisor 

In Week 3, no formal consultation was conducted due to the Chinese New Year holiday. As a result, we focused on self-directed progress and internal team discussions to ensure the project continued moving forward.


Our Actions 

1. High-Fidelity Wireframe Development

We transitioned from low-fidelity to high-fidelity wireframes, focusing on improving the overall structure and usability of the app.

Key improvements:

  • Refined and upgraded low-fidelity wireframes into high-fidelity designs
  • Simplified the onboarding process to allow faster user registration and matching
  • Improved the user flow for a smoother and more efficient experience
  • Adjusted the navigation bar to 4 main sections to better organise core features of EduBuddy
Figure 1.5 Figma Prototype Development

2. Wireframe Organisation & Planning

We focused on restructuring and planning improvements across all pages to ensure consistency and clarity.

Key actions:

  • Planned and prioritised changes for each page
  • Reorganised the overall structure of the app’s wireframes
  • Assigned tasks clearly within the team to ensure efficient progress
  • Identified key areas that required further refinement
Figure 1.6 Wireframe Organisation Plans


3. User Testing Preparation

We began preparing for the next phase of the project by developing user testing interview questions.

Focus areas:

  • Understanding user experience with the current prototype
  • Identifying usability issues in navigation and flow
  • Gathering feedback on the Study Buddy matching concept
Figure 1.7 Interview Questions (First Attempt)

Week 3 focused on self-management and major design progression despite the lack of supervisor feedback. We successfully transitioned to high-fidelity prototypes, restructured the wireframes, and improved the overall user flow. Additionally, we strengthened our planning and preparation for upcoming user testing, ensuring the project remains on track.


Week 4

 Items Discussed with Supervisor 

In Week 4, we consulted with Ms Noranis and presented our latest progress, including updated wireframes, MVP and USP direction, and our drafted user testing interview questions. We also discussed how our core features could be further strengthened and differentiated.


Our Actions 

1. User Testing Preparation

We refined and structured our user testing interview questions to better evaluate usability, clarity, and overall experience.

Key improvements:

  • Developed a clear testing script (introduction, task-based testing, and closing)
  • Designed task-based scenarios:
    • Sign up and profile setup
    • Find a study buddy
    • Join a study session
  • Identified observation points such as:
    • User understanding of flow and features
    • Clarity of AI matching questions
    • Interaction with study room tools (timer, whiteboard, music)
  • Included post-task discussions and structured questions to gather deeper insights on usability, motivation, and improvements
Figure 1.7 Interview Questions (Final)
Click HERE to read more

2. High-Fidelity Wireframe Improvements

We continued refining the high-fidelity prototype to improve usability and visual consistency.

Key updates:

  • Adjusted overall UI layout and structure
  • Improved clarity of navigation and feature hierarchy
  • Enhanced onboarding and sign-up flow with better visual feedback
  • Ensured consistency across different pages
Figure 1.8 Hi-fi Prototype Improvement Development


3. Animation & Interaction Design

We experimented with animations to enhance user engagement while maintaining usability.

Key explorations:

  • Text animations during sign-up process
  • Gradient transitions and background motion
  • Logo transition on landing page
  • Subtle animations for onboarding screens

These animations were designed to create a more engaging and dynamic user experience without distracting from core functionality.

Figure 1.9 Animation Components


4. User Flow Development

We constructed an updated user flow chart to reflect the refined structure of the app.

Key focus:

  • Clearer mapping of user journey from onboarding to study session
  • Better alignment between MVP flow and USP features
  • Improved logical flow between key pages and interactions
Figure 1.10 User Flow Chart (First Attempt)

Week 4 focused on strengthening our USP and preparing for user testing. Based on feedback, we shifted our attention towards enhancing the group study experience while continuing to refine our high-fidelity prototype. At the same time, we developed structured user testing methods to gather meaningful insights, ensuring the next phase of the project is both user-driven and well-informed.



Week 5

 Items Discussed with Supervisor 

In Week 5, we presented our user testing results, updated high-fidelity prototype, and improvements made to the user flow and USP features. We discussed key usability issues identified during testing and how these insights could guide further refinements.


Our Actions 

1. User Flow & UX Improvements

Based on testing insights, we refined the overall user experience to improve clarity and efficiency.

Key improvements:

  • Simplified onboarding steps to reduce confusion
  • Improved visibility of main CTA (Find a Study Buddy)
  • Enhanced navigation flow between Home, Matching, and Study Room
  • Reduced unnecessary elements that distracted from core tasks 
Figure 1.11 Home Page Development


2. USP Feature Enhancement (Study Room & Group Experience)

We focused on strengthening our Unique Selling Point—the interactive study environment.

Key updates:

  • Improved layout and hierarchy of Study Room features
  • Made tools like timer, whiteboard, and music more noticeable and intuitive
  • Enhanced the sense of buddy presence and interaction
  • Refined group and chat experience to better support collaborative studying 
Figure 1.12 Study Page Development


3. Visual & Interaction Refinement

We continued polishing the overall look and feel of the app.

Key updates:

  • Improved consistency in UI design and typography
  • Refined animations for smoother transitions
  • Enhanced micro-interactions to provide better feedback during user actions
 
Figure 1.13 Adobe Illustrator Work Progress

Figure 1.14 Nav Bar Redesign

Figure 1.15 Figma Development

Week 5 focused on user testing analysis and iterative improvement. By evaluating real user feedback, we identified key usability issues and refined both the user flow and core features. We also strengthened our USP by enhancing the Study Room experience, ensuring the app is more intuitive, engaging, and aligned with user needs.




Week 6

 Items Discussed with Supervisor 

In Week 6, we presented our latest animations and updated Figma prototype to Mr Razif and Mr Ronald. We also shared our presentation slides for feedback, focusing on both design quality and content structure.



Our Actions 

1. Presentation Development

We worked on completing and refining our final presentation materials.

Key progress:

  • Completed Canva presentation slides
  • Structured content into:
    • Final Product Showcase
    • Problem & Solution
    • Target Users
    • MVP Features & User Flow
    • Design Process & Iterations
    • Technical & Creative Highlights
    • User Value
    • Reflection & Future Development
  • Prepared and finalised the presentation script
  • Updated project management documentation
Figure 1.16 Slides Development



2. Wireframe & UI Refinement

We made final adjustments to improve clarity, usability, and consistency across the app.
Figure 1.17 Home Page Development

Home Page Improvements:

  • Highlighted “Find Study Buddy” as the main CTA using gradient emphasis
  • Added shortcuts to key features (buddies, timer, AI chat/Edi)
  • Simplified the AI matching flow for better usability
Figure 1.18 Study Page Development

Study Page Improvements:

  • Separated Study Timer and Group/Buddies into different tabs
  • Added key features:
    • Whiteboard
    • End session function
    • AI-generated study summary
  • Improved layout consistency and feature organisation


3. Prototype, Graphics & Animation Enhancement

We further refined the prototype and enhanced visual interactions.

Key developments:

  • Improved overall design consistency and usability in Figma prototype
  • Integrated animations and micro-interactions into key flows
  • Developed high-value feature concepts:
    • AI Chat Page (“Keep Chatting” feature)
    • Study Room Page (“Play with Spotify” feature)
  • Designed Edi (AI assistant) expressions to create a more engaging experience
Figure 1.19 Graphics Enhancement


Figure 1.20 Visuals Enhancement

Figure 1.21 Prototypes Enhancement



4. Monetisation & Feature Exploration

We explored potential business strategies to enhance user value.

Key ideas:

  • Introduced premium plans and micro-transactions
  • Proposed Spotify add-on feature (RM5) to enhance study experience
  • Considered reward-based systems (e.g. redeemable vouchers) to improve engagement and retention
  • Linked design decisions to business value (ARPU & retention strategy)
Figure 1.22 Chat (AI mode) Page Development

Figure 1.23 Play with Spotify Feature

Week 6 focused on final refinements and presentation preparation. With strong feedback on our design quality, we shifted our attention to improving research justification, user value, and overall consistency. We enhanced both the prototype and presentation, ensuring that our design decisions are not only visually strong but also strategically and conceptually grounded.




Week 7

 Items Discussed with Supervisor 

In Week 7, we conducted our final presentation in class and received final feedback on our presentation slides from Mr Ronald. The session focused on validating our design decisions and strengthening the justification behind our core concept.



Our Actions 

1. Presentation Refinement

We made final improvements to our presentation slides to strengthen clarity and credibility.

Key updates:

  • Added off-camera study room concept as a key solution in EduBuddy
  • Included research references to support the effectiveness of avatar-based / non-video study environments
  • Improved explanation of how this approach supports focus and accountability
Figure 1.24 Slides Content Refinement

2. Walkthrough Video Production

We created and refined walkthrough videos to showcase the app experience clearly.

Key process:

  • Screen-recorded smooth navigation of each user flow
  • Organised flows with visual cover screens
  • Trimmed unnecessary sections for better clarity
  • Recorded and adjusted voiceover with background audio

We also uploaded the videos to YouTube and Google Drive for accessibility and sharing.

Figure 1.25 Walkthrough Video Editing

3. Final Prototype & User Flow Completion

We finalised our high-fidelity prototype and ensured all flows were complete and functional.

Key outcomes:

  • Completed hi-fi prototype with animations in Figma
  • Updated and refined the user flow chart to reflect the final structure
  • Ensured consistency across all screens and interactions
Figure 1.26 Final Flows


4. Final User Testing

We conducted a final round of user testing to validate our design.

Key findings:

  • Edi (AI assistant) improved engagement and reduced the “serious” academic feel
  • The all-in-one study environment (music + timer + whiteboard) reduced distractions from app-switching
  • AI-generated summaries were seen as highly valuable and practical by users
Figure 1.27 Final Stage of User Testing
Click HERE to read more.


5. Documentation & Content Creation

We completed final documentation and prepared deliverables for submission and showcase.

Key outputs:

  • Finalised blog content for Major Project 2
  • Prepared content for KreatifBeats website showcase
  • Compiled all working files (After Effects, Illustrator, Figma) into a structured Google Drive folder 

Figure 1.28 Kreatif Beats Content Creation
Click HERE to read more.

Week 7 marked the finalisation and presentation stage of the project. We refined our presentation with stronger research support, completed our prototype and documentation, and validated our design through final user testing. Overall, we ensured that EduBuddy is not only visually engaging but also conceptually grounded and user-focused.

 Final Submissions 


Project Management Doc: Link
Project Execution: Link
Project Presentation: Link
Final Project - Walkthrough Video: Link


 Project Presentation 
Figure 1.29 Group 41 EduBuddy by Yan Zhi Xuan & Lim Yu Xuen



 Final Outcome - Full Walkthrough Video 

Figure 1.30 Full Walkthrough Video with Explanation.


 Final Outcome - Hi-fi Prototypes with Animations 

 Figure 1.31 Prototypes in Figma

 Feedback 

Week 1

Mr Razif
  • Focus on our main feature, which is the Study Buddies function
  • MVP (Minimum Viable Product) needs to be adjusted to better align with the main feature
  • Customisation features should be considered secondary, prioritising the core objective is more important

Week 2

Mr Razif
  • The animation quality is good, a strong attempt at producing animations using After Effects
  • The chosen colour palette and typography are appropriate and consistent
  • Continue refining and improving the overall user flow

Week 3

No Feedback was received this week due to the Chinese New Year Holiday

Week 4

Mr Razif
  • USP (Unique Selling Point) should be our groups and chat page where there are features like characters, rooms, music, whiteboard
  • This stood out the most and we should focus on further improving it from here
  • Onboarding and registration is very straightforward, but time to focus on the USP
  • Could think of expanding it to the desktop version for study session calls like the recommended website sent in teams chat
  • Figure out what to look for in interviewee answers
Week 5

Mr Razif
  • Focus on expanding the study page, including the features we mentioned.
  • MVP can just end at joining a study session as that's the main priority of our app (don't make it too long).
  • On the study page we could include status to help differentiate if your study buddies are studying now or offline.
  • The cyan colour and blue text contrast could be better.
Week 6

Mr Razif
  • Grayscale users who are offline in group previews.
  • Make sure the graphics and elements in each page are consistent (like boxes, gradients, corner radius...)
Mr Ronald
  • Aesthetics and design overall is above expectations.

  • Need to improve on research as there's no references in our slides.

  • Wants to know why we decided on the room design in our study page instead of video calling, need to know if that's is based on research it works for our users (study buddy itself is because of body doubling).

  • Monetization is not benefiting the users, it's just ads that can be targeted towards students.
  • But it could be adjusted to study for 60 mins, and receive a free starbucks voucher. Redeem coins for vouchers?
  • Flow should be in 2, New users and Returning users.
  • New users focus on the onboarding process, returning is why users would return to our app?
  • Include references on our slides
  • UI feedback: dropdown menu on onboarding to work, include timer in homepage under UI/UX button
  • UI feedback: face expressions on Edi changes for study page (smile, wow, start to sweat)
  • Buttons don't have to look like buttons

Week 7

Mr Ronald
  • Should have references on "off-camera" method replacing video calls.
  • Does the above method help students just as much as video calls help students stay accountable and motivated?

 Reflections