RoomLeopard Redesign

RoomLeopard is an online marketplace that matches unused spaces with event organizers in Pittsburgh. It is like Airbnb for event space booking. The current site involves multiple usability issues and looks outdated, leading to low retention and conversion rate. As the sole designer of the team, I collaborated closely with the lead developer to streamline event spot rental process and give the site a new visual language, making it easier for event organizers to book a unique spot. My redesign is considered to be a huge improvement by the stakeholders.
Date
May 2018 – Sep 2018
Team
Lu Yang, Kevyn Reinholt, Michael Sobkowiak
Skill
Usability testing; Card sorting; Rebranding

MAPPING OUT VALUE FLOW AMONG STAKEHOLDERS

To approach the redesign, I identified value exchanges between different stakeholders, and decided to focus on the value flow among guests (event organizers), hosts (spot owners), and RoomLeopard. 

GATHERING BUSINESS REQUIREMENTS

I learned from the business stakeholder that the hosts already took a lot of hand-holding to get set up, so they are more inclined to look past a subpar UX, but the guests will leave the site if it is not satisfying their needs. Therefore, the redesign is centered around guests’ booking experience. To identify usability issues, I decided to conduct user testings and prioritize features utilizing the user testing results.

DESIGNING TASK SCENARIOS FOR USER TESTING

Without access to real users, I asked for the site’s log data, where the “guest’s notes to the host” is recorded. I examined the log data and used affinity mapping to identify the most frequent events and requirements. From the data analysis, I understood that top goals for guests using RoomLeopard were to host meetings, workshops, parties, and bridal showers.
Using the jobs-to-be-done framework, I wrote four user stories based on the data, which are representative of the user needs for space booking. To make sure each user testing is within 30 minutes, I selected two of the user stories as task scenarios. 
Meetings
When I try to book a space for an offsite meeting to discuss upcoming strategic planning for our company, I want to make sure the space has wifi, a projector, and whiteboard materials, as well as a table and seating for 7 people on the day for six hours. I also want to know how much parking is available so I can plan ahead.
Workshops
When I try to book a space for workshop for at least 25 women on conflict resolution, I want to make sure the space is private and available for 2 hours. I also want to know if the room could be split in half or if an additional meeting space could be used for breakout sessions.
Parties
When I look for a space for a 6 year old birthday party, I would like to make sure the venue allow lots of kids and can host 40 people from 5-8 pm on that day. I want a swimming pool and a backup space in case of rain. I want to know if I need to purchase additional time for set up and clean up.
Bridal Showers
When I look for a catered space for bridal shower for my sister, I want to see sample menus for what is possible for the event. I would like to know if we can bring in outside decorations and cookies, and do a mimosa bar in addition to the catering. I want to make sure the venue can host 40-60 people for around 4 hours.

TESTING RESULTS SYNTHESIS

I compiled notes from the first round of user testing with four people. I first sorted pain points by each user, and then sorted pain points by emerging themes. The issues I identified were later plotted on an impact-feasibility matrix. Through working with the lead developer, we were able to decide what issues are the low-hanging fruits. 
Pain points sorted by users
Pain points sorted by emerging themes
Although fixing the reservation flow requires most of the development work, it is highly important to the business because this is likely where most of the users drop off. Based on the matrix, I decided to fix usability issues in the following order:
1. Streamline the reservation flow.
2. Optimize the search flow.
3. Redefine content hierarchy for the spot detail page. 
4. Redesign the homepage.

STREAMLINE THE RESERVATION FLOW

After mapping out the current flow, I found out that new guests have to search three times and leave the request reservation page two times in order to reserve a space. In the new flow, guests do not need to verify their email and fill out their profile. After they sign up, they will be able to send reservation requests on the next screen. 
We added a phone number requirement right before the payment page in case hosts need any last-minute communication with the guests. We also decided to move “Questions for you host” from the spot detail page to the review spot detail page. This will keep the spot detail page light, and reduce cognitive load. 

I would rather it gave me some kind of encouragement. I really didn’t come here to create an account. I want to reserve a conference room.

A user upset by having to go through all the steps

REDESIGNING THE RESERVATION PAGES

OPTIMIZING THE SEARCH FLOW

The key issue I identified through mapping out the search flow and user testing is that the filter is not easily discoverable. None of the user we tested with used the filter to quickly find the event spots they need. Besides, some users have trouble with mapping the icons on the map with the corresponding spots on the search results screen. 

I’m not seeing any filter.

A user who was surprised to find there is actually a filter on the search results page

I’m clicking on the map icons to see where these rooms are and how this map is related to these spaces. I’m not sure which of these on the left side correspond to the map, unless I just go through each one.

A user having a hard time mapping icons on the map with corresponding spaces
In order to help the guest efficiently find a suitable spot, I conducted card sorting sessions with three users to understand what information matters most to the guests. The card sorting also helped me redefine content hierarchy for the spot detail screen. 
I mapped out what information mattered most to each user, and was able to prioritize information in the proposed filter. We had a discussion about whether to include spot types in the new filter, and decided to leave it out since the more filter we have, the fewer spots will be shown given the the spots are limited as of now. 

REDESIGNING THE FILTER

Before
Filter was hidden when scrolling.
After
Filter options are obvious.
After
Catering option is an easy switch.
After
Popular event types are listed.

DESIGN DECISIONS ON SPACE CAPACITY

Originally, I made a distinction between sitting and standing capacity, but the user was confused about its meaning, and it also took time for the user to figure out what number to select if they have a range in mind. We decided to remove sitting and standing capacity, and went back to a single capacity. If the venue is a meeting room, this would mean how much seating room. If the venue is an art gallery, capacity would mean standing room. Therefore, in the next iteration, I enabled guests to directly input numbers for capacity. 
Before
After

DESIGN DECISIONS ON CATERING OPTIONS

The categorization for different catering options were confusing for the user. The language also sounded cold to them. To reduce cognitive load for our guests, I decided to make the catering filter a switch, and put catering description in the spot details page.
Before
After

REDEFINE CONTENT HIERARCHY 

Using the card sorting results, I also redefined content hierarchy on the spot detail screen. Besides, I designed a fixed booking widget so the guest can always start requesting reservation no matter where they are on the spot detail screen.

REDESIGNING THE SPOT DETAIL PAGE

Before
After

REDESIGN THE HOME PAGE

The design goal for the new home page is to help potential guests understand what RoomLeopard is about and how it works, as well as encourage them to start searching. Therefore, I showed RoomLeopard’s values and searching box above the fold, and showcased popular event spots below it.

I thought RoomLeopard was about booking hotel rooms.

A user's impression on RoomLeopard after checking the current homepage
Before
After

DEFINING A NEW VISUAL LANGUAGE

After discussing with the stakeholders, I wrote a design brief that helps define RoomLeopards’ new visual language. Then I created a moodboard based on characteristics defined by the design brief. Once the stakeholder selected pictures that best represent the vibe of the site, I picked colors from the moodboard and offered six options. Given the site should have a minimal feel, we ended up going for option 6. 
Design brief
We want to keep the entire design modern, clean and minimal. The site should help guests find the best spots where they can hold events with efficiency and speed. The overall vibe should feel targeted, sleek, empowering and reassuring.

KEY TAKEAWAYS

In this redesign project, I drove the end-to-end design process and identified what problems to solve from user testing and feature prioritization. I communicated with the stakeholder regularly to make sure we were aligned on the design decisions. To gain stakeholder buy-in, it is important to involve them every step of the way, and use data from user testings to back up decisions. One major challenge that I encountered was that I did not have access to the real users, so I used log data and user testing to quickly prototype ideas. I believe doing user interviews would have helped me uncover more insights. 
For evaluation of success, I conducted another round of user testing and made sure all the usability issues identified had been solved. Going forward, we will release the redesign step by step, because it will help us evaluate each change we made, learn from it and iterate again.