2024 Client Project
CWI Homes Website Redesign
Tldr: Chaparral West Inc (CWI) is a local home builder known for quality houses with reasonable markups. Their website did not reflect that quality; it was outdated, poorly organized, and buggy.
I did user research to figure out the problems, restructured the information architecture, then created a design in Figma to test my solutions.
Once I had an iteration that passed testing and was approved by the client, I implemented the design in WordPress and fixed the bugs with some basic coding.
The timeline on this project was very fast so I wasn’t able to do as much as I would have liked, but I owned the project from start to finish.
Role
UX/UI Designer
Researcher, Developer, etc
Timeline
1 Month
Broken into weekly sprints
Team
Solo Project
Delivered as dev site
Result
17% Improvement
in task success rates
The Problem
People weren't using the website despite it having useful information.
CWI had a problem. The homes they were building were higher quality than a lot of the comparable houses on the market, but they weren’t getting as many clients as a lot of the other builders in town. This was slowing down their sales process and causing them to miss out on properties that would be great development prospects.
After some digging they traced it back to their website. They hadn’t updated it in quite a while and had started avoiding pushing people to it rather than spend the time and money to get it updated. This was costing them time fielding repetitive question calls and preventing them from being ranked on the first page of search engine results.
They found me through a connection and requested a proposal to identify and fix the issues. Their budget was limited so after running an evaluation and identifying the scope of work, I pitched them an MVP build that I would do on a fast timeline solo to control their costs. I have a background in WordPress and they were already using the theme I use, so that sped things up considerably.
The Solution
Update the design, reorganize the content, and fix WordPress bugs.
Once I had the go-ahead to start work, I launched into research. I had already run a heuristic eval when I quoted the project so I had an idea of the problems, but I needed to confirm my assumptions and make sure I hadn’t missed anything. I knew I could address the following list and make a huge improvement, but I wanted to catch and fix as much as I could for them.
Fix the Information Architecture
Update the design
Replace stock images with real photos of their projects
Fix the WordPress bugs
The Research
I started with a UX Evaluation, then used my results to build a survey I ran with real prospective home buyers. I also tested the original website in person and remotely.
Heuristic Evaluation & Survey
The website had several critical errors in usability and was just buggy in general.
When quoting the projects, I came across several very obvious problems. There were broken links in several places and the navigation had a weird bug that was replacing the dropdown menu with a “3” for some reason. There were homes listed for sale on seemingly random pages that had been sold over 2 years prior. The stucco textured background obscured text in several places, and important info was buried in a link page that was full of marketing blurbs from other local businesses. There were also two top-level pages named almost identically.
I figured I had a decent grasp of the worst issues, so I built a survey and launched it in the local area, targeting people who were either in the market for a home, had just bought one, or were planning to purchase in the next few years.
Personas & Journeys
I built personas and created journeys for each user type to ensure their needs were met.
Armed with my survey data, I moved on to personas and user journeys. I built a persona for each user type I had managed to catch in my surveys so I ended up with 5 total. Those personas informed the journeys that were then used to develop the actual user testing prompts.
User Testing
Users couldn't find helpful info and were getting confused because of inconsistent content organization.
The survey confirmed my assumptions but also pointed out a few problems I had missed. The search option had been disabled at some point and one of my testers happened to be a search type. Without it, she would half-heartedly hunt around for a couple of minutes then give up and tell me she was too stupid to find what I had asked. It was heartbreaking.
Every one of my participants also thought it was just plain ugly, and several actually told me they wouldn’t buy a house from a company that had a website this bad. When asked to elaborate, they told me they just assumed the builder was cutting corners or scamming people because the website was so low-effort.
Competitor analysis
Other local builders had much better websites that made CWI feel even more outdated.
My final step before starting the redesign was competitor analysis. I wanted to get a feel for the design of the other sites and see if they were including any info that was missing on CWI’s.
Most competitors had websites that were much more up-to-date. They all featured professional photography of their builds as well as updated floorplans with consistent layouts and supplementary information. Interestingly, none of the competitors had current home listings so I could easily justify removing them from CWI.
Due to the short timeline, I knew I wouldn’t be able to create new content from scratch but I kept an eye out so I could recommend future changes at handoff.
The Design & Implementation
I updated the logo, color pallet, and type treatment, then replaced stock images and corrected the layouts.
Logo
CWI’s logo was also pretty outdated, so to maintain consistency, I created new versions for the website that maintained their mark but incorporated a new type treatment.
Color Pallet
During user testing, every participant commented on the garish color pallet, so I toned it down and added some accent colors for variety.
Typography
When selecting fonts, I opted for a serif to tie to their classic family business vibe for the headings and a sans serif with a wide variety of styles for the body.
Photography
Other than the model walk-throughs, the photos on the site were almost entirely stock images that weren’t related to houses, none of which were optimized for mobile. I am local and have dabbled in photography, so I spent a day visiting each location CWI was building in and taking pictures for the site. I then used the pictures I took and the resized model pictures to build the new image library.
Layouts
Layout is always one of my favorite parts of a site design. I start with crazy8s sketches for each format, then move to Figma, pick a grid, and set up components and generic styles. From there, I piece things together and rearrange within auto layouts until I have a design that can expand for multiple page types and works for devices that will need access.
Rendering the Design
CWI was a tight timeline, so I didn’t fully render and prototype the design like I would a normal project. I set up important pieces so they could be tested and I could iterate ideas, but the actual high-fidelity execution happened in WordPress since I am as comfortable building there as I am in Figma.
Going Bug Hunting
CWI had a pest problem that turned out to be caused by the webmaster’s super admin portal not playing well with the theme. I spent a day just tracking down and fixing errors in the code so my design wouldn’t suffer from the same problems happening on the old version of the site.
The Information Architecture
I used card sorting to address the information organization and navigation.
The site had some information organization problems that were caused by several years of quick updates and add-ons. There were two top-level pages named almost identically (Communities and Community Links), and there were listings on neighborhood pages as well as the available homes page (ironically, all of them were marked sold). The Community Links page was also just a giant list of local external links with descriptions but no images or headers. It was intended to spotlight the area but wasn’t organized in a usable way.
I decided to do a card sorting session to figure out what users’ expectations were, but before I ran the testing, I addressed the top-level naming problem by changing both to be clearer. Communities became Neighborhoods and Community Links because About the Area. Card sorting was very helpful, users left things where they were for the most part other than consolidating property listings to an available homes page and splitting build-related info onto it’s own page.
The Outcome
CWI is happily directing traffic to their new site, users are bouncing less often, and task success rates have increased.
While I would do some things differently now, I am happy with the product I handed off. Usability improved and the business was able to start directing traffic to their website again. They spend less time answering simple questions and have seen an improvement in their bounce rate which was the goal we set out with. The site is currently live at cwihomes.com. It’s not quite as I designed it, but it’s pretty close.
If I had it to do over, I’d manage the client’s webmaster differently. The finished project I handed off was altered quite a bit before going live and several of the changes she made were detrimental to the design and/or the user experience. I don’t think that was done on purpose, she was the designer responsible for the original site and simply believed her choices were better. If I could go back, I’d present my choices differently to make them more palatable for her.
%
Increase in Task Success Rate
Based on user testing post-implementation
Fewer Calls Per Day on Average
Saving time fielding repeat questions
%
Bounce Rate Reduction
Compared to the original design
Suggested Reading
Other ux/ui design adventures
Edify Safety App
An AI-based app from the beginning of my career. This one involves production work, form design using conditional logic, and a lot of lessons about how not to run a project.
