Designing an E-commerce Website for Rock N Dirt Yard.

 
 
Header-17.png
 

About the Project.


Team: Brittany Leaning
Project Duration: One week (outside of class)
Project Type: E-commerce website (project requirement set by instructors)
Focus: Information architecture, the design process
Software: Axure

Rock N Dirt Yard is a brick and mortar landscaping supply depot in Austin, Texas. They have a website, but it functions mostly as an online brochure. The company gets most of its business through in-person visits and orders via phone or email. We were given this website in class and asked to come up with an e-commerce redesign with a focus on restructuring the information architecture.

Discovery and Research

Personas

Since this was only a week-long project, we were given two personas at the beginning to help speed up the process. Elaine most closely aligned with the people I interviewed, so I focused on her needs and pain points for this project.

Elaine, the Gardening Enthusiast

“I enjoy the experience of working with the Earth.”

Elaine is a 47-year-old gardening enthusiast who cares about ecology, experience, and personal connection. She is a longtime gardener and self-described granola. She is currently working on building an organic garden in her backyard. She is passionate about environmental causes and enjoys working outdoors as a way to relieve stress. She is willing to pay the price for local and organic but appreciates value pricing. Her favorite brands are Nordstrom, Honest, Prius, and Kate Spade, and her favored media is HGTV, PBS, and Facebook. She has a relatively low tech-proficiency, a slow purchase cycle, and uses Mac products such as the iPhone or MacBook.

What Elaine needs from an online store:

  • Feeling of relationship with the brand
  • Understanding of level of products
  • Clear pricing and flexible shipping options
  • Social proof from others to know what works

Elaine’s pain points:

  • Lack of sufficient product descriptions
  • Overwhelmed by choice
  • Wants to be sure of small product details
  • Having no person to talk to

Opportunities for improving Elaine’s experience:

  • Establish trust and relationship
  • Show product ratings and certifications
  • Give suggestions based on past purchases

Interviews

Here are the steps I took to conduct user interviews:

  1. Determine if I need to gather qualitative data, quantitative data, or both.
  2. Write up a list of non-leading, open-ended questions.
  3. Identify how many users I should interview and where to find them.
  4. Interview users in person and record the conversations.
  5. Replay user interviews and summarize the top 3 observations or takeaways from each.
1-9bjQ8BV99vVU8DvDMwGhmA.jpeg
1-d2LbuRrHoLLerWx2PbJm2A.jpeg

The first real, in-the-weeds step of my process was going to gardening and landscaping stores in the Austin area. These included Home Depot, The Great Outdoors (local), and Rock N Dirt Yard. For this project, I focused on collecting qualitative data so I could learn how to conduct effective in-person interviews, but also because Rock N Dirt is a local, community-oriented business that cares deeply about creating an emotional connection with its customers.

The most prominent things I learned from user interviews were:

  • Rock N Dirt customers are not all contractors and landscapers; a huge number are DIY enthusiasts who enjoy working on projects at home.
  • The biggest problem customers run into is not being able to visualize material quantity and what their project will look like when it’s completed.
  • Customers don’t feel comfortable buying plants or stones online without looking at them in person first, though they might buy items such as dirt or mulch online.

Competitive Analysis

I went to several competitors’ websites and drafted a competitive analysis, which included a basic heuristic evaluation and feature, element, and layout comparison.

1-Ah3p2QTLerLL2qQSU0vZJw.png

Here’s a list of several competitor websites I looked at while in the discovery phase:

As I reviewed each website, I performed a task analysis and walked through the checkout experience (if they had an e-commerce functionality) for each one. This involved documenting how a user would buy an item on each site, and how many steps it would take to reach a confirmation message at the end.

Challenge(s)

After conducting research and examining my notes, I arrived at two main challenges:

  1. Elaine couldn’t visualize what materials she needed for her project.
  2. Elaine had no way to purchase those materials on Rock N Dirt’s website.

Keeping these two challenges in the forefront of my mind, I proceeded to the next phase of my process: sketching and ideation.

Sketching and Ideation

Information Architecture

The main focus of this project was to reorganizing the website’s information architecture. To have a clearer picture of Rock N Dirt’s current priorities and taxonomy I took a content inventory and organized it in a Google Spreadsheet. The list included all the pages linked to in the main navigation and the footer.

Once I had a clear view of Rock N Dirt’s priorities, I wrote down terms or phrases for how competitors’ labeled their navigation.

I took the navigation labels from Rock N Dirt and competing websites and wrote them all on sticky notes, which I then arranged into a sitemap:

(Clearly, I should work on this part of my process moving forward.)

From here, I drew a sitemap that was essentially the same information as the sticky notes, but in a different format:

When I completed the sketched sitemap, I still wasn’t happy with the way I organized the site’s information. I decided to proceed to sketching anyway, mostly because I was on a tight deadline, but also to see if I could work out a few of the kinks and get my brain working differently in the next phase.

Narrowing Scope and Structure

Sketches and Paper Prototype

I started sketching a homepage for the Rock N Dirt website based on all the information I had from interviews and competitive research. Once I started sketching, I found myself mulling over the challenge of adding an e-commerce element to help Elaine purchase materials on Rock N Dirt’s website.
 
Thinking about my task analyses from competitors’ websites, I sketched about ten different steps for purchasing limestone from the Rock N Dirt homepage.
 
See the paper prototype in action:

If I had more time with this project, I would have liked to:

  • Come up with several user flows, which offer solutions to both of Elaine’s challenges.
  • Draw each user flow in well thought-out sketches.
  • Run several user tests on the paper prototype(s).
  • Iterate and work out all the kinks before moving to Axure.

I did make a few changes to my low-fidelity prototype after going through the paper prototype, but these were based on personal preference and opinion. Ideally, these decisions should have been rooted in research and learnings from user testing, but I regrettably skipped this step for the sake of time.
 
Here were a few lingering questions I had after going through the paper prototype:

  • Is the additional level of hierarchy in the drop-down navigation necessary?
  • What happens after you click “add to cart” in the popup? (That interaction doesn’t currently make sense.)
  • Seeing the calculator after you’ve already added an item to your cart is confusing. Is there a way to add this feature beforehand? Or should it be nixed altogether?

Wireframes

This wireframe includes six menu items in the main navigation, a search bar, and some links above for Rock N Dirt’s phone number, the user’s account information, and a shopping cart. You can see a hero image gallery close to the top of the page, which would include photos of customers’ yards, patios, and other landscaping projects that showcase Rock N Dirt materials in use. Just below that, you can see a section for Featured Products, which would show product details from the gallery. Finally, in the footer there’s a map, Rock N Dirt’s address and phone number, and a contact form for questions. 
 
During this process of lowering the fidelity, I also reexamined the navigation and took out Pricing, Delivery, and Resources and replaced them with Inspiration, FAQs, and Blog. I realized that Pricing and Delivery were redundant and could be combined with Products. The original separation of these had a lot to do with the legacy Rock N Dirt website and the way the information was originally laid out. I also came to the conclusion that Resources was too vague as a solution to helping Elaine visualize the materials she needed for her yard.
 
I had high hopes that I would work out the information architecture kinks in the sketching phase, but I just couldn’t wrap my brain around how to solve the problem until I saw it laid out in a higher fidelity design. I think two things could have helped me solve this earlier in the process, which I will remember for next time: 1) proper card sorting, and 2) sketching and creating multiple user flows through multiple paper prototypes.

Prototyping and Testing

The final deliverable of this one-week project was to create a low-fidelity prototype in Axure and present it to the class. This was my first time using Axure, so most of the time I had dedicated to this phase was spent Googling how-tos and watching Lynda.com tutorials.
 
Considering my deadline, I stuck to simple designs and interactions. I focused on providing solutions to Elaine’s two major challenges: visualizing the materials she needs for her project and purchasing those materials on the Rock N Dirt website.
 
To address the first problem, I created an inspiration gallery where Elaine could look at photos of other customers’ DIY projects. When you click on a photo, a lightbox pops up with numbers placed over specific elements of the photo (for example, limestone used in a customer’s patio project). If you click on a number, you see a little information about the specific Rock N Dirt product that customer used, with a call-to-action (CTA) to see more details about that product. From there, you can choose to check out or browse related materials.

User Flow: Inspiration > Place Order

Here are the steps:

  1. Inspiration
  2. Justin’s Patio
  3. #4 (Limestone)
  4. See Details
  5. Add to Cart
  6. Checkout
  7. Confirm Order
  8. Place Order

With this user flow, there are eight steps between Elaine’s curiosity and purchasing her products. Of the three user flows I chose to showcase, this is the most complicated and takes the longest to complete.
 
Another option Elaine has for purchasing her limestone would be to click on Products in the navigation, select Rock & Stone, and dive into Limestone from there. On each product page, I chose to lay the content out visually with a sidebar menu to help the user navigate further. Finally, I included some breadcrumbs so users wouldn’t get confused about which product page they were on (or how they got there).

User Flow: Products > Place Order

Here are the steps:

  1. Products
  2. Rock & Stone
  3. Limestone
  4. Add to Cart
  5. Checkout
  6. Confirm Order
  7. Place Order

This user flow removes one step, leaving Elaine with seven steps from the homepage to placing her order.
 
Another way Elaine could find limestone through the homepage is in the Featured Products section below the hero image gallery. Here, you’ll see a popup modal with more information about the product, some similar products, and an option to learn more.

User Flow: Featured Products > Place Order

1-ve-FCadQoJv_UPGrS7oGzQ.gif

Here are the steps:

  1. Featured Products (Limestone)
  2. See Details
  3. Add to Cart
  4. Checkout
  5. Confirm Order
  6. Place Order

Now, we’re down to six steps. As you can see, Elaine has a few different options for adding limestone to her cart, but this last user flow is the quickest.

Since this was a quick project aimed towards learning software and fundamentals of UX design process, I didn’t get the chance to user test my prototype. In future iterations of this prototype, I would absolutely user test each of these flows with multiple “Elaines.”

Iterating and Launching

Though this project never advanced beyond a low-fidelity prototype (or even a fully-functioning one, at that), there are many things I discovered throughout my process that I’d like to redesign and test again. For example, one major oversight that I’d like to fix is the ability for users to add the amount of stone they’d like to purchase, whether that’s per pound, bag, yard, etc. It would be great to revisit the calculator idea that I was throwing around in my original paper prototype, which I nixed in the low-fidelity prototype for simplicity’s sake. At the end of the day, I had to focus on learning how to use Axure, show how I organized the site’s information, and walk through a couple of user flows that addressed Elaine’s biggest challenges. There are still several logistics and details that need attention and iteration, but this will require a bit more time to tackle.

 

The Problem.


 
 

Leads were down. Users were flocking to blog content to avoid filling out a form. 

 
 

So, how might we...

Create… a lead generating offer
For… young marketing and sales professionals
To… help them successfully navigate the next step in their careers
And improve… the user experience of filling out a 13-field, sales-qualifying landing page form in exchange for high-quality content.

 

As a Content Strategist at HubSpot, my goal was to generate leads. This often meant writing and designing a long-form piece of content (often an ebook or template) and gating it behind a form on a landing page. In order to download the content, a user had to fill out a 13-field form.

 

Here's what HubSpot's forms typically look like:

Note: HubSpot has since changed their form length from 13 fields to eight.

Note: HubSpot has since changed their form length from 13 fields to eight.

Leads were down. Users were flocking to blog content to avoid filling out a form. The lead form experience was fundamentally broken. 


The Solution.


My mission was to create an alternative, experimental lead generating offer where the form was part of the content itself. After a few brainstorms and whiteboarding sessions, we ended up on the concept of a quiz or assessment where sales-qualifying lead fields were sandwiched between quiz-related questions.

Once the user fills out the quiz, they receive one of nine results showing what the next step in their career should be. This result comes with a list of curated content and resources to support and promote career growth over the next five years.

Answer page example.

All potential results:

  1. Become a Manager

  2. Leave Your Company

  3. Start Your Own Company

  4. Step Away From Management

  5. Grow As a Leader

  6. Scale Your Team

  7. Pursue An Internship

  8. Expand Your Skillset

  9. Make a Lateral Move

In the end, we created a successful MVP quiz that generated leads in a fresh new way. This experiment moved HubSpot's Content Team forward and blazed a trail for future lead generating content.

 

My Process.


Explore

  • Identify the problem.
  • Brainstorm potential content topics and products.
  • Research and analyze competitive tools or pieces of content.
  • Empathize with and understand personas.
  • Iterate.
 
Define-Icon.png

Define

  • Determine goals.
  • Finalize direction, personas, and timeline.
  • Meet with stakeholders.
  • Iterate.
 
Design-Icon.png

Design

  • Brainstorm, whiteboard, and document.
  • Determine quiz logic.
  • Sketch.
  • Create a brief style guide for content consistency.
  • Wireframe.
  • Hand necessary pieces over to development.
  • Support development.
  • Design "result" pages in HubSpot's CMS.
  • Iterate.
 

Quiz logic was built out and tested in a Google Spreadsheet before moving to development:

 

Learn

  • User test quiz logic before designing.
  • User test designed MVP and collect feedback.
  • Iterate.
 
Launch-Icon.png

Launch

  • Launch.
  • Promote.
  • Measure results.
  • Iterate.
 

Future Iterations.


 

Takeaway:

Don't ask users sensitive career questions ... and then also ask for the name of the company they work for.

 

After launch, the biggest piece of user feedback we received was in regards to the form. Users felt very uncomfortable answering the quiz questions honestly when it included HubSpot's required sales-qualifying fields about the company they worked for. This is completely understandable and was the 

 

For next time:

  • Properly wireframe, prototype, and user test before moving to development.
  • Make this quiz prospect generation-only (just email required).
  • Keep this concept and create a lead generating quiz with a different content topic (not career-related).