Skip to main content
PHATPHUM.ME
All projects

Academic·2025

Chalapao

CS251 Database Systems 1: Online Rental Marketplace Platform

Chalapao
Role
UX/UI Designer & Frontend Developer
Team
Group Project
Year
2025

Key figures

2
User roles
5
Core screens
Figma
Designed in
CS251
Course

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.

The problem

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

The approach

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

The result

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

Retrospective

Challenges

  • Designing comprehensive yet simple flows that cover essential steps for both renters and listers without overcomplicating the experience.
  • Ensuring the UI communicates request and item statuses clearly to reduce misunderstandings between users.
  • Building a responsive frontend closely aligned with the Figma design under limited project time.

Learnings

  • A structured UX workflow—from system flow and wireframes to UI design in Figma.
  • Frontend development with React + Tailwind to create consistent, responsive interfaces.
  • Practical integration with a Node.js backend, focusing on data flow and state/status handling for core features.
  • Multi-role product design—aligning renter and lister journeys into a coherent platform experience.

Interested in work like this?

Tell me about your brief — I reply within 24 hours.

Start a conversation