LANDSCAPING

E-COMMERCE WEBSITE & REDESIGN

 

THE CHALLENGE

 

Rock N Dirt is a local landscape supply company looking for a fresh look and a new e-commerce platform for their customers. 

 

The current web presence is very outdated and the navigation is tricky but this local shop has personality and customer service that cannot be beat! This design will have to deliver the service, quality and personality they offer with a fresh look and pleasant shopping experience.

 

 

THE APPROACH

 

Through my research, I identified two types of users; Contractors and DIY Home Landscapers. Our design would tackle both user groups. 

 

Through many iterations and brainstorming sessions, I decided the best approach would be a 2-login portal for each user. 

 

 

THE RESULT

 

The new-eCommerce website will allow the primary persona, contractors to view their own pricing and build bids with all the features of the main site.  

 

Both user groups can now shop, measure and have products delivered directly to their home or work site with confidence.

1/6

MY ROLE

Research

Information Architecture

Wireframing

Interaction Design

Prototyping

METHODS

User Interviews

Competitive Analysis

Personas

Card Sorting

User Flows

Sitemap

Sketching

Wireframes

TOOLS

Axure RP

Photoshop

Post-Its

Whiteboard

Paper & Pen

 

DELIVERABLES

Executive presentation

Wireframes

User Flows & Site map

Wireframes

Interactive prototype

 

 
USER INTERVIEWS & PERSONAS

I was able to interview 3 DIY Home Landscapers and 2 Contractors. Here is what they had to say:

“I would like to be able to build orders for future purchases and save items that my clients like but have not committed to purchase.”

“I like pictures, lots of pictures. Products can vary in options so it is great to have it. Also great to show clients.”

“I would want to know before I place an order, what time they could deliver it.”

PRIMARY PERSONA

Contractors

Meet Gene

Gene is a 34 year old contractor who owns his own local landscaping business and has crews working all over town. He enjoys the simple things in life. Give him his coffee and his truck and he’ll get his crew going for the day.

 

Gene wants things to work smoothly and the day to go off without a hitch. He doesn’t want to over complicate things. He wants to see what he is buying and have it be efficient and easy.

Pain Points
  • DIY Landscapers and Contractors use different terms for the same materials

  • Need a place to plan for their orders, they don’t make purchase decisions in one day

  • Measurements for materials can get tricky and overwhelming

  • Would like options for pickup and delivery

The Problem 

DIY Landscapers and Contractors both need to plan and purchase materials for landscaping projects. DIY landscapers that want to buy products in bulk, enter a world where they may not understand varying measurements (ie. cubic ft/yds) and confusing terms (what is an aggregate?). DIY landscapers and contractors would both like to place orders online, but these terms and measurements might make that tricky. Both want something to help them plan projects and make purchasing easier for pickup and delivery.

“I don’t plan a big project in one day, it’d be nice to be able to save products you like or get an estimate before your DIY day comes.”

“I want a mathematical feature to figure out amounts needed for different areas.”

“Would love to order online  
& have it delivered!”

“For deliveries, I want to have a guaranteed time of delivery.”

SECONDARY PERSONA

Do-It-Yourself Home Landscapers

Meet Abby

Abby is a 45 year old homeowner who enjoys transforming her home and yard using her own two hands.

 

Abby is a longtime gardener. She is starting a project in her backyard to build a stone patio with some gravel pathways and garden beds. She doesn’t mind hard work and can’t wait to see what she will accomplish. She likes to shop local and will pay more for high quality products and services.

Key Features

The Solution

The redesign will address the confusing terms with high-quality images. Another tactic will be utilizing good metadata and keyword searches with both professional and familiar lay terms. The design will incorporate a Materials Calculator to help customers estimate the amount of material they need. Certain pages also provide help prompts. Additional features for reserving delivery, saving project items, building estimates, and a smooth cart checkout will provide an excellent landscape shopping experience for both DIY Landscapers and Contractors.

  • High-Quality Product Images

  • Good keywords and metadata

  • Materials Calculator

  • Help prompts

  • Reserve delivery upfront

  • My account

    • Build estimates, save projects, wallets, addresses, track orders

COMPETITIVE ANALYSIS

I wanted to see what other sites were doing right and what could be improved to avoid making the same mistakes while implementing elements that already worked. To get this information, we conducted a detailed competitive analysis with two local and one national competitor.

This is Rock N Dirt Yard's current website. You can see there are a lot of issues that need to be addressed.

 

The one thing they did really well was conveying their home town values and personality. I wanted to preserve that message in all our considerations going forward.

Austin Landscape Supply
Texas Wholesale Stone
Wayside Gardens
 
CARD SORTING

Given the complexity of the product offerings from Rock N Dirt yard, I wanted to do a card sorting exercise on some user groups. It was important to get users from both the primary and secondary personas because we found that they use different terminology for the same product. 

First I did an in-person open card sort with top-level information. The users did not have any difficulty identifying groups that made sense to them.

Optimal Sort - online user research tool

Next, I did a online open card sort with specific product names. Users had a lot of difficulty with this card sort. Eight out of ten participants abandoned the exercise after starting the sort. When interviewed about the difficulty, they said it was too hard to know what the product was without photos or the broader categories guiding them. This confirmed my analysis through the interview process that pictures were essential to helping guide both user groups to the right products.

USER FLOW & SITE MAP

I developed user flows for both my primary and secondary personas. Taking the information gathered from the card sorting exercise and the user flows, we finished up the sitemap.

 
WIREFRAMES

I used a tool called Axure, which is a wireframing and prototyping tool for web and user experience designers. I also use it frequently to create user flows and sitemaps.

1/3
 

This is the prototype for the new e-commerce platform. We used this prototype to conduct our usability testing.

 

USABILITY TESTING

With the finished prototype, I went on to test 5 users. The breakdown was 3 contractors and 2 DIY Home Landscapers. 

Here were my findings:

User Control
Add to Cart

Differentiated between the two buttons to further add in navigation and encourage customers to keep shopping.

Shopping Cart Confirmation

All of the users tested found the shopping cart fast and easy to navigate but 2 users felt uneasy closing this page.

 

So we added:​

  • notice of email confirmation

  • link back to “My Account”

  • a "close" button

Additional Findings
Image Driven
All of the users explored the bigger icon/word placeholder boxes first to navigate to products.
Reserving Delivery
2 users liked that they were able to reserve
a slot before spending time shopping
Show More
 

Rock N Dirt retained the use of the logo and existing orange and black color scheme. Orange and black are strong colors, so I plan to use them minimally and cleanly through the site and focus on the product pictures. Through our research, we found that product pictures were key to users understanding the products and product measurements.

 

I have just begun to explore the visual design possibilities with this project. I look forward to building out the wireframes and developing a styleguide.