A professional web platform for premium office space rentals. The interface provides intuitive browsing and incorporates strategic social proof to offer businesses a trusted and seamless environment for finding their perfect growth space.
Role as UI/UX Designer & Fullstack Developer
Indonesia, Faiz Visual .2023
Industry
Marketplace Platforms (Saas)
Project Type
Personal Project
Duration
3
weeks
Research // 3 days
Ideation & sketch // 4 days
Develop MVP // 2 weeks
Services
Tools Design
Miro, Figma
Tech Stack
Javascript, Vue.js, Laravel, TailwindCSS, HTML 5, PostgreSQL
To cut through the logistical hurdles of finding flexible office space, FirstOffice provides a streamlined booking platform. Featuring detailed listings and intuitive filters, it empowers businesses to instantly book productive environments, freeing them to focus entirely on their growth.
Want to create something like ?
Problem
Fragmented Experience: Users had to navigate numerous disconnected websites to find and compare office spaces, leading to an inefficient and frustrating search process.
Lack of Trust and Transparency: Existing listings often lacked clear pricing, real-time availability, and verified information, making it difficult for users to make confident decisions.
Diverse User Needs: The platform needed to be intuitive and flexible enough to serve a wide range of users, from solo freelancers to entire corporate teams, in a competitive market.
Approach
User-Centric Research: Grounded the design in a deep understanding of user pain points to ensure a truly intuitive end-to-end journey.
Dynamic Front-End (React & TypeScript): Built a responsive, interactive, and type-safe interface featuring real-time filtering, map integration, and a streamlined booking form.
Robust Back-End (Laravel): Engineered a secure back-end to manage all business logic, including user authentication, space listings, and booking processing.
Reliable Database (PostgreSQL): Utilized PostgreSQL to ensure data integrity and efficiently handle the application's queries for a scalable platform.
Here i do
Before writing a single line of code, I grounded my strategy in understanding the people I was building for. My goal was to validate my assumptions and uncover the core needs of both renters and property owners.
1. Competitive Analysis & Market Research
I began by analyzing existing platforms, from large players like WeWork to smaller, local listing sites. I mapped out their strengths and weaknesses, focusing on their user journeys for searching and booking.
Feature / Aspect | WeWork (The Premium Provider) | LiquidSpace (The Established Marketplace) | Local Listing Sites (The Fragmented Option) | VOffice (Our Platform) |
User Interface (UI) | Highly polished, brand-focused, and consistent. | Feature-rich, but can feel cluttered and complex for new users. | Outdated, inconsistent, and often filled with ads. | Modern, intuitive, and minimalist. Designed for speed and clarity. |
Search & Filtering | Excellent search within its own properties, but limited to a single provider. | Very advanced filtering options, which can be overwhelming. | Basic text search with minimal to no filtering capabilities. | Dynamic, real-time filtering focused on the most critical user needs (price, size, location). |
Trust & Transparency | High. Centralized control means listings are accurate and pricing is clear. | Variable. Relies on user reviews and host-provided data. Pricing can have hidden fees. | Very low. High risk of outdated information, scams, or inaccurate pricing. | High. A core goal is to provide detailed listings and transparent, all-in pricing to build user trust. |
Booking Process | Fully integrated, digital, and seamless. | Integrated booking, but the process can have multiple steps and vary by host. | Completely offline. Requires users to email or call, with no integration. | Streamlined MVP focuses on a simple "Request a Tour" flow, removing friction from the first commitment. |
Target Audience | Enterprises and well-funded startups seeking a premium, all-inclusive experience. | A very broad range, from individual freelancers to large corporations. | General users, often highly budget-conscious. | Specifically focused on startups, freelancers, and small to medium-sized businesses (SMBs). |
Key Insight: Most platforms were either overly complex or too simplistic, lacking detailed information. A significant opportunity existed to build trust through highly detailed, verifiable listings and a crystal-clear user interface. This insight directly shaped the VOffice feature set.
2. Defining the Users: Crafting Personas
To ensure my decisions were user-centric, I developed two primary personas based on my research findings:
Sarah, the Startup Founder (Renter): She's tech-savvy but time-poor. She needs a fast, transparent way to find a flexible office for her growing team of five. Her biggest frustrations are hidden costs and a slow booking process.
David, the Property Manager (Owner): He manages several boutique office spaces. He needs a simple way to list his properties, manage bookings, and attract high-quality tenants without paying exorbitant platform fees.
Creating these personas was a critical step. It allowed me to move beyond generic features and ask targeted questions like, "How can I make this process faster for Sarah?" and "How can we give David more control?"
Whats Next ?
Armed with clear insights into user needs, I transitioned from research to building a tangible plan. I focused on structuring the user experience logically before committing to high-fidelity designs or code.
1. Mapping the User Journey
I used Miro to map out the entire user flow for "Sarah," from landing on the homepage to successfully booking a tour. This exercise was crucial because it forced me to visualize every single step and decision a user would make. By doing this, I identified potential friction points early, such as an overly long sign-up form, and redesigned the flow to be more streamlined.
2. Wireframing & Information Architecture
With the user flow established, I moved into Figma to create low-fidelity wireframes.
Why? This approach ensured that feedback conversations focused purely on functionality, layout, and information hierarchy. By stripping away visual distractions like colors and imagery, I could validate that the core structure was intuitive and addressed the primary user goals identified in my research.
3. Choosing the Right Tools for the Job
I selected a modern, robust tech stack to bring this vision to life. My decision was based on building a platform that was scalable, maintainable, and provided a great developer experience.
I chose Laravel 11 for the back-end because its ecosystem is perfect for rapidly building secure RESTful APIs, handling user authentication, and managing complex database queries.
I implemented a React and TypeScript front-end to create a highly interactive, fast, and type-safe user interface. TypeScript, in particular, was chosen to prevent common bugs and make the codebase easier to refactor as the project grew.
The Final Execution
With the blueprint in place, I moved into development, focusing on delivering the core features that would solve Sarah's most pressing problems.
Engineered a Dynamic Search and Filtering System
I engineered a real-time search engine on the homepage using React. As a user types and applies filters (like price, location, or capacity). This directly solved Sarah's need for a fast and efficient search experience.Implemented Detailed, Rich Property Pages
To build the trust that was missing from competing platforms, I designed and built property pages that showcased rich information. I created components for an interactive image gallery, a list of amenities with icons, an embedded map for location, and clear pricing information. This directly addressed the user need for transparency.Developed a Seamless Booking Flow
I made the booking process simple and reliable. When a user finds an office they like, they can request a tour with just one click.Built a Comprehensive Owner Dashboard. I created a dedicated, secure area where property owners can manage their listings and view performance.
Developed Full CRUD for Properties. Owners can Create, Read, Update, and Delete their own property listings through an intuitive interface.
Engineered Image Upload and Management. I implemented a system for owners to upload multiple photos for their properties, which are then processed and stored securely.
Created a Secure Authentication System. I built a complete registration and login system using Laravel Sanctum for API token-based authentication, ensuring all user data and actions are secure.
Implemented a "My Bookings" Page. I developed a dedicated page where logged-in renters can view their upcoming and past bookings, allowing them to manage their plans effectively.
I started this project by obsessing over a single problem: the friction, the wasted hours, the sheer frustration of finding a place to work. My approach was to engineer simplicity at every step.
This project taught me that true value isn't measured in features, but in the time and energy you give back to people. I didn't just implement a search filter; I eliminated hours of dead-end searching. I didn't just design a booking form; I created the first confident step for a new business. We transformed a daunting, multi-day task into a decisive ten-minute action, freeing our users to focus on the work only they can do.
