Intro
In this case study I’m going to explore the process I used to redesign a website without any experience in web design at all and how I increased website traffic by over 300%, simply by doing what naturally made sense. I’ve added some UX terms that were unknown to me at the time to tie into how the UX process is a natural course of events for problem solving. But the process I took remains unaltered.
My Role
Sole designer and website administrator.
Background
I landed a job for a property management company in 2016 to redesign their website. The company while being well established in the area for more than 30 years had managed to let their website take a back seat in favor of a more traditional approach to customer interactions.
When I started with the company, the website was in a basic HTML/PHP format that was used primarily for two things, browsing properties and finding the company contact information.
It was used regularly by just about anyone that interacted with the company on some level, but was due for an update, badly.
Step one: Understand where the company is coming from so that you can lead them in the right direction. (Empathize)
Research:
I began by exploring the website that was already in place, so I could better understand what the company needs were.
Research insights:
- Optimized for Tenants
- No access or information for Owners
- All website form submissions are funneled to the company email
- Maintenance Request and Rental Application forms are rarely used
- Website does not use responsive design
- SWAT showed a strong need to increase SEO
Assumptions:
The bulk of the site was in the properties and where a significant percentage of my time would be spent during the rebuild, so I focused on ways to optimize that process. I found that most of the properties followed a similar template when labeling and describing each property, which lead me to believe there was a database somewhere to pull from.
Interviews
Having a decent understanding of what the site consisted of, I followed up by interviewing people that interacted with the site. I found that each person had their own concerns and ideas for what the site should be.
Here is a breakdown of their responses:
Business Owner: Needs to look good and meet fiduciary marketing standards for realtors.
Staff: Needs to be simple to edit and add properties. Should have a way to submit maintenance request and rental applications.
Developer: Has a database of listings that can be transferred. All access and maintenance needs to be transferred to the business.
Owners: I want to be able to get in touch with the company. I want to know that my interest are being met.
Customers: I want to be able to apply for a rental online. Needs to be accessible on a smartphone. Needs to be easy to find a property.
Step 2: Analyze what you have and how you can use it. (Define)
Analyze the Research Data
I started by looking into what information was in the database and which format it was in, so that I could make sure compatibility was not going to be an issue. I also looked into how much data needed to be transferred for storage needs.
I worked with hosting services to understand every possible route to pursue and the cost of each option.
With the company and customer needs understood, I looked into popular website building services and themes. Most of the themes on the market were for realtors that were in the business of selling homes. I understood certain changes were going to have to be made to any theme I found, to fit my company’s needs for property management. I evaluated the themes on their presentation, functionality, support, and layout options.
I found a WordPress theme that met the companies needs and began organizing the assets with a content inventory.
Personas
I used interview notes to compile a list of needs and wants for each type of user to make sure I was able to provide a positive experience. Each persona continued to build throughout the process as the website took form. The personas were a rudimentary version of the UX personas and were solely listed out in written form.
Project Brief
I used a project brief to present my ideas and solutions to the staff in a series of meetings. The project brief took a hi-level view of the site infrastructure and basic goals. I kept the projects brief simple to allow for potential changes during the rebuild.
The brief consisted of types of users and their needs, cost to maintain the site, and a list of deliverables.
Step 3: Find out what the site needs to work (Ideate)
User story mapping, User Flows & Sitemap
I created use cases for each persona and followed their perspective journeys to various end goals.
I concluded that the five basic users could be directed to their end goal using 5 tabs.
Homepage, Find a Rental, Tenants, Owners and About Us.
Each persona had some overlapping needs which meant that some tabs had to be universally useful. Homepage, Find a Rental and About Us were all information tabs that could be used by anyone visiting the site. Tenants and Owners, whether prospective or current, required similar supplemental information, so a tab was created for each.
Card Sorting
Using legal pads, I wrote up a list of pages that could be under each tab. Each page was mocked up with drafts of copywriting and layout priorities. Some additional information was listed on each page for reference purposes. I spoke with staff members one at a time and talked them through the concepts for each page. I then asked each of them where they best thought the page fit on the site with the list of tabs I had provided. The results were conclusive enough to provide a hierarchy for placement and position of each page.
Basic Wireframes & Prototype
Using a staging site from the hosting service, I began building a basic model. I started with the theme’s initial layout and modified it through the WordPress.org admin site.
Most of the original layout was designed for selling homes, so I had to make changes to about 90% of the sites copywriting.
I built the pages and tabs list first. Using six listings from the company files and some stock elements found in the theme, I built up page layouts to test.
Test
I used the staff, along with outside peers, to see what refinements should be made.
I got some great feedback during testing that lead me to redesign the layout to favor function over beauty.
Step 4: Make the user want to use it (Design and Prototype)
I used the same staging site from before to redesign the layout to fit the testing results. I used a backup feature from the hosting service to save past iterations, in case I wanted to go back to a previous design. I made changes on each page to match the test results to create a site that favored function over beauty. Not wanting to completely downgrade the site to something that matched its former self, I added slider elements to create movement and put the most useful elements above the fold.
Design
The new layout got rid of the hero slider on the homepage that took up everything above the fold, minus the header and replaced it with up to 4 featured listings, with a property search underneath it.
I used WordPress plugins to create features and layouts that the theme didn’t support.
One of the largest projects on the site was creating the forms for the maintenance request, contact form and rental application.
Each form had different elements that were specialized and required separate applications. All the form submissions were sent to the company email to help the staff respond quickly. Each form also featured a personalized success message and automated email responses. The rental application required specific features to meet the company’s fiduciary concerns.
Some of the challenges I encountered during the application form:
- Auto populating a form with 149 form fields.
- Optimizing the form to be less intimidating
- Transfer form data to an official rental application
- Tagging form fields in PHP to populate in a third-party app
- Guard sensitive information
- Digital signatures
- Process payments for application fees
- Email friendly encryption
Create a Style Guide
Before I started importing all the listings from the old site, I wanted to make sure I had a template format to build each listing in a uniform fashion. I took the previous model that had a title and basic description, then expanded in into a set structure.
Tile listing:
- Front of home picture
- Street name: Neighborhood
- City and State (for SEO)
- Monthly rental rate
- # Beds, # Baths
The expanded listing was not much better. The new style guide for the expanded listing followed a similar pattern to maintain predictability for the user.
Inside Listing:
- Street name: Neighborhood
- City and State (for SEO)
- Monthly rental rate
- # Beds, # Baths
- Front of home picture (Hero image)
- Thumbnails pictures for slider (organized like a walk-through tour)
- Price clarified with lease period.
- Description (one paragraph tops)
- Pet policy
- Lease terms
- Bulleted list of rental features
Prototype
I built up six listing in full to populate the site with real content using the new style guide and layout.
Test Again
I conducted one-on-one sessions with staff and peers to test the new look and feel of the site.
The results were positive and received only minor critiques. The owner gave final approval for the design and some valuable input on how to copywriting under the Fair Housing Act.
Step 6: Prepare for launch (Implement)
I developed a road map to launch the site during the shoulder season for the company.
The timeline gave me 6 weeks to transfer and format around 300 listings, finish editing information based pages, test for bugs, and finalize any last minute changes.
Populate with real content
Ready to transfer the database over and make the necessary edits, I contacted my hosting provider to get some assistance during the transfer. I was given some very unfortunate news. The old website ran on an outdated Linux system that was no longer compatible with the current servers used for hosting WordPress sites. This was unfortunate because in all my research on formatting I did not come across this information.
At a loss for finding a good workaround after talking to several hosting specialists. I decided to populate the listings manually.
I downloaded the website listings housed in the database the developer set up and transferred them into a CSV file. The CSV showed that there were more properties in the database then the company currently managed. I spent a day cross referencing the company files and worked with a rental assistant to weed out any properties that could be deleted. I was able to delete around 100 properties, which saved me about 4 days of unnecessary work.
I prioritized active and upcoming listings first, in case I came across any other roadblocks. The whole process of manual entries, while time consuming, didn’t really add more than a couple days work to my road map. I had planned to manually alter each property with the new style guide anyway. Loading each listing one at a time, manually populating each field and editing each description gave the whole process a systematic approach that ended up being beneficial.
Test for bugs
I found bugs regularly while building the site and regularly fixed them as they were noticed. I did a more formal test prior to launch. Once all the pages were created and the listings ready, I systematically tested every element on the site to ensure a good first impression with users.
Launch
A couple days before I planned to launch the site, I called my hosting service to check if I had missed any steps needed to create a smooth transition.
Confident that the entire site was ready for its first release, hosting services confirmed everything was in order. I planned to launch the site during the evening hours on a Friday.
Unfortunately, there was somehow a miscommunication during my pre-launch conversation with hosting services, because that was the moment hosting decided to put the wheels in motion.
At around 12:30 PM on a Wednesday the site went down for the transfer and was irreversible.
The process was estimated to take anywhere from 20 minutes to 3 hours. After 3 hours the site was still down, so I checked back in with hosting services. I was assured everything was fine and to check back in an hour. I checked back every hour till 6 PM, the site remained down. For the next two days the site remained down and was somehow locked up in process in a Linux server trying to make its way over to a WordPress server.
Unable to do much from my end to affect the process, I used the company’s social media sites to redirect traffic to their Zillow listings until the site was back up.
On Monday of the following week I managed to talk to a hosting tech that was able to locate the problem. Within 20 minutes of talking to the brilliant tech, the site was up.
Project Impact & Outcomes
Measuring Success
Success was measured using social media responses, SEO analytics and customer feedback. Overall the site received primarily positive responses after launch. Using Google Analytics, I was able to see a steady rise in website traffic over 6 months. Initial traffic from the old site showed average daily use was around 30 people per day during peak season.
After launch the average daily use climbed to 120 users during peak season, which converts to a 300% increase in website traffic.
Additional Releases
The site remained in a constant state of improvement over the next year. Minor changes were made regularly in response to customer feedback. Larger changes were made on a staging site and changed during low traffic hours.
Notable Changes
The company logo was eventually changes and incorporated into the site.
The Rental Application received several iterations in response to customer feedback and changes in the official form.
Two additional pages were released to help tenants with their move. A map showing local neighborhoods and a list of useful information for Park City residents.
Cost
The total upfront cost (excluding wages) to launch the site was under $200.
The main cost was the WordPress theme, hosting fees and form plugins. All other tools used were free or free trials. Keeping the cost low was one of the requirements of my position.
Transition of Ownership
Before I left the company, I wrote up a series of manuals to aid the company in their upkeep of the site and trained key personnel in best practices.
Conclusion
The result of the project was a clear success. There were roadblocks and hurdles during each step. Ultimately the project was packed full of valuable lessons.
Lessons Learned 🎓
- Launching is as exciting, as it is nerve-racking
- You can never prepare for every outcome, but you might as well try.
- The best tools can be learned on the fly.
- The worst tools are sometimes a necessity, so you better be able to learn on the fly.
- Good techs are worth their weight in gold.
- You don’t need a lot of money to create a website, but it sure does help.
- Regression is inevitable when making changes, so you better know how to fix whatever you break.
Design Toolkit
Wordpress.org, Envato, GitHub, FileZilla, Atom, Notepad ++, w3school, Google Search, Google Analytics, GTMetrix.com, Adobe (Photoshop, Illustrator and DC), Fotor, PDFescape, Pixabay, Excel, and tech support forums.
