ZoneFlow

ZoneFlow is a service designed to help students discover and access public study spaces in their city, both individually and as a group. Developed as a Human–Computer Interaction (HCI) course project by a team of seven, ZoneFlow aims to reduce overcrowding in libraries and study rooms by offering smart search, filtering, and scheduling features.

Table of Contents

• Description
• Features
• Prototype
• Project Structure
• Documentation
• Screenshots
• Team
• License

Description

ZoneFlow provides a centralized library of public study places (e.g., libraries, study halls, coworking areas) where users can:

• Search for study spaces by name or location.
• Filter results based on capacity, opening hours, available amenities (Wi-Fi, power outlets, noise level, etc.).
• View live occupancy information (when available).
• Schedule group study sessions by sharing availability with teammates.
• Receive notifications about space availability and schedule updates.

Built with a responsive front-end prototype (HTML, CSS and JavaScript), ZoneFlow demonstrates a complete HCI design process: context analysis, need-finding interviews, personas, conceptual design, wireframing, low and high-fidelity prototyping, heuristic evaluation, usability testing, and iterative refinement.

Features

• Search Bar: Quickly locate libraries and study rooms by name, location, or keyword.
• Filter Panel: Narrow down options based on criteria such as size, amenities, noise level, and opening hours.
• Notifications: An icon on the homepage indicates unread notifications; users can opt-in for alerts when preferred spaces become available or when group members confirm sessions.
• Group Scheduling: Team members can compare their availabilities and book an optimal time slot together.
• Interactive Prototype: Clickable mockups demonstrate the user flow from discovering a study space to final booking.

Prototype

Interactive high-fidelity prototype (Figma): ZoneFlow Prototype

Project Structure

ZoneFlow-HCI/
├── C1/                    # Context & Need-Finding
│   ├── Dati interviste.xlsx
│   ├── NeedFinding PDL Labs.pdf
│   └── Domande/…
├── C2/                    # Conceptual Design & Personas
│   └── C2 HCI.pdf
├── C3/                    # Design Requirements & Guidelines
│   └── C3 HCI.pdf
├── C4/                    # Prototype & Design Rationale
│   ├── Report_ZoneFlow.pdf
│   ├── link_prototipo.txt
│   └── PDL Labs - Report su scelte grafiche.pdf
├── C5/                    # Heuristic Evaluation
│   └── valutazioneEuristica- PDL Labs.pdf
├── C6/                    # Usability Testing & Iterations
│   ├── Presentazione C6_compressed.pdf
│   └── Report Correzioni dalla valutazione.pdf
├── C7/                    # Final Presentation
│   └── Presentazione finale HCI.pdf
├── css/                   # Stylesheets (Bootstrap-based)
│   └── styles.css
├── js/                    # JavaScript scripts
│   └── scripts.js
├── images/                # Images
│   ├── brainstorming.png
│   ├── midfidelity.png
│   ├── prototipofinale.png
│   └── …
├── videos/                # Demonstration videos
│   ├── Video ZoneFlow.mp4
│   └── videointro.mp4
├── index.html             # Main landing page
├── about.html             # “About & Team” page
├── LICENSE                # MIT License
└── README.md              # This file

Documentation

Each C# folder contains the deliverables corresponding to a stage of our HCI design process:

• C1: Context analysis, stakeholder interviews, and need-finding.
• C2: Personas, scenarios, and conceptual design.
• C3: Requirements specification and design guidelines.
• C4: Low- and high-fidelity prototypes, along with design rationale.
• C5: Heuristic evaluation report.
• C6: Usability testing results and iterative corrections.
• C7: Final course presentation.

To explore our process in detail, open the PDFs in each folder.

Screenshots

Below are a few representative screens from our prototype (stored in the images/ directory):

• Homepage
• Mid-Fidelity Wireframe
• Storyboard

For a complete set of mockups, refer to the rest of the images in the images/ folder.

Team

• Giacomo Di Clerico
• Lorenzo D’Ortona
• Federico Bulfari
• Wanlong (Matteo) Liu
• Giuseppe D’Ambrosi
• Daniel Di Stefano
• Alessio Pesavento

This project was completed in 2025 for the Human–Computer Interaction course at our university.

License and Copyright

This project operates under a dual licensing model to distinguish between the website structure and the academic content:

1. Source Code: The website source code is licensed under the MIT License. See the LICENSE file for full details.

2. Academic Content: All reports, PDF documents, and analysis produced for the Human Computer Interaction course are licensed under a Creative Commons Attribution-NonCommercial 4.0 International License (CC BY-NC 4.0).

   

   You are free to consult and share these materials for educational purposes, provided that you give appropriate credit to the author. Commercial use is strictly prohibited.