Continue reading...
Responsive Web Design.
Redesigning the Booking System for Prestacam.com
Summary
- Client: Prestacam.com — peer to peer rental for audiovisual professionals.
- Goal: redesigning the booking system.
- Context: a 2 weeks design sprint, April 2020, project done remotely during Covid-19 lockdown. It was a final project for the UX&UI Design Ironhack Bootcamp.
- Team: myself, Daniela Inostroza and Beatrice Nuti.
- My role: UX & UI Designer
- Stakeholders involved: the owner of the company and the developer of the web.
- Final result: responsive website high-fidelity prototype.
The Goal of The Project
The goal of this academic project was to integrate a new feature into an existing website based on a peer-to-peer renting model.
In the brief client asked for redesigning the booking system to be able to rent multiple products from one provider in one transaction.
Fast navigation
In a hurry? Use the links below. To come back up, click the arrow on the right bottom corner.
The Client
What is Prestacam.com?
The company describes itself as “The Airbnb of audiovisual” and its mission is to create a community that shares equipment and services between professionals. Prestacam is a peer-to-peer platform where users can rent and lend cameras, lighting, and any other material needed for a great photo shoot or a video production.
Prestacam’s Goal
Until now, the bookings on Prestacam.com are limited to one piece per transaction. It means that professionals who would like to rent more material have to get through the booking once and again. The company needs to improve this process in order to compete with traditional renting houses, offer a smoother experience for its current users, and grow its user base.
Business Model
The company is based on a peer-to-peer renting model — users who lent their materials are called presters, they publish a listing with information about the product. Then users called renters find those products on the website and book it. In most cases, the renters arrange a meeting, go to pick up the piece, and give it back after use. Prestacam earns a small fee on each transaction and offers insurance and support.
Research
In order to understand what Prestacam users need we talked to a total of 17 audiovisual professionals as well as analyzed the market and the competition.
The goal of the research was to understand why audiovisual professionals rent additional equipment, how they do it, and what problems they encounter in that process. We asked them also about favorite providers and reasons why they chose to rent from them. Then further researched those companies to understand their value proposition and best practices.
After that, we audited the Prestacam website and realized 5 task analysis tests with current and new users.
Market research — understanding the competition
When looking at the market we found out that most competitors in Spain are traditional renting houses who own the material they rent like Avisual Pro or Aclam. Both of them enable bookings online, however, after interviewing audiovisual professionals we found out they rarely use the websites, mostly relying on emails and phone calls to rent the equipment they need. It was mostly because of time efficiency, the business relationship they built over time, and trust. From 7 professionals we asked, 4 people (57%) said that trust and professionalism are the most important factors when choosing a provider.
Understanding the peer-to-peer rental business model
Comparing Prestacam to a rental house is one thing, but competing on a peer-to-peer rentals market it’s a different story. Looking for valuable benchmarks we found ShareGrid y KitSpli, leaders of peer-to-peer rental for audiovisual equipment in the US. Both offer a booking system for more than one product from different providers. We further completed the comparison with looking closer at one of the peer-to-peer market leaders— Airbnb, as well as indirect competition — Fat Llama, that offers user-to-user renting of nearly everything.
Careful analysis of those websites helped to define design patterns and best practices for the project. We found out that renting a product directly from a catalog list is a common practice, moreover, we noticed that prester’s profile and reviews are important and are clearly visible from the beginning.
Users interviews
Finding the right people to interview during Covid-19 lockdown
As the project took place during Covid-19 lockdown we had to rely on online interviews through Hangout and Zoom. First, we asked the Prestacam owner if he could help in arranging some interviews and we got in touch with a few current website users. However, since they were mostly the owner’s friends we decided to avoid the 3Fs (friend, family & fools) and went out to the world. I googled and contacted 12 individuals, companies, or online group and together with my colleagues, we managed to engage in this project 17 audiovisual professionals.
Interviews
We first interviewed 7 audiovisual professionals, each interview took about 30–45 minutes and its goal was to understand the needs and motivations behind renting audiovisual equipment. We asked about situations when they need to rent more than one piece and dived deeper by asking about positive and negative experiences.
If you want to know more — in this link you can see the interview script I used.
Understanding how people use current Prestacam website — Task Analisis and observation
Because of conducting all interviews online, we had the opportunity to watch how people interact with the Prestacam website by sharing the screen. It allowed us to observe and analyze real-time user’s behavior, ask related questions, perform task analysis, and learn how people rate the booking process on the Lickert scale.
The conclusion was that being able to order many products is crucial for the future of the company because 3 out of 5 people (60%) who we observed search simultaneously for several products and view more than one product at a time. It is in line with one of the research insights that 5 out of 7 people interviewed (71%) rent more than one product. We saw that having to start the booking process from the beginning was frustrating.
Information architecture and card sorting
In order to better understand users’ mental models, I designed a short survey than was then distributed in audiovisual associations and online groups. One of the questions included a card sorting test. I asked users to rank, from the most to the least important, 10 categories of information available when renting audiovisual equipment.
I received 10 answers from the card sorting and find out that the information can be divided into three groups, from more general to diving into details. First was category (8.5/10 points) which confirmed that we should keep the fast links to the categories on the home page. The next level of detail included price (8.3/10 points) and name (6.6/10 points) so we decided to make those visible on the product card in the search results. The third level included address, description, photo, and ratings (5.7–5.1/10 points) and we focused on those aspects when designing the product detail page.
Our Virtual Whiteboard
Information gathered during the research and observation has been fragmented and analyzed in an affinity diagram. Since all work was done remotely, Miro has proven to be a great tool to work on it as a team.
Transforming research data into insights
Armed with the insights from our investigation we were ready to define the user personas, problem statement, and value proposition. Below you can find a recap of the most important insights and data.
User Personas
Research results have become the foundation for the definition of user personas presented below.
Meet Silvia — the renter
Silvia Ruiz is 32 y.o. and lives in Barcelona. She has started a small production company with her friends. As the company grows she receives more ambitious contracts, so her goal is to access equipment that meets all the requirements of the new projects. Silvia needs a place where she could rent everything that is required all at once, and her motivation is to find a provider she can trust and build a business relationship with. Silvia’s pain point and fears are that the material she will rent might be defective or some parts will be missing, and as a result, it will delay or cancel the production and she will lose the client.
Meet Pau — the prester
Pau is 39 y.o. and successfully runs his business in Barcelona. He owns an audiovisual production company which in the last years has been investing in new equipment, however, it is not being used all the time. Pau’s goal is to make his investment worth it and he wants to rent the material to other professionals to make some additional income. On the other hand, his pain point and fear is that he is afraid people who rent it will damage the equipment, so what he needs is a way to learn more about renters and gain trust.
Problem Statement
Who?
Entrepreneurs in the audiovisual industry.
What?
They need a way to rent all the material they need effortlessly, with a single trusted provider.
Why?
To avoid problems with pick-ups and deliveries in different places and to be sure that the material is in good condition.
Why is it important?
To minimize stress and improve the performance of their work.
Value proposition
Prestacam will offer a single process to rent all the equipment audiovisual professionals can require, it will enable building a community, manage business relationships, and create trust.
This value proposition leads us to the following focus areas:
- being able to rent all necessary products in one transaction,
- easy access to trusted providers,
- creating lists of favorite products to make future bookings faster,
- enabling a smooth connection between booking management and messages.
Defining the features that enter the MVP
Using jobs-to-be-done to translate the needs into features
During the ideation process, the team analyzed the needs of the users and the context in order to define the desired results which led us to 26 new features.
Defining MVP for this sprint with 7 key features
As the following step, we used the MOSCOW model and classified all features into 4 groups: 7 features as a must-have, 8 features as a should-have, 8 in could-have, and finally, 3 went to “will not have” group. The ones that made it to this sprint are listed below and the most important recommendations for the next sprints can be found in the next steps.
How do the new features respond to the needs of the users and bring the desired results?
Below you can find a detailed list of features developed during this sprint broken up into its cause (needs) and desired results.
User flow
To have a full picture we analyzed the user flow for both renter and prester.
Silvia’s steps to rent an item
Below you can see the main steps Silvia goes through when she rents an item on Prestacam. Having in mind the business needs and insights from the research we decided to focus on two main areas which are reinforcing trust with access to reviews and updating the process to provide users like Silvia with all the information they need when requesting a reservation.
Pau’s steps to accept a renting request
In the renter flow, we focused on developing the features around smooth contact with their presters in order to make it easier to manage the requests and messages. In the long run, those changes were aimed to foster trust and long term business relationships.
4 Key Features and How They Improved During Testing
Together with my team, we conducted 2 rounds on testing (low-fidelity and mid-fidelity) with 5 users each.
Renting multiple products from different renters
As a result of our research we decided to modify the way products are presented after the search and we added three new actions:
- Adding to the cart — according to the client’s brief, it became the most important action on this screen.
- Save to list — responding to the insight that users create lists of products when they rent audiovisual equipment.
- Direct access to renter profile with information about their rating — as a response to insight from interviews, that users want to see which providers they can trust.
When adding so many more actions to this step, we decided to distinguish the hierarchy by using fill out and outlined buttons as well as links. Also, we kept in mind to inform the user about the system staus by adding appropriate states for links and buttons.
Adapting the navigation to the new features
During the observation and task analysis, my team discovered that 5 out of 5 users contact the provider before or during the booking process. They tend to confirm the product conditions, availability, confirming pick up hours, etc.
Until now, the chat was not easy to access, as it could be found at the bottom of the inbox message with the booking. Sounds complicated already, right? We decided to divide messages and bookings and make it accessible directly from the menu.
We also discovered that audiovisual professionals tend to rent the same equipment and when they find a good provider they come back to them — that is why we added “saved products” and “favorite presters” directly to the menu which helps to build trust and long term relationships as 4 out of 7 people interviewed (57%) confirmed trust as one of the most important aspects of renting any material.
Adjusting the request management system and communication between users
Since we decided to make conversations easier by dividing messages and booking confirmation we had to figure out the way to seamlessly navigate between them. That is why after low-fidelity prototype testing we decided to redesign the inbox, removing filters that were supposed to help to navigate between bookings with different statuses. Instead, we added the information directly in the conversation summary, which has proven to be a better solution during the mid-fi testing.
Inside the message thread, it was important for users to have full transparency about the transaction status and the possibility to easily access the booking summary. Unfortunately, we haven’t designed those screens in low-fi so we had to fix it when working on the mid-fidelity. Our solution was to include status feedback inside the messages thread and a direct link to booking summary (to save users some 4 totally wasteful clicks). 4 out of 5 users that tested this solution with us correctly completed the task to reach a booking summary from the message screen.
Adding custom lists of products
During the research, we learned that audiovisual professionals tend to have a list of items to rent for a given project. We wanted to make it simpler for them and designed custom lists. Here they can classify products by project type (eg. wedding photos, TV adds) which helps them to quickly access favorite items of various categories (lighting, cameras, grit, etc.)
During the low-fidelity test we found out that 3 out of 5 users didn’t know how to add a new list (plus icon on top), so we fixed it in mid-fidelity with a descriptive floating button at the bottom of the screen. We also received feedback that some users would like to have a “temporary” place to save some items even when they don’t look for anything specific, so we added a default list “my saved products” to save our busy users some hassle when testing the feature and adding fist products just to try.
UI Design
When first entering the website it’s hard not to compare it to Airbnb, because many UI elements are similar (if not the same). Our fist idea as designers was to propose a new creative concept and give the brand more identity. However, after consulting with the owner we learned this similarity was intentional as he wants the website to give a sense of simplicity just like Airbnb.
Although the team might not have totally agreed with the client (there are many ways to create a simplistic design and it doesn’t have to be by mimicking other brands) we fulfilled the client’s wish and focused on integrating our design in the framework that has already been used. However, we included some recommendations on how to improve the interaction and style to reflect research insights and best practices.
Creative concept — simplicity AND trust
One of the words that were often coming back when talking to users was “trust”. That’s why we decided to update the “simplistic” creative concept and add this value to communicate it through our design. We tried to achieve this with visibility of the reviews and the functionality of saving products and presters as favorites, to easily return to people and items that have generated good experiences.
In order to maintain the simplistic design that our client prefers we rarely user icons and if so, they were plain and black, we used one main color that came from the brand, one secondary color, and applied simple lines and lots of white space.
Adapting the Style Guide to make the design more accessible
Since we were asked to keep the colors we analyzed the current UI elements and only adjusted them slightly. We have changed the hue of the secondary color as the previous tone did not meet accessibility and contrast requirements (contrast ratio 2.1:1). In the future, however, we strongly recommend adjusting all colors or changing the text on buttons from white to a darker shade in order to make the website accessible to all users.
Applying one color to all actions
Currently, users can find two different action colors as some buttons are red, others are green, and links tend to be red or grey. We decided to bring some harmony to the design by using only the main color as indicating action throughout the whole website.
High-Fidelity Prototype
During the sprint, we developed 50 screens in mobile to cover the whole user flow for multiproduct orders, booking management, new navigation, messages inbox as well as lists of favorite products and providers. You can check them out in the 3 user flows presented below.
Making a Multiproduct Booking — Silvia’s User Flow
Booking Management — Pau’s User Flow
Messages System — Silvia’s Inbox
Responsive Design
From 50 screens developed for the mobile, we chose 3 most important to present in desktop for this sprint. Those screens included product, messages inbox, and order summary. You can find an example below.
Desirability Testing
After having implemented the new features into the design and coming to the high fidelity prototype we wanted to make sure that our solution broadcasts the concepts we intended to. That is why we sent out a survey based on the Microsoft Reaction Cards test. In the end, we received 49 responses which confirmed that the new design was associated with phrases like: easy to use (59%), simple design (32%), and trust (30%).
Next Steps
Measures of success (KPIs)
To be able to see what outcomes the new solutions bring we recommended to measure:
- user base growth — to see if the new solutions help to capture new business and make Prestacam more competitive on the market,
- the number of items per transaction per user — to measure how the new funnel performs while also keeping an eye on Google Analytics and seeing whether there are weak spots in the new booking process that can be addressed and improved,
- revenue growth — to capture the bigger picture and see the overall change that should be an effect of an increase in both of the metrics listed above.
We recommend measuring the results in short term (eg.monthly) to see how current users react to the changes and whether there should be some additional communication implemented to inform users about the new features, as well as in long term (eg. quarterly) to see if the solutions attract new users and if the number of transactions increases.
Recommendations
Many of the features we came up with during this project did not enter the current MVP, so here are few examples of how the Prestacam website could improve in the future.
Focus next research on presters (providers)
We recommend focusing future sprints on developing better solutions for the providers. During our research, we found a weak spot in the user journey because providers had to fill out a collection form that was long and complicated, however, we couldn’t address this issue during this sprint. Presters are half of Prestacam’s business so in our opinion, it would be worth focusing on their needs in the following sprints.
Automatic acceptance of bookings
A lot of user’s effort is currently focused on communication between presters and renters. They send messages to figure out the availability of an item and setting up the pick up and drop off date and time. With a calendar to mark availability dates, it would be possible to automate the bookings management and it would save time for both presters and renters.
Building trust
Trust was the quality that came up during research and testing as crucial for this group of users. During the ideation process, we came up with some website improvements to build trust:
- more visible information about insurance and statistics of current clients’ satisfaction, testimonials, etc.,
- profile verification or visible user experience level, that would enable any user to see whether they rent the equipment to/from an amateur, professional, or a company.
- detailed information about the product — obliging presters to provide real photos and updating the description fields to make it more detailed and comparable within the website,
- possibility of filtering products by rating.
Learnings
Looking back at this project I found a few things that I will definitely do better in the next projects.
Involving business owner in different stages of the process
And I don’t mean inform, I mean to make him/her participate in research, testing and generating ideas so that he/she will become a co-creator of the project. Dan Ariely who described the IKEA effect explains that people value more products that they had to put effort into. Involving business stakeholders in the process is the best way to create a solution that they will believe it.
Defining the client’s “why”
In future projects I will focus more on defining the business goals and what outcome they are expecting. In this example, we knew that Prestacam wanted to include multiproduct orders, but I believe we failed to capture the “why?” — was it to grow user base, to be more competitive in the market, to motivate current users to rent more, to increase customer satisfaction, to increase user retention, grow revenue (you can complete this list with many other KPIs). Having a clear and measurable goal set in the beginning helps to manage client’s expectations, keep the correct direction and focus on the outcome. Right, the outcome focus is another take away from this project.
Focusing on the outcome and not the output
I believe that some designers tend to focus on “what we do” and not “why we do it”. Here is an example, because I believe we could have done this better in this project. Having a quantitative business goal defined in the begging helps design teams to focus on a measurable outcome (eg. X more transaction within X period of time which translates into X% revenue growth) rather than output (X screens enabling users to rent X products within X minutes). Both are important, however, as designers, we have to keep in mind not only user goals to do a task X efficiently and effortlessly but also business goals and how it makes the business grow.
Tools and Skills Acquired
Below you can find a keyword list of tools and skills I learned during this project.
Tools: desk research, user interviews, surveys, task analysis, observation, card sorting, Microsoft Reaction Card Test, Sketch, InVision, remote work tools like Miro, Hangouts and Zoom.
Skills: Teamwork in UX&UI Design, Working with Stakeholders, Design Thinking, User Experience, Project Management, Design Sprint, User Research, Data-Driven Decision Making, Interaction Design, Wireframing, Prototyping, Usability Testing, Responsive Web Design.