PeerSpace Web App
PeerSpace, the First Marketplace for Short-Term Creative Spaces, Raises $1.5 Million in Seed Funding. PeerSpace is a versatile marketplace featuring a variety of locations that were previously underutilized or unavailable to the public. Guests now have the ability to search, message, and book these spaces directly through the PeerSpace platform.
As Jesse James Garret is saying “The world’s most powerful functionality falters and fails if users can’t figure out how to make it work”. Behind the strategy and scope of the PeerSpace Web App is the desire to put at user’s service an app that will save the time and make booking experience pleasant. While making researches and prioritizing the functionalities I had always in my mind, almost like a mantra, that this is the product to be designed as a person to person dialog, where guest have in person conversation with the host through our product.
The app has a complex informational architecture, so the goal is to provide the desired functionality while keeping it simple and versatile. The UI would include only the main options: adding a space, get in touch with the host, book a listing, manage a listing, manage a booking, including a recurring, withdrawn or declined one. Easy Search & Filters are designed on the Gestald principle, or at one click distance concept.
Please scroll till the bottom of the page as the project is displayed in two sections – Guest then Host.
User Cases and Scenarios
PeerSpace had already a base of hosts and guests so we divided our users in several groups and the most representative ones became the personas and helped building the scenarios, designing the wireframes and later doing early informal usability testing.
Guest vs Host or Guest and Host Functionality
Previously user could have just one of the Guest or Host roles. As a Guest he could book a space, as a Host he could create a listing. We went further by allowing a user to have both Guest and Host roles.
Multitasking had an impact on app Informational Architecture, many times I reviewed and rethought the user’s flow to simplify it. It was not trivial but I do believe the end result will help the user to solve the problem.
Rough wireframes and digital wireframes were a significant time investment but it paid back, I was able to see early road-blockers, missing screens and experiment with conceptual models.
The brand was defined by Wondereight agency, I used Muli and Ubunty family fonts, brand colors and 12 columns with 6px baselines. The app complexity motivate us to have puzzle style developing approach, developers where focused on different sections of the app and the down side was room for UI inconsistency. I designed a style guide to cover common and unique user interface elements.
While merging to mockups from wireframes I did many on-the-fly updates as a results of weekly and later daily team stand-ups.
It was the main topic on many meetings with the team and the stockholders, got many iterations and I find it solid for first release. I aimed for a progressive disclosure signing process with frustration free, easy to understand steps.
Search & Filter
The goal was to have versatile and easy to use search form followed by filters that are active once you do a basic search. Also UI is fluid, you can minimize the sidebar and the filters and get more real estate to visualize the listings.
Book a listing
This field controls the media of the project. The galleries are managed via the basic WordPress gallery so it’s easy for you to just drag & drop images into the library and create your gallery directly from here.
Is the section to control the upcoming bookings or check the previous ones. The guest can see the booking details, like date, location, time and host contacts. App has a dedicated message section but he can also send a question from Bookings as well.
Once the booking request was sent this is the place to receive booking approval, keep in touch with host or clarify last minute questions.
Host’s role in the application focus is to manage the listing(s) and control booking process. The interface is intuitive and error tolerant, though we work hard to reduce the error scenarios.
Add a Space
We worked hard at the Add a Space section, changed the UX several times all in order to make it smooth and simple to be filled by the host.
This is the Host’s main section in the app. It allows to update, edit, add more listings. All the actions can be done with one click.
Simple and well spaced core elements on the page was my aim for these pages. The Host has a lot of data to handle, the intention was to help him to find faster the required info or make a booking status change.
This is similar to guest messages section, but in case of the host there are also options for approving or denying a booking, answer to guest’s questions or fix payment issues.
Common Informational Architecture
Below are a few samples of common guest and host functionalities.
Started as sub-sidebar then changed to in page content. Rich spacing along with typographic hierarchy is one the paths for a well visually structured page.
It’s the verso side of edit screens, it is what a guest see when looking for host’s info.
Once the booking is completed both the guest and the host receive a message notification for rating – the Guest is invited to rate the listing, the Host is invited to rate the Guest.
You are very patient, thank you!
PeerSpace Web App was a great experience, I hope that you will find the project interesting and also share your thoughts. I can help you with your next project just send me a note using the form below.
Have a project in mind?
Get in touch, let’s discuss and make it real!