eCommerce Website Redesign 

Rock 'n Dirt Yard

Research | Information Architecture | Wireframing

 

Overview


Rock n Dirt Yard is a landscaping materials supply source based in Austin, TX. They wanted to increase sales by creating an eCommerce website that was easy and delightful to use. My task was to design a clickable prototype around an online shopping experience, meeting the goals of the users, the business, and the brand.

 

Project Details


Project Duration: 2 weeks (outside of class)

Project Type: eCommerce website, General Assembly student project

Software: Axure

Research


Because this was a student project with a short timeline, we received 2 fully fledged personas:

 
Elaine
Frank
 

My first challenge was to decide which persona would be primary. At first glance, I figured Frank, the contractor, would be the primary persona but my research pointed me to Elaine. Here’s how:

We visited Rock n Dirt Yard and talked to a few employees, a valuable experience in getting a first-hand perspective on the business as well as the customers who shop at Rock n Dirt Yard. One of the employees estimated that their customer base was 60% contractors (Frank) and 40% casual buyers (Elaine).

chart

Originally this validated my decision to focus on Frank, but later it gave me permission to make Elaine my primary persona as I saw a greater business opportunity for Rock n Dirt Yard.

This opportunity lies with the barrier to entry that the casual buyer faces when deciding whether or not to purchase landscaping materials online. Elaine is more likely to go visit the yard in person for a variety of reasons: she has an insecurity about the purchase, an inability to visualize the products, and a desire for answers from a professional. Not to mention she is overwhelmed by the wide variety of products. Rock n Dirt Yard already has a relationship with contractors, but what about the casual buyer who has options ranging from Home Depot to Lowe’s to the local mom-and-pop shop down the street? What would cause Elaine to switch not only to Rock n Dirt but also to choose an online purchase model?

In an attempt to answer some of these questions, I created a survey and sent it out to potential users, i.e. homeowners who were interested in landscaping their yards. My survey yielded some interesting results. I asked them to rate 5 attributes of a landscaping supply source on the importance to them- 1 being the least important, 5 the most. Not surprisingly, online purchasing was the least important to these folks.

However, I also asked if they were comfortable purchasing landscaping materials online. 60% of participants said yes, they would be. When prompted for a reason why or why not, most people thought that having the supplies shipped to them would be a huge benefit as long as the price was competitive and shipping was quick.

 
chart 2
 

Taking all of this into account, I hypothesized that if the user had a satisfying experience with Rock n Dirt Yard’s website, they would purchase landscaping materials online. Furthermore, even giving users the chance to add items to a cart and see the final price from home would incentivize them to go to Rock n Dirt Yard for purchasing.

One interesting note is that none of the competing local landscaping supply sources offer an eCommerce experience. The nationwide brands do, and Home Depot has a program for contractors, but they do not specialize in landscaping, and certainly not at the scale that Rock n Dirt Yard does, which offers a wide and more complete range of bulk supplies.

My research led me to the problem to be solved:

The casual buyer is not familiar with landscaping materials (what is the difference between rock and stone?) and prefers to see materials in person rather than purchasing online.

Planning


First, I thought about some features that would be absolutely necessary.

  1. Display of the products in a clear hierarchical way
  2. Clear and complete information on each product
  3. A fast and efficient yet clear check-out process
  4. Shipping information
  5. Physical address and contact info

Next, I took an inventory of all their products in order to better grasp all that was on the site (it was not organized clearly at all)

 
inventory
 

It became clear that I needed to figure out the best way to organize the products. The casual buyer wouldn’t know the difference between “rock” and “stone” as menu options. After perusing their inventory chart, I realized that “stones” were large flat stones used for paving paths and patios, whereas “rocks” were small round stones also used for paths, but not cemented in. I decided to go with “rock” and “patio stone” as product categories. I also categorized “rock” into size categories (cobble, pebble, and gravel), but this was more for organizing on a single web page, as there were not enough in each category to warrant their own pages. I got these sizes by googling the scientific definition of these terms.

Then I started thinking about user flows. I created 2 flows: one for Elaine’s search and check-out process, the other for a calculator that would help buyers estimate their total cost.

 

Design


I started to sketch out the website and think about the different modules and forms:

 
 

Next, I turned to Axure for some wireframing:

 
example of products page

example of products page

 

Trying to keep the process as simple for the user as possible, I settled on a materials tab that turned into a mega menu with each category explained.

 
 

For the checkout process, which I wanted to be as simple as possible, I used Glossier.com as an inspiration (Steal like an artist amiright?)

 
 

As the user clicks “Add to Cart”, the cart comes up on the side, allowing them to adjust the QTY, delete the item, keep shopping by clicking outside the box or on the X, or check out.

It is also important to note that the product page contains multiple pictures of the item in use as well as an extensive explanation of the product- 2 things that were a pain point for Elaine.

Adding shipping and billing info, and delivery options:

 
 

The user is then brought to a summary page, followed by a confirmation and a chance to return back home.

Because this was a class project, we stopped the process at wireframes. My brain was already going toward images and logo design, but the final prototype is pretty bare bones. You can find it here:

http://6sn25z.axshare.com/#c=2

In testing my prototype, I was mainly concerned that the user would be able to find a certain kind of rock or stone without being confused by the menu. My testing went well, with my subjects being able to find Rainbow Rock easily.

 

Iterations


This was a significant first project for me. I saw the huge importance of doing research. I learned Axure. I realized how much work goes into a single website!

Some things I would want to iterate on in the future:

  • This was my first exposure to Axure, so I would go back and rework the wireframes
  • I would indicate to the user that shipping is calculated later based on zip code.
  • I would make the price calculator a pop-up module so that the user wouldn’t have to close out of it.
  • I would rework the header and clean up the boxes.