Voting starts in March for the Drupal Association Board election.
Our client, Access Self Storage, owns and/or manages 17 storage facilities in New Jersey and New York, with over 12,000 storage units available for rent throughout their locations. They approached Mary Pomerantz Advertising with the need to streamline the process of finding and reserving a storage unit in any of their locations.
Their previous site used an iFrame to take reservations through the web version of SiteLink (their self-storage management software). This integration was clunky and didn’t transition well to mobile devices. It also offered no SEO advantage since their storage units were not being indexed and associated with their primary domain. We knew that the Feeds module would help us get the client’s data from SiteLink’s API into Drupal. Once the 12,000 units were in Drupal, we had the flexibility of organizing and displaying them for easy navigation and discovery. Lastly, we could use Drupal’s Services and Rules modules to make reservations and push updated data back to SiteLink.
Easy as 1, 2, 3
We broke down the reservation process into a simple three-step process: find your location, find your storage unit, and reserve that unit as easily and quickly as possible.
We paired this easy-to-follow workflow with a responsive design that met all pre-established business needs to the client’s satisfaction and amazement.
The client required a system that would be versatile enough to seamlessly integrate with SiteLink (their self-storage management and reservation system); provide exceptional security, performance, flexibility; and incorporate common website features, such as blogs, specials, and contact and referral forms. Mary Pomerantz Advertising (MPA) also chose Drupal because it incorporated important factors which the client’s old site lacked, such as accessibility, search engine optimization and content management. MPA chose Drupal because Drupal does it all!
Access Self Storage wanted a mobile-friendly website. We convinced them that responsive web design was the best approach to take in this pursuit. Responsive web design would not only allow their site to flawlessly operate on smart phones, but would also provide a full-featured site for tablets, smart TVs and all conceivable screen-sizes.
Step 1 - Find your Location:
It was important to facilitate the process of finding a storage unit that suited customers’ needs. The first step in this process was to help find a location that was convenient for them. To enable customers to quickly find a location, we used the GMap and Location modules, which has been the most effective method in our considerable experience. Using a Views exposed filter to take the user’s zip code, the site now returns a list of locations sorted by proximity. Knowing a large percentage of users would be viewing the site on their phones; we took this to the next level and implemented the HTML5 “geolocation” feature to get users’ latitude and longitude. We then used an external API to take that data and return the user’s zip code to the view. Users now need to touch only one button to get a list of the closest locations.
Step 2 - Find Your Unit:
We realized it would be difficult for customers to sort through 12,000 storage units. Competitor research revealed that this step was complex, frustrating and confusing. We knew we needed to narrow down the selection and group the units by easily classifiable categories. Using the Feeds module, we imported a list of all the units from every location into our system as nodes. Some locations have thousands of units, so we needed a way to categorize them programmatically. By using the Computed Field module, we took the length and width fields and computed the square footage. We were then able to group those values into categories which were represented by taxonomy terms; small, medium, large, etc. We also used a node reference field to establish a relationship between those units and the facilities at which they’re located.
Now we had data that the Views module could organize. Using the “group-by” feature of the Views module, we created sets of small, medium and large. We then used the “aggregation” feature, to show the user only one row for each type of storage unit. For example, all of the climate-controlled 5x5 units are now represented by one row even though there may be hundreds available in the system.
We then needed a way to determine, within a given type of storage unit, which units were available for rent and which were being used. Available units needed to be linked to the reservation form and unavailable units needed to be linked to the contact form. In essence, we needed to represent two datasets – “all units” and “available units” – at the same time. The problem emerged because a view can usually only represent one data set at a time. We used the Views View Field module to display results of a view as data within a row of another view through the use of arguments. By passing in the group type data as an argument to the second view, we could display only those units that were a particular type and were also available. We reduced the number of results to one and rewrote that result to be a link to the reservation form. Using the “empty text” feature of the second view, we inserted a link to the contact form for those cases where there was no unit available.
Step 3 - Reserve Your Unit:
We passed in all the unit and location data to a reservation form using hidden fields. The user can now enter their contact information and hit the “make reservation” button to secure their unit. Using the Services and Rules modules, we are now able to connect the results of the site’s Webform to the client’s system through the use of SiteLink’s API. The customer’s name and unit information is added to Access Self Storage’s reservation system and the Rules module will even confirm the reservation.
Responsive Web Design:
Our UI/UX team set out to create a simple and convenient reservation process that worked seamlessly across all screen-sizes. We chose to build the responsive design website using the AdaptiveTheme. We wanted the visitors to find the appropriate storage unit as quickly as possible. To achieve this, we broke down the reservation process into a simple three-step process; Easy as 1, 2, 3: Find your location, find your storage unit and reserve that unit as easily and quickly as possible. Whether you are on a smart phone or a desktop browser, the Easy as 1, 2, 3 box is always prominent and easily accessible.
After examining past analytics, we realized that most visitors to the site landed directly on the location pages, completely bypassing the homepage. This was important in the design of the location pages. We wanted to give the customer everything they needed to reserve a unit without needing to leave the location page, but did not want the page to appear too cluttered. We achieved this with UI enhancements using jQuery tabbed secondary navigation and accordions. Because we were creating a responsive web design, we made sure to display the storage units as list items and not table items. This makes it much easier to re-size and re-flow the columns of data for smaller screens. Other special attention for smaller-screen touch devices was given to button sizes, form fields size and labels, and HTML phone links.
To limit server strain and improve site performance to accommodate the large amount of feeds and their data, we used Elysia Cron to schedule Cron-runs.
“Contact” and “Refer a Friend” forms that pull a location manager’s email from the Location nodes.
To make managing unit specials for 12,000 units easier for the client, we built a Views Bulk Operations page to assign specials to units via node reference.
Mary Pomerantz Advertising
This project employed a Creative Director/Drupal Strategist, User Experience Specialist, a Project Manager and two Developers; one focused on theming and interface development and the other focused on backend work.