| Client | Tree Farm RFV, LLC |
| Problem | Existing website was out of date, and didn't meet new marketing strategies |
| Solution | I redesigned and rebuilt the multi-page site from scratch, modernizing the UI and making it easier to find information. I also improved SEO. |
| Outcome |
🞄 Front page on Google, top result for some queries
🞄 100+ new organic visitors per month |
Tree Farm RFV commissioned me to redesign their website and improve their SEO. I conducted research on their market strategies, customer base, and competition. Then I built several low and high fidelity mockups for the client to choose a design that fit with their brand. I built the website, tested it, and deployed it on a third-party hosting server. To this day, I am contracted to maintain the website.
The web presence of the company dramatically improved, as the website now appears on the front page of Google and has 100+ new organic visitors per month. The numbers may not sound dramatic, but given a remote location and small customer base this is a significant increase in traffic.
Tree Farm RFV, LLC is a real estate development project on the western slope of Colorado. Located halfway between Glenwood Springs and Aspen Colorado, the development is currently under construction and aims to build a variety of residential and commercial properties.
The property's owner, Ace Lane, has been partnering with my father for many years. He has been operating the land for many decades as both a tree farm/nursery and a membership-based water ski lake. Years ago they started working with the local cities and county to approve a massive development project that would bring shopping, dining, entertainment, and affordable living opportunities to the mid-valley.
During the early phases of this approval process they hired a local web development firm to build a simple website, acting as a "digital brochure". As the real estate project gained approval and progressed into later phases, the content of this website quickly became out of date.
I was asked by my father to take over the website and redesign/build it from the ground up. My role in this project was simply to be a one-man-band and design, develop, test, deploy, and maintain the website so that Tree Farm RFV wouldn't have to continue negotiating new contracts with the local web firm.
When confronted with the project, my first step was to empathize with the client and the users. The client and I jumped on a video call so I could gauge their opinion about their existing product. They started pointing out all the areas of the website that were out of date, and hinted several times that the website didn't look "modern" but couldn't explain why. The sitemap of the website seemed to already fit with their vision, but something about the font, colors, and menu seemed off.
As they explained the premise of the real estate development they were doing and all the various phases it involved, the results started to take shape and I was able to reliably visualize their perspective. I could see that the website didn't meet the client's expectations for the current marketing phase they were about to enter into. Users testified to having a hard time finding the site if they didn't already know very specific details about the project. Information was buried and not readily available to users. Photos on the site portrayed old architectural renderings which would cause confusion and false advertising to the users. Tree Farm RFV had also rebranded recently so the logos, contractors and project size were all generating misinformation.
The client was about to embark on a heavy marketing campaign and their old website needed to reflect the current state of the project to provide updates and draw in new customers.
I generated 3 primary personas for the user base.
Paul is a restaurateur looking to open up a new location in the booming and prestigious Aspen area. He owns a small chain of fast casual restaurants in up-and-coming areas throughout the state, but real estate is hard to come by in the mountain towns and competition is fierce.
Paul needs a place where the high risk of expanding a restaurant chain is mitigated by a hungry and consistent customer base. He's had his eye targeted on the mid-valley between Glenwood and Aspen for some time, as the whole population trends to converge on hot spots like Willits. In order to make this dream a reality, he would likely need to relocate his family at least short-term to get the new store up and running.
Elizabeth just got hired as a teacher in one of the local school districts. She and her husband have dreamed of moving back to the mountains as it's where she grew up and there's a strong calling to come home after many years living in the big city starting her career.
Affordable living is extremely hard to find in one of the wealthiest areas of the country, and living on a teacher's salary will be hard enough even if she finds a reasonably priced place to live. She doesn't want to sacrifice her quality of life to make this move, and living in a run-down fixer upper is out of the question.
Juan's father moved to the valley many years ago and made a name for himself by starting a plumbing company. Juan is set to take over the family business in the next few years. Though he lives down valley, he often makes his way up to the Aspen area for work and recreation, as many locals do. Willits has become his primary spot for shopping and dining, as it boasts the only Whole Foods in the area and some of the best restaurants for miles around.
He's heard of the Tree Farm project going in across the street as he drives past it almost every day, but doesn't know much about it or what it could offer him. He's not looking to buy a condo, and the development has been stuck in litigation limbo for years so he wouldn't be able to sell them his plumbing services anytime soon. Why should he care about the Tree Farm?
The requirements of the website redesign focus heavily on the problems observed in the Empathy phase. I drew up some drafts to review with the client and we settled on the following objectives.
As a restaurateur, I am seeing conflicting information about the Tree Farm development between the newspaper, town halls, and their website. I want to know what's going on so that I can determine if this development will provide a good spot to open my business or if I should look elsewhere.
As a teacher and potential buyer, I am looking for an affordable place to live but am struggling to find something. I've heard about the Tree Farm offering affordable housing but it isn't even built yet. Will these apartments be completed by the time I need to move?
As a local, I can't find anything about the amenities that the Tree Farm offers. I want to know how/if I can get involved in the construction process and what that space will look like after it's done.
At this point I sketched up some low fidelity mockups, planned out a sitemap and was salvaging as much of the content as the existing website as possible. There were some major decisions to make during this stage.
Side note: While pen and paper is usually faster, I was working 100% remote with this client. I used Balsamiq mockups to generate the low fidelity mockups to ease the communication process with the team.
The sitemap was simple and the anticipated textual content was minimal so this website seemed primed for a single-page direction. However, by the end of this phase the tables had flipped. The client hired on a copywriter/copyeditor as well as a photographer. Plans were revised to have short summary paragraphs on the home screen but we needed dedicated pages to hold all the details for each section. Also, the client had aspirations to expand the website's usage to include customer portals once businesses and residents were established in the new buildings.
Result: Multi-Page
This was a fairly easy decision that was universally agreed on. The website needed to reflect the many colors of the new Tree Farm logo.
Result: Orange, Blue, Green
As opposed to some of my projects, cost and time-to-market were both non-issues. We had over 6 months to get the website launched, and a strong budget that would easily allow for my freelancing fees of creating a custom website. Templates are too strict and can be unreliable. I didn't want to lock the client into a corner by restricting our design flexibility and SEO options if there was a choice.
Result: Custom Website
The client was anxious to see some high-fidelity stuff. I've found that it's hard for clients to envision digital products when they're just some chicken scratch drawings with X's and scribbles. I fired up Figma and went to work.
When presenting designs to clients, I always offer users several options to choose from so that they can have a say in the artistic direction of their product. I do this by mocking up 4-5 high-fidelity screenshots (usually something like a landing page) before I continue prototyping the whole website.
I've found that landing pages propel the UI of the whole website. They set the tone for the theme, colors, fonts, element placement, and flow of the entire project.
After narrowing it down, I fully fleshed out the home pages. The final design ended up being a variation of Design7 shown above. I conducted some A/B testing with the client to determine favorite styles and features. The text on the menu was hard to read since the thin font blended in with the super-colorful background photo. Even with a dark gray mask it wasn't perfect. The colored logo also blended into the slideshow photographs a bit too much. In the end we opted to alternate between black/white images and colored ones. The logo was unsaturated to a pure white and rested on a green background so that it could be seen easier and stand out more from the images behind it.
Once the dust settled on the homepage, I mocked up the responsive versions of the site and proceeded to the build phase.
While I was coding, I had the team help me with SEO research. We went through several rounds of keywords. Several of the client's team members chipped in with their own ideas and brainstorming sessions with their friends, family, and other potential users.
Building this website was fairly straightforward. As the elements were mostly blocks, the challenges were minimal. I used a the conventional tried-and-true trio HTML/CSS/Javascript to develop the website. A couple plugins came in handy, especially the one for the carousel slideshow. Normally I try to avoid these as stability and longevity are concerns. But after reviewing the javascript I was pretty confident this slideshow plugin would be solid for years to come.
Developing the website was an iterative process, and I showed off product whenever I could to the client to gather feedback and adjust on the fly. Photos, text, colors, and entire code blocks were swapped at various points during the development. As usual I tested as I built. There were a couple responsive breakpoints that gave me some trouble, mostly with regards to image sizing cutting off text and other small things. None of it was too overwhelming and the fixes were minor. It's one of the smoothest websites I've worked on and that's one of the reasons I'm proud to put feature it as a portfolio piece.
I employ several methodologies when testing any type of software.
Unit testing happens almost subconsciously. It's so habitual that it's hard to quantify or clarify the process. After I'm finished writing a chunk of code, I test it on multiple browsers and screen sizes. I look for readability, style issues, functionality issues, etc. If the code passes the test I move on and write some more code. If not, I go back and tinker with the problem areas until they're resolved. Occasionally if I'm really stuck, I'll move on to something else to clear my head and come back to the problem code later with a fresh set of eyes.
Integration testing is all about making sure that the chunk of code I just wrote fits and works well with the bigger picture. As an example, copying and pasting a working piece of code on one page may seem like a good idea to keep consistency in the project, but filepaths and styling may break the design or functionality. Every time I complete a meaningful feature it's worthwhile to check how nicely it plays with the surrounding elements and the page(s) as a whole.
Performance is rarely an issue with simple websites like this project. Regardless, large file sizes, un-minified code, and repeated code can cause software bloat and slow down loading times which is bad for users perceptions of the site and SEO. Not many people will stick around longer than a couple seconds to see the pretty ultra high definition images we so diligently chose. It's almost always possible to find something to optimize by compressing, minifying, or applying DRY code principles.
How well does the project work from a users standpoint? Sure it may be fast, it may be pretty, and it may not crash or cause compiler errors, but does it meet the relentless needs and expectations of real people? That's what usability testing is all about. At this point I "soft launch" the website so that I can physically test it on other devices not just emulators. I share it with family and friends, and I run through all the requirements, personas, user stories, and use cases.
At the end of the project as things are winding down, I spend some time just clicking around. Mindlessly zooming in and out, reading content, flipping between tabs, and multitasking to try and catch any last-minute surprises. When the project is as good as I can make it, or when time runs out then it's time to launch.
Once the project was signed off for launch with the client, I uploaded all the files to the hosting server. I registered the client's preferred domains and uploaded the files to the ftp. Email addresses were created for the domain to handle inquiries and those were wired up to the php mail manager code. I pressed the button and communicated with the client that the site is live and would be visible within a few minutes/hours... and there was much rejoicing!
As the data started pouring in from Google Analytics and Google Search Console, we noticed the rewards from our efforts. The new optimized website was resulting on the front page for dozens of search queries, and sometimes even in the top spot, beating out the competition in the area and the other businesses that have resided on the property in years past.
Data shows hundreds of users and thousands of page views. About 50% of viewership accessed multiple pages beyond the home page. This was a big step up from previous results. More than anything the client has a website they are proud to showcase in their presentations, articles, and marketing campaigns. The biggest wins are yet to come as the Tree Farm ramps up its construction phases and tenant's "Open" signs start appearing in the windows.
This project has taught me the value of working with family. It gave me another opportunity to bond and deepen my relationship with my father. I'm extremely grateful that I was able to aid in his project, and humbled by the praise and positive reviews he's shared regarding the website.
In my freelancing career which has been rather short, this is the first time I knowingly and deliberately followed the Design Thinking process from start to finish. While I was following the steps accidentally in some of my other projects you read about in my portfolio, this one taught me to trust the process and create traceable documentation every step of the way.
Congrats! You must have a lot of time on your hands. Feel free to check out some more of my projects.
Next Project Visit This WebsiteNate Marrs
(719) 505-3781
© Nathan Marrs 2021. All rights reserved