Workbee

A marketplace for tenants to book a seat in co-working or public spaces

A solution for individuals such as students and remote workers to find suitable workspaces.

Overview

Workbee aims to be the premier coworking space marketplace for tenants to rent public and private workspaces from hosts. Our marketplace will include specialty workspaces that may offer professional equipment, and allow the hosts to make their own rules. This platform is geared towards providing a flexible solution for individuals such as students, freelancers, and remote workers.

Created the design system, user flow, low to high fi wireframes, and prototypes. Led the team by distributing the works and managing timeline.

The Team

Wendy (Me) - UX Designer (main booking flow)

Christina - UX Designer (check-in/out flow)

Andrea, Dishanth, Ruyue - UX Researcher

Duration

Sep. 2021 - Nov. 2021 (3 mon)

Workbee Preview

 

My Role - UX Designer/Leader

00

Problem Space

A glimpse into the problem we are trying to solve

 

How might we

secure individuals such as students, freelancers, and remote workers suitable and available workspaces to minimize searching time?

Understand the access control industry and empathize with users

01

Research

Competitor Analysis

None of the direct competitors includes all of the eight key features we defined in our matrix.

Screen Shot 2021-12-10 at 12.25.38 PM.png

Survey

From the 71 responses we collected, we found that most people prefer to work in coffee shops and 57% of the respondents stay anywhere between 3-6 hours in public workspaces, which prompted us to design the app such that users were able to book timeslots for workspaces in 1-hour long increments, which was contrary to our competitors, all of whom only offered space rentals in day-long increments or longer.

Screen Shot 2021-12-10 at 1.10.09 PM.png

Stakeholder Interviews

We created interviews and affinity mapping to gain a deeper insight into how the stakeholders — hosts, students, and remote workers —  interact with our application space currently and what their processes and difficulties are. We learned two facts: 

1. Spaces are chosen based on their unique characteristics. 

2. Knowing the space availability is crucial.

Affinity MAP IXD.jpg

Research Takeaways

Screen Shot 2021-12-10 at 12.32.10 PM.png
 
 

Identify user's pain based on the research and specify the design requirements

02

Define

Pain Points

Students and remote workers face difficulties in identifying public workspace availability and character in advance.

Requirements

Show spaces catering to users' wish

  • Must list and provide available workspaces

  • Must inform users of the available amenities

  • Must allow users to reserve seats

  • Must have filter to show space listing by criteria

Create flowchart and wireframe

03

Design

 

Brainstorming

After speciying the requirements, I led my team to build the initial user flow together with sticky notes and sketch the initial low-fi wireframes using paper and markers. Starting from the left is the home pagesearch, search result page , space description page, and reservation page. I was in charge of the search result page, and I came up with an idea to use tags, a feature which later became a differentiator of Workbee, to present each location on the map view. 

Screen Shot 2021-12-11 at 10.42.16 PM.png

Med-Fi Wireframes

Based on our brainstorming, I created the user flow on Miro and the corresponding med-fi wireframes on Figma. I have created two versions for the search result list.

Screen Shot 2021-12-11 at 11.18.00 PM.png

Landing on home page, user can search for the available spaces based on their availability, location, and preference. In the search page, I added the Tags feature that allows users to select the space character they prefer. The search result page will present in list view with the map view in the background by default. I came up with two versions, one with instant book button and one without.

Screen Shot 2021-12-11 at 11.19.43 PM.png

I skipped the sign up/in process for the med-fi wireframes. After clicking into the space, users can read the space details and make reservation. I separated the reservation into three processes: confirm details, confirm and pay, and complete reservation.

Screen Shot 2021-12-11 at 11.20.21 PM.png

Create rapid-prototype and conduct A/B testing

04

Prototype and Test

Prototype

I created the prototpye with the med-fi wireframes to run our first usability testing.

 

Usability Testing & A/B Testing

We conducted the testing on five people and found that users prefer the search result page without the instant book button because users like to absorb information through images and want to learn more about the first-time visiting spaces.

B Testing.png

The users also indicated that the reservation process is confusing and some items are repeated.

Reservation.png

The title does not clearly inform users of the status.

Editting selected option is redundant and repetitive.

Adjust user flow and wireframe

05

Iteration

Design System

I created the design system to unify my and the other UX designer's wireframes.

Design System.png

High-fi Wireframe

Based on the testing result, I came back and re-adjust the reservation flow and created the high-fidelity wireframes.

Screen Shot 2021-12-30 at 8.21.14 PM.png
Screen Shot 2021-12-30 at 8.47.23 PM.png
Screen Shot 2021-12-30 at 8.47.31 PM.png
Screen Shot 2021-12-30 at 8.47.41 PM.png

Prototype & Usability Testing

I created the prototype for the researchers on my team to run the second usability testing on UserTesting.com. 

These are the highlighted feedbacks and suggestions:

1. The filter can be more flexible and specific.

Every user had a different preference using the filter, and we should allow them to select different Tags in the setting they hope to show on the searching page. Also, some participants found the Tags not specific.

2. Users love the map legend.

All the participants liked the idea that we used space type as the legend marking the spaces on the map. 

3. Users want to be able to change the availability time on the space detail page.

The user wanted to select their time slots before reaching the reservation flow. This would allow the user to be able to gauge the availability of spots before committing to a location. 

Final Prototype

I was responsible for the main flow, and Christina, the other UX designer was responsible for the check-in/out and the subscription model flow. After testing on our flows separately, we combined our screens into one final prototype. 

 

What I Learn

This is my first time creating a design system from scratch, and I found it really helpful to unify screens designed by different people. I also learned that to complete a project within a limited time, a plan and a leader are inevitable. Our team did not select a leader at the beginning, and we struggled to divide the works. Under time pressure, I volunteered to lead the team in the last few weeks, and I felt it pulled our team together more by learning each team member's strengths and distributing the works to the suitable team member.