Team: Michelle Kim, Nick Wong & myself
Role: Product Designer
Software: Figma, Adobe Illustrator
Duration: Oct 2023 (24 Hours)
synthesis is an AI-powered application that integrates seamlessly with educational videos, analyzing content in real time to enable interactive Q&A. As the sole product designer, I was responsible for the end-to-end design, and working cross-functionally to hand-off a high-fidelity prototype.
💡 the problem
✦ traditional online educational content fall short in terms of interactivity and engagement—the monologue format of videos leaves no room for learners' spontaneous questions
✦ this disrupts how students learn by discouraging students from asking questions when they have trouble understanding material
✦ ChatGPT, commonly used by post-secondary students, fails to address this gap in education and technology, as it is unable to take video inputs, is unaware of the inquirer's level of knowledge, and relies entirely on careful prompt engineering to provide context.
the design challenge ✷
"How might we enhance online learning by accommodating spontaneous student questions and adapting to individual knowledge levels to address the limitations of traditional educational content and AI models like ChatGPT?"
🛠 the process
research — lo-fi wireframes — mid-fi screens — hi-fi prototype
(a little bit of) research
✦ Given the 24-hour time constraint of the Dubhacks hackathon, we conducted user research by surveying our team's own experience with video-format educational materials and devised a list of pain points and features to design:
✧ Accept a video link input from the user
✧ Provide the AI model with the video transcript for context
✧ Produce a video transcript for the user to conveniently copy-paste as part of their question prompt as needed
✧ Have a familiar chat-bot interface similar to ChatGPT where users can receive responses to their questions
lo-fi wireframes
✦ With the general features and user flow in mind, I sketched basic wireframes to visualize two potential layouts for the main page of our application
✦ I decided on layout 1, as it used the full space of the screen a lot more effectively than layout 2, and would reduce the amount of scrolling needed to navigate through chat responses
mid-fi screens -> hi-fi prototype
✦ Once a mid-fidelity prototype was finished, I collaborated with my developers to turn the design into a functioning web app, and continually making improvements with regards to usability and visual-appeal
✦ Having a little time to spare at the end, I designed our 3D bird mascot "borb", using Spline
✦ As well, I designed a Kids mode to make our tool, and self-learning, accessible to a wider audience. Kids mode is designed to appeal to a younger age demographic through the use of more playful colours. It produces responses catered to kids through the use of simplified language and analogies
_edited.png)
✦ Future enhancements include multilingual support, and compatibility with additional media such as podcasts, lecture slides and Zoom recordings
✦ Extend our real-time analysis to include not just textual and auditory inputs, but also visual elements of the video through annotations