TerraCraft Outdoors
Custom tear-drop solar-powered trailers.
“Designed to be able to take you away from civilization and inspire you to stay there.”
UX/UI | Website Design | Brand Extension
Overview
TerraCraft believes the places you visit are as important as the manner in which you visit them. They build sustainable and custom teardrop trailers that are facilitators for an amazing outdoor experience.
Objectives
Showcase Terra Craft’s customizable high-quality sustainable off-grid camping teardrop trailers.
Create a product page that allows for an interactive customization experience with a quote-submission form.
Build Terra Craft’s credibility as a leader in the industry by incorporating their voices through a Blog page, as well as utilizing SEO through that content.
Credits
Website designer - yours truly, Jade Wiggins
Website developer - Alex Langford
Visit live site: www.terracraftoutdoors.com
01
The Stylescape
The brand “rocket ship” used for setting the voice, tone, style, and design of TerraCraft Outdoors website.
Keeping their audience and current logo in mind while creating a board that encompasses a modern yet crafty visual experience.
02
Website Design
03
UX/UI Design - Product page
Interactive customization experience with a quote-submission form.
Select a color to start the process. A pop up window appears and displays image and description.
Next, select the “Base” or “Premium” electrical package. See circled icon below. This brings up a small pop up window that describes the differences between the two packages:
Next. Customize the rest of the teardrop trailer build. Each option has an information pop up, where the user can browse options to add to the build, such as a “stargazer window”, “Roof fan with rain cover,” or a “Camp oven”. Image and descriptions are provided.
User must select the green “+” to add it to their build.
Once customized options has been added, user must select a towing and an optional accessory roof rack to proceed with submitting the quote.
The quote manually calculates total for the user before their name, email, and comments are required to successfully submit the quote. The quote is submitted similarly as a contact form on the backend of WordPress.