PHATPHUM.ME
Academic2024

Chalapao

CS251 Database Systems 1: Online Rental Marketplace Platform

Chalapao

Role

UX/UI Designer & Frontend Developer

Year

2024

Team

Group Project

Tech Stack

Figma, React, Node.js, Tailwind

A web application designed as an online rental marketplace where users can list items for rent and rent items from others through a structured workflow. The platform covers key steps such as creating listings, browsing and viewing item details, submitting rental requests, and tracking request/status updates. This project emphasizes user experience (UX) and end-to-end system flow design for both roles—renters and listers—so the rental process remains clear, intuitive, and consistent.

01 The Problem

  • Unstructured rental processes often cause miscommunication, unclear status tracking, and higher risk of errors.
  • Renters need clear visibility into available listings, details, and conditions before making decisions.
  • Listers need an organized way to manage their listings and review incoming rental requests.
  • Designing a coherent UX for two roles (renter/lister) requires aligned, practical end-to-end flows.

02 The Solution

  • Designed the UX/UI in Figma, starting from personas, user journeys, and system flows to ensure a natural and consistent experience.
  • Defined key screens and navigation structure—listing feed, item detail, create listing, rental request, and status tracking—to support the complete rental journey.
  • Implemented the frontend with React and Tailwind to match the Figma design system and ensure responsive behavior across devices.
  • Integrated with a Node.js backend to support core features such as listing retrieval, request submission, and status updates.

03 The Result

  • Delivered a structured prototype rental marketplace that supports both renter and lister roles with clear end-to-end user flows.
  • Users can browse listings, review item details, submit rental requests, and track request statuses conveniently.
  • Listers can manage listings and review rental requests more effectively through the designed workflow.

Project Gallery

Gallery image 1

UI sample screens and platform flow overview

Gallery image 2
Gallery image 3
Gallery image 4
Gallery image 5
Gallery image 6
Gallery image 7
Gallery image 8
Gallery image 9
Gallery image 10
Gallery image 11
Gallery image 12
Gallery image 13
Gallery image 14
Gallery image 15
Gallery image 16