Overview
NoteNest was the first prototype I created in SAIT’s Interactive Design program. It aimed to break the monotony of studying by fostering a more engaging, community-driven learning experience. By providing a centralized, social platform, NoteNest made it easy for post-secondary students to share notes, exchange educational materials, and connect with peers—turning studying into a more interactive and collaborative process.
My Role
As Lead Creative & UX/UI Designer, I focused on:
• Structuring and designing key components.
• Creating the brand identity & high-fidelity prototype.
• Initial user research and building user personas.
• Filming and editing a short promotional video for our app MVP.
Tools Used
• Figma/FigJam – User flows, wireframes, high-fidelity UI & prototyping.
• Illustrator – Logo and branding elements.
• Premiere Pro – Promotional video editing.
• Notion – Task tracking and iterative design workflow.
User Flows to High-Fidelity Screens
Research & Process
Our design process was feedback-driven and involved:
• Instructor Guidance & Iterative Feedback – Integrated instructor feedback throughout each phase to refine and improve the design.
• User Research & Persona Development – Conducted initial research to define our audience and create detailed user personas.
• User Flows & Wireframing – Developed user flows and created low-fidelity wireframes to map out the app structure.
• High-Fidelity Component Library – Designed a comprehensive component library to ensure visual consistency and scalability.
• High-Fidelity Prototyping – Built an interactive MVP prototype, focusing on key features and usability.
• Moderated Usability Testing & Iteration – Conducted usability testing with our MVP to gather feedback and refine the design through multiple iterations.
• Promotional Video Production – Filmed and edited a promotional video showcasing our app MVP.
Key Features
• Customizable profile with website link.
• Customizable collections of saved notes called, "Nests.
• Follow other users and utilize filters for specific content viewing.
• "Discovery" page to browse a variety of content.
Potential Iterations/Features
• Integrations with Google Docs and Microsoft Word – Allowing for easy transfer between apps.
• Integrations with D2L – To streamline assignment management, making sharing assignment notes and resources simple and an essential part of a student's workflow.
• Further Prototyping - As mentioned, this was my first experience with Prototyping and as I personal project I would love to expand on the prototype capabilities and refine the layout with the new skills I've acquired.
Challenges & Lessons Learned
Challenges:
• First App Prototype – As my first app prototype, I later realized more efficient ways to create components. However, this process significantly improved my Figma proficiency.
• Balancing Team Opinions – Managing diverse perspectives while ensuring we prioritized user needs over personal preferences.
• Refining the MVP – Narrowing down features to maintain focus and feasibility.
Learnings:
• Figma Proficiency – Self-learning throughout this project made me faster and more efficient in Figma, which became evident in later projects.
• Leadership & Decision-Making – As team lead, I navigated key project decisions, honed my communication skills, and balanced constructive feedback & collaboration for a smooth workflow.
Final Outcome & Impact
This project resulted in a high-fidelity prototype and a promotional video, effectively demonstrating our MVP’s key features and branding to stakeholders.
• High-Fidelity Prototype – Designed an interactive, high-fidelity prototype that showcased the app’s core functionalities and user experience.
• Promotional Video – Created a short, engaging video highlighting key features and branding, providing a compelling visual introduction to the product.
Mobile Prototype
High-Fidelity Screens
