The Tree Farm

Ideate

Prototype

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.

Design Decisions

• There wasn't a clear need for a prominent call to action button on this website. It's one of the first things that designers might notice is missing in the traditional sense. The website was built in the style of a "digital brochure", so most of the focus was placed on delivering information in a concise and meaningful way. There is plenty of room in the final design to spruce up the call to action (currently the "Contact Us" button).
• The triad photos as seen in the bottom of Design7 were a huge hit and we decided to propagate those to each page of the site with respective images showing the theme.
• In the end I decided on using more traditional link buttons instead of ghost style bordered buttons. In a flat design, ghost buttons don't really stand out as anything special or clickable. Established web users can quickly identify underlined text as a link. Per Steve Krug's principles of "Don't Make Me Think", reduced cognitive friction wins out over pretty styling any day.
• Each of the sections needed to allow for an indefinite amount of text that was yet to be created by our copywriter. The content sections needed to be flexible without breaking the core visual ideas.
• Links at the bottom needed to be easily actionable while still preventing as much spam as possible. A clever solution was to turn the email address into an image so that it couldn't be read by text crawlers. Direct email contact is still possible by the form, but it's much easier to control spam through that method than a straight mailto in an anchor tag.

Build

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.

Outcome

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.