Responsive website, UI/UX
Define the problems
To help us understand what they were looking for, the client started by preparing a comprehensive Business Requirements Document, outlining their thoughts on what the problems with their old site were and what the scope of the redesign should be. Many of the suggestions were far too specific and even started suggesting actual solutions. I went through the BRD line-by-line to get to the core of their issues with the current site. This, along with an independent analysis of the old site, helped define the problems I was solving and set expectations accordingly.
Problems to solve:
- It takes a long time to find a location near me that has what I need
- It’s difficult to compare unit features & prices within facilities
- It’s difficult to decide what size unit to rent
- Storage West doesn’t look like a modern, trustworthy, safe place to store my valuables
Research & inspiration
First, I examined the websites of Storage West’s competitors to find design patterns and language that self-storage customers may already be familiar with. I began to notice that almost all of them used a location-based search as the first interaction, followed by a filterable list of results. I also looked at other, more well-known reservation-based sites to analyze user flows and think of ways to streamline the experience.
User flow for online unit reservation
In the BRD, the client had already proposed a user flow for the new website, which was heavily based on their old site. Their primary user flow forced users through a number of higher-level pages (Locations > State > City) in order to reach a facility page where they would choose a unit and make a reservation. I saw significant room for improvement here. I proposed using location-based search (a common design pattern for reservation-based sites) and filters to allow users to narrow down what they’re looking for. The initial search results would be more general and all-encompassing, and become more targeted after filtering. This flow caters to 2 main user groups:
- New Renters: These users have not rented a storage unit before. They don’t know what size storage unit to rent and need to be convinced that renting with Storage West is the right choice.
- Experienced Renters: These users have rented before (with Storage West or elsewhere). They know exactly what they’re looking for and just want to be sure the unit is in a good location.
I started out the next phase of the project by listing out taxonomies within the search flow and defining content types within each. Doing this helped me determine what data I could use in my design and at what point in the flow it should be revealed to the user. I created this Evernote with a comprehensive list of content types for facilities and units.
By this point, I had gathered enough information to get visual. I created this set of high-fidelity wireframes to represent all key pages in the site. Due to contractual limitations, not all of the pages in the site were able to be wireframed. 3 different approaches to the homepage and facility page were presented initially, in order to narrow down the client’s preferences (unfortunately, in this case, the client’s approval was the main deciding factor, as opposed to what worked for users).
Having established much of the layout and content, it was time to proceed with the visual design. Storage West had recently been rebranded, so the new brand had to make its way onto the website. Some of the colors in the new palette were a bit difficult to work with, but the end result was a clean, friendly aesthetic that was certainly an improvement over their original site. 3 aesthetic variations of the selected homepage direction were presented, which evolved into the final homepage below.
Search & filter UI
The new user flow for search allows experienced renters to find and reserve the unit they need faster, while allowing new renters to explore at their own pace. A key decision that allows this to happen is the decision to break out unit types into broader categories: Small, Medium, Large and RV/Car/Boat Parking. Since it’s easier for a new renter to say, “I think I need a small unit” than “I need a 5’ x 10’ unit,” the initial search results display those broader categories, with the option to view all units in a category. One benefit of doing this is that it allows us to show the lowest possible prices in each category, giving the user a positive first impression from a pricing perspective.
For experienced renters who know exactly what they’re looking for, using the top filters will replace those broader results with specific units within the user’s filter parameters. For example: If a user uses the filters to say, “I want a 5’ x 10’ with drive-up access,” the results populate with the available units that match closest to the user’s filter parameters. If the user finds the unit they’re looking for, they can simply click the Reserve button to make the reservation. Done and done.
The new search UI borrows the split-map-view from sites like SpareFoot, Airbnb and RadPad to visually connect the facility data with its physical location. It reveals only the information deemed most helpful for choosing a facility or a unit. A large, blue button for quick access to the Size Guide is present among the filters to help those users who can’t decide which size they need.
The facility page is one of the most important pages on the site. In the wireframes, I explored 3 different ways of laying out this page and the client preferred one with less emphasis on photos of the facility and more conversion-oriented content higher on the page. The page also required quite a lot of content. Not only did the page need to give all of the necessary details about the facility and its available units, it also had to contain more general marketing for Storage West, cross-sells, customer reviews, integrations with blog and social feeds for the facility and contain suggestions for other facilities nearby.
The unit selection experience from the search results UI is carried through here, with units separated into tabs for their broader categories (Small, Medium, Large, RV/Car/Boat Parking). An important consideration here was planning for when units are not available, but may become available in the near future, and when units are sold out at any given facility, but are available at a nearby facility. Instead of simply saying a unit is “sold out” (or not listing it at all), the design presents the user with other options: call for availability or check the nearby location. This is more helpful for the user and could result in increased rentals for Storage West.
Reserve a Unit
The unit reservation page is the final barrier between the user and a successful rental. Therefore, the page needed to be as simple and clear as possible. In order to focus the user on the goal of reserving a unit, I decided to strip away almost all of the main navigation and footer items. One problem that was discovered in the rental process was that customers didn’t know exactly how much money they owed on move-in day. The new reservation page contains a clear review of the user’s reservation details in the right-hand sidebar so that users know exactly what they’re ordering and what they owe. In an effort to further establish trust with the user and simplify the rental experience, I also included a simple step-by-step below the reservation form, letting the user know what to expect once their reservation is made.
One of the most common questions from self-storage customers is, “What size unit do I need?” I created a simple step-by-step size guide that seeks to answer that question. The guide is designed for two types of users:
- Users who just want a quick ballpark estimate for what size unit they need
- Users who want to know exactly what size unit they need
For a quick ballpark estimate, all the user needs to do is answer a few very simple questions and the guide suggests a unit size based primarily on the size of their residence. For users who want more personalized guidance, I designed a calculator that allows users to enter the number and type of items they’re storing. Common household items are included (furniture, appliances, etc), as well as different box sizes. Behind the scenes, each type of item is given a set of dimensions. The dimensions of each added item are added up and checked against the total volume of each of the storage unit sizes (i.e., 5’ x 10’, 10’ x 10’, etc) to determine the final recommendation. The final screen recommends a unit size based on the user’s input and prompts them to search a city/zip for that size, effectively reinserting the user back into the “search-and-filter” conversion funnel; but this time, with more specific search terms.
Key marketing pages
I designed several marketing-focused pages, all aimed at establishing trust with new customers and helping them make a decision. There were 5 key benefits that the marketing focused on:
- A better community
- Customer service
- A simple experience
- Great for businesses
Responsive down to mobile
The solutions for responsive states were fairly straightforward. A few key adjustments were made for mobile that improved usability. First, I implemented a multi-level navigation menu to replace the dropdown menus. Opening the menu first displays all top-level sections. Selecting a top-level section causes its child pages to slide in, along with a “Back” button to navigate back to the top-level sections. Second, on small screens, the search results filters are hidden in a modal to avoid using so much screen real estate on filter menus. Third, the Size Guide calculator introduces + and – buttons to avoid mobile users having to navigate through form fields again and again, just to enter their numbers.
A simple InVision prototype of the mobile experience can be found below. Please note that this is not a fully-functioning prototype and is meant only for rough demonstration of navigation and select behaviors.