Creating a new coworking expeirence

Client

Novel Coworking

Type

Mobile App

Deliverables

Prototype, UX Design, UI Design

Design details from the Novel Coworking app

Overview

The Novel Coworking app was designed to be a simple way to reserve a coworking space, connect local coworkers, and manage your coworking account. I worked in tandem with the Novel team as well as our in house developer to deliver an app that makes coworking easier, faster, and more connected.

Wireframes

Wireframes

Function

The main focus of this app is to help coworkers to reserve spaces in the quickest, simplest way possible. From the start, we knew that this app would not replace the default calendar app on coworkers' devices. Knowing this, we placed our focus on reserving a space to meet in knowing that you would most likely create a meeting using existing calendar tools.

The other important parts of the experience we had to consider is the community space, access to important account, and building information, as well as updates when you have a package arrive.

Evolution from wireframe to final design direction

Home screen from wireframe to HiFi

Home closeup
Home closeup 2

Form

The home screen was, in my view, one of the most challenging views of the whole experience to design. My goal was to create a space that would provide a high-level view of your day, highlighting important information beyond just the meeting rooms you have reserved.

Starting with the home screen, I created four sections of content that relate to your day as a coworker.

  1. The hero image: This space welcomes you to the app, and acts as a quick reminder of the location you are working from. Users in some cities have access to more than one location, as well as users that are traveling between locations. We want to make sure they are aware of what space.
  2. Upcoming bookings: This section was intentionally designed with a horizontal scroll in mind. The purpose was to maximize the amount of content one could see that relates to their day, not a week. When empty, we fill this space with an empty state that prompts users to reserve a meeting room.
  3. Deliveries: This space is pretty straight forward. If a coworker has a package or mail available for pickup, they can see it here. This space is not visible if they don't have a notification.
  4. Community updates: This section automatically pulls in important community posts that your local Novel Coworking team has shared.

Finally, we have the FAB. This FAB activates the booking flow. Initially, the flow we designed in wireframes asked users to select what room they want to book, and then enter a time they would like to reserve it for. The problem is that if a room is booked all week, we would be suggesting rooms based on the time, but this would most likely happen in another screen after warning the user that no rooms are available. This didn't feel like the best experience we could deliver.

Primary screens from the experience

2 screen booking flow

This leads to us thinking more deeply about how and why a user would book a room. Since we already determined that we were not building a calendar booking app, but a reservation app, I moved in a direction that is meant to support the calendar app. Assuming you use the app to connect with or set up a meeting, you next need to identify a space you would like to use for that meeting. In this scenario, you need to find a room that fits your preset meeting time, not a specific room.

This new way of considering reserving space leads us to create a single view called Availablity. In this view, you select the date and meeting duration, and the app presents you with available rooms. We used duration because this allowed us to cut out setting an end time and further simplifying the number of user inputs needed. The rooms listed all fit your needed meeting time, and you can preview them to make sure they have the needed seating or room amenities for your meeting.

This subtle shift in thinking proved to be a large change to the way coworkers use their location, and in the end, it proved to be a success. We also know that coworkers will have times where they need to book a specific room based on technology or seating needs. In this scenario, coworkers can view all rooms within their location in the My Novel tab. When they view a room they can choose to reserve it in the future. This screen uses a similar availability model, but instead of room availability, it shows time availability that meets the selected date and duration.

Community design

Community

Creating a post, so clean.

Creating a post

Finally, let's talk about design. The aesthetics that we implemented were meant to be professional, but friendly. The design is clean, but with a soft, more rounded feeling throughout. I thought this subtle visual style helped visually create a more friendly place for networking and reserving rooms. Accessibility is one area you can see we were thinking of. Novel's primary brand color is yellow, but we worked on a secondary color that would complement the core brand visual, but also be accessible on its own.

See it Live launch

More screens from the Novel Coworking App

Onboarding screens

Previous

Genesys

Next

About