UX DESIGN CASE STUDY

Timberland Contractors:

Website Redesign

Timberland Contractors is a home builder located in the Florida panhandle. They wanted an update to their website to be modern, less information dense, and more editable by their staff. I designed and developed the new website using a user centric methodology and with the future in mind.

Defining the Problem

Although Timberland preferred to conduct business in person, they knew the value of a well designed website. They wanted their site to be simple and act more as a repository or resource that they can show their customers they have met with, instead of attracting new customers. Before the redesign, they had three different websites: the current website, a "classic" version (the site before the current), and a Wordpress page with regularly updated home listings.

Having three sites can be confusing for a customer, and the existence of the Wordpress site was because it was easier to update for the staff. The main site was created through an older version of Adobe Dreamweaver, which exported code that was not very human readable. This made it difficult to make changes without using the graphical user interface of the software.

The main site was created prior to the proliferation of responsive design and was difficult to use on mobile without constant zooming and some mouseover menus just could not be activated at all on a touch device. Pages were inconsistent, with navigation placed in different areas and not being clear where the links led.

I wanted to make the new site to be only one site, be editable and easily updated by the staff. I wanted it to have a clear visual hierarchy and information architecture, simple and intuitive design, and be responsive and work well on any device. Lastly, I wanted users to be able to find a way to contact them for more information if they have not met with anyone from the staff.

Users & Audience

The users would be existing Timberland customers and anyone that finds the site who may be interested in building a home. From initial interviews, I was told that they are happy with the way they are getting business now, at a rate faster than they can build homes. They wanted their site to show that they are local and personable, that they should be picked over the bigger real estate conglomerations.

Another group of users would be Timberland employees who update the site with home listings, photos, and blog posts.

Team & Role

The staff at Timberland Contractors were unfamiliar with the user centered design process. I explained to them the benefits of the process and how it would help resolve user confusions and be more aligned with their business goals. I also explained how following standard coding practices and how responsive design helps future proof the site and allow customers to have a good experience on any device.

Aside from being a user experience evangelist, I managed all aspects of the project myself: user experience design, graphic design, and web development/coding.

Constraints

I had some difficulty with explaining everything like user requirements gathering, prototyping, and usability testing, either UX or design decisions over phone or email. The project was done completely remotely. A better solution in the future would be to prepare presentations for teleconferencing. However, sometimes I needed quick approvals and questions answered quickly, but would have benefited if I could meet in person. Time was short as I knew I had to handle many different aspects of getting this website live.

Design Process

Gathering User Needs

I decided to start by conducting and presenting a heuristic evaluation to the client as a way of introducing what the UX process entails. I had a page by page write-up with labeled screenshots and slides explaining what it was. Along with that, I created a basic user flow showing how the site creates dead ends and loops that could cause confusion both before and after clicking links. The site's dated visual design and unclear, inconsistent labeling were areas where I predicted that problems would be found through user testing.

Soon afterwards, I interviewed the sales manager and a sales associate to get an idea of who the users are based on their interactions and who visits the model homes. This led to the creation of proto-personas, and a list of usability and business goals. They wanted the site to be simpler, and focus on providing information that would be too difficult to show in person, rather than attract new customers.

I went online to take a look at their competitors' websites to create short case studies that evaluated the designs. I noticed that there could be so many features that could be implemented, from search filtering systems to mortgage calculators. Timberland wanted simple, and my web developer skills were limited. This concerned me, so I made a quick survey that asked some demographic info and a list of commonly found features with a likert scale for rating importance. I knew that regardless of what features make it, I had to have a site that was responsive, have bigger font size, and better contrast. The navigation and site structure should be intuitive and consistent no matter the page or device being used.

First, I ran a quick usability test with a few participants to get qualitative data from a perspective different than my own, and to obtain some quantitative data (using the System Usability Scale (SUS), a quick, subjective usability rating). The average rating was 55/100.

Finding Prototyping and Development Tools

Afterwards, I pondered about what tools I needed to use for prototyping, design, and development. I had previous experience using Axure for prototyping, but I wanted to use something different. With this being a website with basic user interactions, I wanted to use this chance to learn a new tool. I decided on Adobe Experience Design (XD) beta. I had familiarity with Adobe's other software like Photoshop and Illustrator, so I was curious to see what this new tool could bring to the table.

XD ended up being nice to look at, but felt simplistic and lacking in features (it is a beta, though). Similarities with other Adobe software made it easy to jump into. Tasks such as linking between pages, were repetitive and laborious which slowed down the process. I made sure to use the survey results, interview data, competitor case studies, and my heuristic evaluation while designing the prototype. I ran into a new issue at this point, I was not sure what labels and groupings to use for the navigation. The current site was confusing, with some pages having different labels that lead to the same place. I did not want this problem to be repeated, so I conducted an open card sort to examine how other people would organize them. Most of the results had similar categorization to my own, which I then revised and used. With that complete, the low fidelity prototypes / wireframes were completed.

For web development, I considered using a content management system (CMS) like Wordpress.org themes. However, I remembered that the client had difficulties with trying to edit the HTML files of the current design, adding more complexity like managing plug-in compatibility, having a database, and PHP files would just make things worse. This is why they created their 3rd site, the Wordpress.com page! (Wordpress.com is an online graphical user interface (GUI) website builder while Wordpress.org is a CMS, an application or set of programs for developing sites.) After some research, I chose Squarespace over competitors such as Wix, or Wordpress.com. Each one had pros and cons, but they were more user friendly for non-designers and non-developers to edit. It would also be a time saver for me to focus on the UX rather than the coding.

Beginning Website Development

Unfortunately the development was not as smooth as I hoped. I imagined a GUI website builder to be easy to use, and in ways it was. However, usually simplifying something like building a website leads to less control and customization. Each premade theme had code injection and custom CSS for visual styling, but the syntax would be different. Since they are pre-made, if I wanted changes, mainly for usability reasons, I typically had to modify their code base instead of building my own. This led to a lot of time loss, looking up very specific solutions for specific themes. The code was also not as clean as I wanted, because of that. I did not regret my decision to use a website builder, as I knew my client would still need to make content updates and minor edits on their own. Having a single company for tech support, compatibility, and security was worth the coding troubles.

Being the sole person working on the site, I worked on the visual design aspects such as color and typography as I created the site on Squarespace. With website creation centered on using a GUI, this made it straightforward to translate what I envisioned from the wireframes to something ready for usability testing. My usability test gave the participant tasks that a prospective visitor might need completed. They were also asked to think aloud while completing these tasks, and asked about specific features and aspects of the website. The SUS was issued at the end to compare to the pre-test scores.

Usability Testing Results

The average SUS score changed from 55/100 to 84.5/100. Participants had less trouble navigating and using the website. The feedback was comprised mostly of minor usability issues and feature requests. It was nice to see some feedback that fell in line with what I discovered during my initial heuristic evaluation. Participants exclaimed how much more modern and clean the site looked. I implemented some of the feedback, like having a more prominent phone number location.

Using the user centered design process, I took Timberland’s multiple websites and consolidated them into a single usable and simple website. All the requested functionality remained and the information was reorganized in a logical and consistent manner. The site works and is usable across the majority of internet accessible devices. There are always more aspects that can be improved, but now that an iterative design groundwork has been created, it should be straightforward to continue improvements as time and budget allows. I wrote guides to allow the staff to maintain certain aspects of the websites themselves such as the hotsheets, blog, and photos. The WYSIWYG (What You See Is What You Get) editor should allow them to implement minor changes without having to dig through lines of code.

Lessons Learned

I felt lucky that I was able to use more UX methods to complete this website. Not only did they help with the design, it was also an excellent opportunity to practice and use several methods together. This helps me learn which user data gathering methods are appropriate when given certain timelines. It also helps identify the methods that are most effective at getting certain data.

As this project’s UXer, designer, and developer, I developed an understanding for the value of a good and communicating team. There were times when I did not have the time or technical expertise to perform all the roles. Luckily, since I was alone, I was on the same page and could work on another area to make up for any problems that come up. Working on this site helped me understand different workflows from different team members all working toward the same goal.