Kaleidoscope: A Reflective Documentation Tool for a User Interface Design Course

Document Title

Kaleidoscope: A Reflective Documentation Tool for a User Interface Design Course

Document Information

• Topic Area: Human-Computer Interaction (HCI) Education, Process-Oriented Design Tools
• Keywords: HCI education, reflection, documentation, design studio, online learning, collaboration tools, remote teaching, user interface design, design process

Research Background and Issues

• What problems or challenges did the authors identify?

  • Human-Computer Interaction (HCI) courses often adopt project-based and studio-based teaching environments, but traditional teaching methods have limitations in assessing and understanding the complete design process of students.
  • Both students and instructors lack high-level views and reflective abilities regarding the design process, as well as tools to integrate and showcase the design journey.
  • During the COVID-19 pandemic, restrictions on remote collaboration exacerbated the challenges of design studio interaction and student collaboration, highlighting the importance of effective documentation and reflection tools.

• Why is this issue important?

  • Reflection and visibility into the design process are critical for students to learn design skills and enhance their metacognitive abilities.
  • Documenting the design process not only strengthens students' learning and collaboration but also lays a foundation for their future learning and practice.

• Research Motivation and Related Work

  • Physical interaction and reflection in design studios are difficult to achieve under remote teaching conditions.
  • Literature suggests that tools resembling expert practices can effectively support reflection and learning in design-related courses.
  • To address the shortcomings of existing documentation tools, the authors designed and developed an online tool called Kaleidoscope to explore the value of such tools in HCI education.

Solution

• What methods or solutions did the authors propose?

  • Proposed and developed an online documentation tool named "Kaleidoscope," aimed at reflecting and supporting the design process in user interface design courses.
  • The tool's "Studio Space" feature allows student teams to document multimedia artifacts from design projects, centralize feedback and collaboration, and enable instructors to view students' design processes.

• What is innovative about this solution?

  • Visualizes the design process to support metacognitive reflection.
  • Integrates outputs from multiple design tools (e.g., Figma, GitHub, and YouTube) into a unified documentation repository.
  • Encourages students to record, store, and share their process in real-time, differing from traditional teaching models that focus solely on submitting final deliverables.

• What are the implementation steps and key technologies used?

  • Developed using React and Google Firebase technologies.
  • Provided a range of features for students and teams, including:
    • Studio Spaces: Recording and showcasing the history of the design process.
    • Check-ins: Template-based functionality for submitting coursework.
    • Explore Page: Browsing and analyzing public artifacts from peers.
    • Portfolio Pages: Interactive portfolios for final project presentations.
  • The tool incorporates an iterative design mechanism to improve key features (e.g., layout customization and artifact editing) based on student feedback.

Research Outcomes

• What specific outcomes were achieved?

  • After deploying Kaleidoscope in remote courses, students documented over 3,800 artifacts, successfully supporting reflection activities and collaboration.
  • The developed tool helped students organize design histories and switch ideas across different design stages.
  • Various course support features (e.g., Check-ins and Portfolio Pages) effectively facilitated student learning.

• What advantages does it have compared to existing solutions?

  • The tool is not just for documentation management but emphasizes reflective learning, particularly supporting non-linear and exploratory design processes.
  • Integrates and centralizes the panoramic view of the design process, addressing the fragmentation limitations of existing design tools.
  • Provides continuous visibility of data, enhancing students' understanding of iterative design and their team collaboration performance.

• What were the experimental or evaluation results?

  • Students appreciated the value of using a design documentation tool for reflection, especially in later stages of the design process.
  • Data showed that students uploaded a large number of images, text, code submissions, and video artifacts, and participated in over 1,000 feedback interactions.
  • Reflective tasks (e.g., portfolio presentations) were actively adopted, helping students recognize the importance of process documentation.

• Limitations and Future Directions

  • Challenges:
    • Students perceived Kaleidoscope more as a submission tool rather than a design tool.
    • Initial visual layout was unclear, leading to student confusion.
    • Lack of support for balancing privacy and public visibility in team collaboration.
  • Suggestions:
    • Deeper integration with other design tools to reduce manual upload burdens.
    • Strengthen guidance emphasizing reflection and process documentation.
    • Optimize interface design to alleviate information overload issues.