E-Commerce Website
12 month PROJECT
There are multiple ways for consumers to purchase and install a fence depending on their time frame and budget. However, a fence installation project takes a certain level of planning and skill to ensure that you have the right amount of materials and knowledge needed for a proper install.
Most online shopping experiences for fence products are complex and depend on the customer to know exactly what they need to buy.
This can make online purchasing a less desirable option to potential buyers even though direct-to-consumer shopping can speed up a project and significantly reduce cost.
Fence Center is an online authorized dealer of ActiveYards fence products and provides an easy step-by-step process to ensure that a user has all the necessary items needed for a successful end-to-end fence installation. It also serves as a one-stop resource to educate and support customers throughout all phases of their project.
ActiveYards is the premier fence brand within the Barrette Outdoor Living portfolio of vinyl and aluminum fence and rail products. Their products are exclusively sold to an authorized network of dealers. ActiveYards was unable to sell directly online due to Barrette’s contractual obligations to their retail partners. To gain market share through online material sales, ActiveYards developed and licensed the Fence Center brand to a third-party manager. This ensured that all dealers within the network could profit from online sales made within their territory without creating liabilities for the manufacturer.
As ActiveYards' Brand Manager, I was responsible for developing the brand identity of Fence Center while creating the information architecture of the website and all of its content design. This included organizing a large product database of fence components and overseeing the development and production of thirty instructional videos to support the customer experience. I collaborated with a third-party development team on the product design of the site and guided the user experience to ensure alignment with brand strategy and stakeholder expectations. I also did all of the internal graphic design work since I could not secure additional human resources.
ActiveYards is a lifestyle brand whose “3 Ways to Fence” sales program is based on market research regarding consumer buying behavior. It provides flexible options to meet anyone’s time frame and budget. This sales model is utilized by authorized dealers within the ActiveYards network and incorporated into their showrooms.
3 Ways to Shop affords choice in how the consumer shops. They can visit a showroom, request an in-home appointment, or purchase online.
3 Ways to Buy is a Good-Better-Best strategy that allows consumers to choose between three product grades of any given style.
3 Ways to Install empowers consumers to either install the fence themselves, hire out the labor to a handyman or contractor, or hand-off the whole project to an ActiveYards dealer for end-to-end support.
As ActiveYards’ premier online dealer, Fence Center would incorporate this full sales strategy into the digital retail experience. Sales and marketing funnels could attract new customers to the site which would give us the opportunity to educate them on the overall fence buying process and drive them to local dealers. However, the primary business goal for the website was to profit from online material sales so we needed to specify our user groups.
Historical data showed us that users who shop for materials alone are defined by their installation plan.
Consumers who shop directly for fence will either install it themselves or hire someone to do the labor for a lower cost. Therefore, we identified our primary user groups for Fence Center as:
These two user groups would most likely want to find the quickest way to obtain project materials and supply their own labor.
Presumptive research saved a lot of time when framing the problem and defining our user’s needs. Primary research was not funded into the project as it was initially sized for a tighter turnaround with leaner requirements. Therefore, I was relying on the experience of stakeholders and the dealers within the ActiveYards network to help provide information.
With access to over thirty years of professional insights, I was confident that our user profiles were accurate for the project.
It would have been ideal to test our assumptions later on with actual users, but the UX maturity of the group was very low and I was facing obstacles establishing realistic expectations with stakeholders. Since I represented the business, I came into this project with a biased point of view but tried to stay neutral so that I could balance business and user needs.
Now that we defined our user groups, we needed to understand their process for planning and placing a materials order. Once again, I leaned on support from the fence experts in our dealer network to fill in any gaps so I could map a detailed user flow.
We also had to take into account how ActiveYards perceived this process since their marketing strategy would be incorporated into Fence Center. Their products are marketed as a lifestyle need rather than a basic commodity so I factored that in as well.
It is easier to search for a fencing solution rather than a product description.
I realized how useful this marketing approach was in the customer journey when my team performed a competitive analysis. Most private labels use industry descriptors like “pickets,” “post and rail,” “boards,” “double rail,” etc. to categorize their inventory which makes it harder to browse and filter through different styles and materials to find what you are looking for.
There is a lot of decision making and calculation that leads up to a purchase.
A competitive analysis of independent fence companies and big box stores validated our hunch that most online fence retail experiences assume the customer is already educated on what they need to buy. Fence components are sold as separate items such as panels, posts, gates, hardware, and accessories so the user needs to know exactly how to design their fence in order to create an accurate material list.
Our team also noticed that in most competitive sites, critical items needed to complete the job are often promoted through basic cross-selling product cart features and marketed like an after thought or "nice to have" rather than a necessity to complete the job. Furthermore, it is up to the user to correctly match items to ensure that they are buying components from the same color, style, and grade.
Uneducated buyers may omit important items needed for their project if they are perceived to be optional.
I was suprised at the level of detail and accuracy a layman must have when planning a fence project. At the time of this design, I was also planning my own fence project at home so I had elevated empathy for any user who chose to do-it-themselves.
I opted for full-service and hired one of our dealers to design and install our fence. Although they did all the legwork on measuring and figuring out the material list, I placed an internal order through the manufacturer since I could benefit from an employee discount. This gave me great insights on how materials are procured and the coordinated efforts between manufacturer - dealer - consumer.
Had time permitted, I would have loved to have done some contextual studies with users to validate my observations and the brand’s perspective of the customer journey.
A lightning study was a good starting point to gather inspiration for the site architecture. We looked at companies within the outdoor living and home improvement sectors that aligned with our targeted experience and identified potential features to incorporate into our website.
Empire Today’s lead capture model had some overlap to ActiveYards’ “3 Ways to Fence” program and their customer service approach influenced some early ideas on the Fence Center project. This prompted business stakeholders to think about how we could do more than just sell fence online.
We wanted to empower consumers with knowledge and provide a top-notch customer experience.
To achieve this, the website would feature:
At this point, I encountered obstacles tempering stakeholder expectations. The scope of the initial project requirements had crept into a much more complex design at least twice within a short period of time and I was concerned with hitting a moving target.
Our customer-centric strategy would require full content development which would require more time and resources.
We kept having to move the timeline out and it was causing frustration amongst the stakeholders while putting a lot of pressure on me and my tech partners.
Additionally, I was trying to secure internal resources to help me with production work and did not get approval. This presented a problem because our product catalog had changed and there wasn’t a full inventory of product images to use for the product shots of each component. Due to limited licenses and access restrictions to Barrette's engineering vault, I could not outsource any of that work to an outside contractor. I would have to build the catalog asset library myself.
Now that we understood the complexities of planning for and creating a materials list, we had to figure out a way for a user to easily place their order.
The design team felt that the basic cross-selling features we observed in competitive websites created friction for the customer because the suggested items were randomized and could be easily missed. It also didn’t implicitly explain the differences between things like line, corner, and end posts. A novice user might struggle with this part of the order because the differences are in the product routing and that is hard to tell by the product image alone.
Our team came up with the concept of the “Fence Builder” as a way to break down all project components into digestible sections.
A user would first select their preferred material type, style, product grade, size, and color. The Fence Builder would then populate all the corresponding items in the database and organize them in incremental steps. This customized shopping cart would provide an easy, step-by-step process to ensure that customers acquired all necessary items needed to successfully complete their project.
Each line item would have it’s own ‘Add to Cart’ button to prevent any user errors or missed steps since there were so many components to consider.
As the initial mockups for the Fence Builder took shape, we were simultaneously mapping the data of the product line since we had such a large inventory of items to audit and account for.
Business stakeholders forecasted a marginal number of products for Fence Center based on best selling items and production capabilities. While the offerings weren’t the full ActiveYards line, we still had a very large volume of SKUs that required production images, beauty shots, and descriptions.
Meanwhile, I was still developing the Fence Center brand. My tech partners had provided wireframes and I began working on high fidelity mockups and taking inventory of all the pages that needed assets.
Although we had a lot of ActiveYards marketing materials to co-brand with Fence Center, we still needed to think about content development specific to the new brand and create additional video and photography assets to support it.
Stakeholders wanted Fence Center to be customer-centric and serve as a one-stop resource for anyone who needs help with their fence installation project.
The website would include a “Dial-A-Pro” helpline offering free, professional support.
We needed to make sure that we supported the customer experience by building in the right digital features around this concept so that customers could reach Fence Center through any preferred method of communication.
Call to actions would include forms for intake and scheduling, live chat, and email prompts in addition to the hotline number appearing throughout the site. Additionally, we would need to make sure that these inclusions would align with operational capacity.
To enforce our brand position, we enlisted a spokesperson to appear throughout the website and in our videos. We wanted users to understand that they will connect with a real, friendly fence professional, not just a call center.
We determined that the best way to educate consumers on the fence buying process was through video and produced nine Fence Center branded videos that guided the user through how to use the site and important project phases.
We also created twenty-one instructional videos that would take the consumer through project planning, material handling, and even clean up and maintenance tips for both vinyl and aluminum products.
The content development was an arduous task and perhaps an overly ambitious one given the timeline. I was responsible for scripting, art directing, and overseeing the production of the videos while staging a photo shoot to occur at the same time. This “piggy back” approach would yield tons of assets for the website but we had some obstacles.
Although I had designed and budgeted the shoot to include talent, my manager insisted we could cut costs by using employees, family, friends and their site locations for the shoot. This put limitations on the art direction and story telling.
I wanted to show more diversity in the audience to be representative of a wider range of users.
Since we were were struggling for project resources, I had storyboarded and scripted all the videos. I am not an experienced screenwriter and felt that some of our video scripts were too wordy. Our novice spokespeople stumbled through them on camera.
This took more takes that we had allotted time for and diminished some of the quality I was striving for in the finished product.
The goal of Fence Center is to provide an educated shopping experience that empowers the user with options for their project timeline and budget. Initially, I came up with the tagline, "The Easy Way to Fence Shop," but our business partners decided that "The Smart Way to Fence Shop" was a stronger position and aligned better with our branding goals. However, we also had the challenge of co-branding with ActiveYards since Fence Center would be a licensed dealer and we were incorporating their branded sales model.
Stakeholders wanted the co-branding to be visually compatible and look like it was one brand.
I decided to use a dark neutral gray for the primary color and accented it with the same lime green color used in the leaf of the ActiveYards logo as my secondary. This palette would work well with a a content rich website full of outdoor images and tie everything together.
Fence installation is labor intensive and dirty, but is a skill anybody with ambition to be hands on can do. I wanted the visual design to evoke a strong, masculine quality but also have a friendly, approachable character. I chose to slightly slant the typeface in the logo and constructed the last “E” in the word “fence” with pickets to bring a little fun into the design and make it appeasing to a novice audience. I carried this design across all promotional graphics.
I felt that the icon set should be a bit weighted to compliment the blockstyle typeface and evoke a sense of reliability. But I also wanted enough character and detail in the icons to help tell the story within context of use.
Using the developer’s wireframes, I began to lay out the Fence Center story in high fidelity mockups. I used the earlier site maps to help plan the shot lists for the photography and video shoot.
In this project, we had a lot of moving parts, no time or budget for usability testing, and a huge list of assets to develop with very few resources. My role was transcending in all different directions so I really struggled to approach it solely from a UX point of view.
Unfortunately we did not give much thought to accessibility or responsiveness at the time. Looking back it would have been wise to design for mobile first.
Now that I have a better understanding of accessibility in general, I see a lot of issues that would need to be corrected if I was still on assignment with Fence Center. Some of the UI decisions that I would reevaluate for WCAG alignment would be:
Our objective for Fence Center was to create a product that simplifies the fence purchasing process online and provides rich content in the form of educational resources and professional guidance. We achieved this by delivering:
Overall, it was a Herculean effort and we had a successful launch even though our timeline extended from 6 months to a year.
Our biggest challenges were expectation setting and procuring resources.
Stakeholders didn't really understand the process of developing a project of this magnitude and there were business circumstances that were driving the anxiety behind the rush-to-market so this weighed heavily on all partners and kept creating moving targets on our timelines as needs changed.
While my development partners had designers supporting the project, I was the only designer on my internal team and had to balance project management with the work I was doing to develop a new brand as well as production work to build assets needed for the website.
Shortly after launch, I was pulled off of the Fence Center project and there was no plan to continue iterating on the brand or the site. I left the company before I could gain any metrics or insights to Fence Center’s success. If I had continued with the project, I would have integrated usability testing once the dust settled and addressed accessibility concerns.