This statement concentrates on the highlights and reflection of prototypes that I have designed. Hope these contents can showcase my exploration in UI design and product management.

A. School Library Booking System

1. Prototype Overview & Description

1.1 Purpose

In the dynamic and bustling environment of campus life, finding an appropriate space for study or meeting can often pose a significant challenge, particularly during peak hours. Recognizing this prevalent issue, the development of a solution in the form of a space availability and reservation mobile application (APP) has emerged as a necessity.

This prototype is designed to serve both staff and students by providing real-time data on the availability, location, capacity, and facilities of various spaces across campus. It incorporates a user-friendly interface tailored for the rapid identification of spaces that align with specific preferences and requirements, streamlining the process of identifying suitable environments for both individual study sessions and group meetings. In addition, the app will offer interactive campus maps and directions to guide users to their booked spaces, addressing potential navigational challenges within expansive campus environments.

1.2 Overview

The full prototype is shown in Figma:

https://www.figma.com/proto/fSgyUIH36WnV1lB6h1d7ET/School-Library-Booking-System?node-id=23-16&node-type=canvas&t=pVdaDaCUMD6cyrTu-0&scaling=scale-down&content-scaling=fixed&page-id=0%3A1&starting-point-node-id=23%3A16

https://embed.figma.com/proto/fSgyUIH36WnV1lB6h1d7ET/School-Library-Booking-System?node-id=23-16&node-type=canvas&t=pVdaDaCUMD6cyrTu-0&scaling=scale-down&content-scaling=fixed&page-id=0%3A1&starting-point-node-id=23%3A16&embed-host=notion&footer=false&theme=system

1.3 Design Description

Login

Figure 1. Login Page

Figure 1. Login Page

Figure 2. Button Clicked

Figure 2. Button Clicked

Figure 3. Login Process

Figure 3. Login Process

Booking Operations

Figure 4. Booking Operation Page

Figure 4. Booking Operation Page

Quick Reservation

Figure 5. Scan QR code to make a quick reservation.

Figure 5. Scan QR code to make a quick reservation.