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.
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.
Primary Persona
Secondary Persona
Primary Persona
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.
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
All of the users explored the bigger icon/word placeholder boxes first to navigate to products.
2 users liked that they were able to reserve a slot before spending time shopping
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.