Website redesign of inflatable rentals company

BHM

A/B Testing | UX/UI | Nov. 2019

Overview

___________

A prospective buyer of BounceHouseMan(BHM) and a BHM employee, reached out to me asking for a website redesign for desktop. Seizing the opportunity to merge professional work with school work, I decided to have the redesign be a semester long project. Bouncehouseman is a company that provides rental bouncers, dry and wet slides, concessions, drive in movie screens and tables/chairs. Our goal for this website was to make it more professional and practical, while still maintaining a ‘fun’ look that appeals to the audience.

Tech:

Team:

Duration:

Role:

Fey Teke

XD, Google Forms, Quicktime Recorder, UserTesting.com

12 weeks

Researcher & Designer

Full Case Study

Problem:

Opportunity:

BHM has loyal local users but is not reaching new customers. A redesign will capture a new audience and increase sales.

A redesigned website with new data driven functionalities that increase usability and maintains aesthetic consistency.

Solution:

Low user engagement and revenue due to the website's lack of aesthetic consistency and poor usability of the interface.

The existing website design.

Research

___________

The initial research methods that were adopted to gain a better understanding of the users were interview, log data gathering and heuristic evaluation. We conducted an in-person interview with a current employee of BounceHouseMan, who was also a prospective buyer of the company. Additionally, we analyzed log data about clients gathered by the company. Due to privacy and security, we were provided limited log data information. Lastly, the two of us performed individual heuristic evaluations.

Defining Audience

Based on the data gathered, we identified three major users as the target audience. These users are young moms, directors of children’s ministries and executives of homeowner associations (HOAs). We also identified some users and stakeholders that are involved with, but do not necessarily fall into the target audience. For example, it is common for children to interact directly with the user interface during the selection of Bounce House Man’s products, yet, ultimately they are not the target audience because they do not make the final purchase.

Current Purchase Flow

The current task is structured so that it only takes four sub-tasks to complete the task at hand. The system does not allow for products to be automatically booked, rather it involves the user submitting a form with their personal information and the product they would like to rent.

V1 Design Process

___________

With the redesign, we aimed to improve the usability of this platform by creating intuitive paths to support the user's journey navigating BHM's website. To do so, we utilized our initial research to construct personas and design low-fidelity functionalities for the website. We then built high-fidelity prototypes and tested.

Persona

V1 Design Decisions

Footer

The existing website lacks a clear footer. While there is information present at the bottom of the website, the information lacks links to internal and external pages, organization and clear separation. A footer is needed because users are accustomed to navigate to the bottom of the website to find contact information, links and more and it helps SEO. Since the website is not flooded with information, we think the footer can be a mini footer and still be effective. Alternative #2 provides internal and external links alike to alternative #1, yet it takes up less space.  

Footer

The existing website lacks a clear footer. While there is information present at the bottom of the website, the information lacks links to internal and external pages, organization and clear separation. A footer is needed because users are accustomed to navigate to the bottom of the website to find contact information, links and more and it helps SEO. Since the website is not flooded with information, we think the footer can be a mini footer and still be effective. Alternative #2 provides internal and external links alike to alternative #1, yet it takes up less space.  

Filter & Sort By

The existing filter tool was oversized, outdated and only filtered categories. We, therefore, decided to implement a filter and sort function at the top of the products page and an option to sort by price and date to the left side of the page. Providing a filter tool would minimize the need for scrolling through the entire inventory. Users can easily filter what they desire and access information quickly. Another benefit of this decision is that it provides the user with the ability to sort by price, popularity, and date of availability. Lastly, by inserting the ‘filter’ and ‘sort by,’ we were able to remove a great deal of the information on the original cluttered web page.

Filter & Sort By

The existing filter tool was oversized, outdated and only filtered categories. We, therefore, decided to implement a filter and sort function at the top of the products page and an option to sort by price and date to the left side of the page. Providing a filter tool would minimize the need for scrolling through the entire inventory. Users can easily filter what they desire and access information quickly. Another benefit of this decision is that it provides the user with the ability to sort by price, popularity, and date of availability. Lastly, by inserting the ‘filter’ and ‘sort by,’ we were able to remove a great deal of the information on the original cluttered web page.

Navigation Bar

On the home page, the existing navigation consists of four possible selections which act as the navigation menu. Once clicked, the navigation options no longer appear. Essentially, the user would have to go back to see the options once more. Thus, if the user has clicked through several pages, it can be tedious to go back and forth. We chose to implement a fixed navigation bar across the top of the website that is characterized by the following: (1) font sizes that are suitable for the screen, (2) menu options that look ‘clickable’ or provide feedback, (3) options that contrast with the background, and (4) options that show users ‘where’ the currently visible screen is located. which center content more than older websites.

Navigation Bar

On the home page, the existing navigation consists of four possible selections which act as the navigation menu. Once clicked, the navigation options no longer appear. Essentially, the user would have to go back to see the options once more. Thus, if the user has clicked through several pages, it can be tedious to go back and forth. We chose to implement a fixed navigation bar across the top of the website that is characterized by the following: (1) font sizes that are suitable for the screen, (2) menu options that look ‘clickable’ or provide feedback, (3) options that contrast with the background, and (4) options that show users ‘where’ the currently visible screen is located. which center content more than older websites.

Purchase Route

Since the existing product purchase route is unorganized, redundant and inefficient, users are likely to leave the website. For option 1, the most prominent route change is we decided to implement a calendar system that allows the customer to know whether or not the product they chose is available on certain dates, in real time. On the other hand, option 2 includes the ‘calendar’ feature and introduces the ‘Shopping Cart’ feature. Users can check the availability of their products, add it to their shopping carts and continue browsing for other products, if they choose to do so.

Purchase Route

Since the existing product purchase route is unorganized, redundant and inefficient, users are likely to leave the website. For option 1, the most prominent route change is we decided to implement a calendar system that allows the customer to know whether or not the product they chose is available on certain dates, in real time. On the other hand, option 2 includes the ‘calendar’ feature and introduces the ‘Shopping Cart’ feature. Users can check the availability of their products, add it to their shopping carts and continue browsing for other products, if they choose to do so.

Style Guide

The existing color scheme is messy and there is no consistency with the font type and size. While the website does not contain a lot of information, the information is not presented aesthetically. Each extra unit diminishes the value of other units on the page. Thus, the need for a redesigned style guide was pressing. We selected this style guide in an attempt to both take the client’s wishes about the color pallet into account and bring some visual stability to the system. The client felt that a yellow and purple color scheme was a signature look for the company and requested to keep it to some level.

Style Guide

The existing color scheme is messy and there is no consistency with the font type and size. While the website does not contain a lot of information, the information is not presented aesthetically. Each extra unit diminishes the value of other units on the page. Thus, the need for a redesigned style guide was pressing. We selected this style guide in an attempt to both take the client’s wishes about the color pallet into account and bring some visual stability to the system. The client felt that a yellow and purple color scheme was a signature look for the company and requested to keep it to some level.

V1 Design

Screens of the initial desktop website design, including the new functionalities and style guide.

V1 Testing

___________

To gauge our new design's success, we created a think-aloud A/B usability test to evaluate user's interactions between the existing design and our redesign. The testing instruments used were a test script, informed consent form, pre-experiment questionnaire, 6 usability tasks, post-experiment questionnaire and post-experiment open ended questions. My role was to build the testing instruments, conduct 4 out of 7 usability tests and gather issues into qualitative data.

Usability Test

Informed Consent Form

Pre-experiment Questionnaire

Usability Tasks

1. You want to find the cheapest bounce house. Sort the bouncers according to ‘price low to high.’ Which bouncers are listed first?
2. The HOA of your neighborhood is putting on a movie night. You want to rent a movie screen. What do you get free with a movie screen rental?
3. Your son’s birthday is coming up and you are wanting to rent a small square bounce house. Purchase ‘The Train’ bouncer. (Do not fill in personal information).
4. You are curious about renting a few bouncers but you plan on using them indoors. Please submit a question/comment about this (don’t fill out any of the boxes). 
5. Imagine you had the best bounce house rental experience and what to send a personal thank you letter to BounceHouseMan. Find the P.O box to send a letter.
6. Your daughter is at the age where she’s obsessed with princesses. You would like to throw her a princess themed party and decide to rent the ‘Princess’ bouncer for December 13. Rent the bouncer for December 13th.

Post Experiment Questions

Results

Prior to testing, we believed there was a vast difference between the original and the first iteration of our prototype. Yet, our usability results indicated only a slight positive difference. We noticed that our ratings were more positive in terms of website usability and navigation, but the ratings on aesthetics were only slightly higher.

Existing Solution Takeaways

100%
stumbled with purchase route

66%
struggled with contacting

100%
Negative comments on colors

V1 Takeaways

50%
stumbled with purchase router

0%
struggled with contacting

75%
Negative comments on colors

V2 Design

___________

Taking in consideration the results of the existing design and V1 usability testing, we began to design the next iteration. For this iteration, we changed the yellow background to white to reduce shock when users first land on the page. We also changed the image on the front page, designed specifically to be both minimalist and grab the user’s attention at first glance. Lastly, we selected complementary colors using Adobe’s color wheel so that users are not overwhelmed when they interact with the website.

V2 Testing

___________

For this test, we used the same test as we did on V1 to keep consistency. We had 3 users participate in our test and compared the results to the past tests.

Results

The ratings on our second iteration were much higher than that of V1. We noticed a substantial increase in user satisfaction with aesthetics. Yet, multiple users vocalized complaints with the home page buttons and the product calendar availibility.

V2 Takeaways

33%
stumbled with purchase route

66%
struggled with the calendar

0%
Negative comments on colors

V3 Prototype

___________

V3, the current prototype, is a data-driven inflatables rental website that consists of 23 screens. Applying our latest usability test results, our major design changes were to shrink the size of the home screen buttons to be more appealing, add more to the home page, alter horizontal navigation and to create a calendar function that a user could check availability for a whole month.

Reflection

___________

For future iterations...

- I would like to focus on more interaction design. Another way to portray 'fun' other than colors and images, would be adding animations and interactions. I believe this would be a great way to add value to the website.
- It would be beneficial for BHM to have a brand redesign.  A brand redesign would allow for many components and items to be more visually appealing and consistent across all screens.

My takeaways...

- You have to ITERATE! Once making V1, I felt confident that it would solve the users problems. Little did I know there wouldn't be much of a usability difference between V1 and the existing solution. Thankfully, we got right back to making another iteration based off of testing and saw the fruits of hard work with V2.
- The challenge of stakeholders. Due to the combination of the expectations of the prospective purchaser, our professor and the users, we found it very difficult to design to meet everyones needs. In the end we listened to all stakeholders, but the users came first.
- The need of sketches/wireframes. Since are initial focus was on creating design solutions to the existing website, we skipped wireframing. Later on when designing the redesign, we struggled to make decisions on where items should go due to the lack of wireframes.