Cart 0

Build-Your-Own-Tabletop-Terrarium: a curated shopping experience

 
Introducing..... Built-Your-Own-Tabletop-Terrarium: a microsite!

For a local e-commerce store, I was challenged to create something to help draw attention to their lowest selling items: succulents, containers, and small accessories. 

Introducing - Build Your Own Tabletop Terrarium, a microsite! I worked with the information architecture and interface design to produce a site that is easily navigated by the user and conveys the brand image. The site will feature a how-to-guide and some pre assembled kits with everything you’d need to make a beautiful terrarium at home.

After digging around on their website, I found that they currently don't have those items for sale on their website, so a microsite would be a great way to boost revenue. They a want the microsite to retain their brand and in-store experience. They always strive to have all locally grown and handcrafted products available whenever possible because their customers are neighborhood regulars, who care a lot about what is brought into their homes, who made it and how. I kept this in mind when choosing 100 of their products to feature on the microsite; all the cacti, air plants, and succulents are locally grown and each containers is handcrafted.

Rectangle Copy 3.jpg

User PersonaS

Kent and his 14 year old daughter, Alana.
 

Needs

  • Quick access to a wide range of options
  • To know what's new on repeat visits
  • Social proof fro others to know what's cool

Pain Points

  • Lack of sufficient product information
  • Difficult navigation
  • Expensive or unclear shipping charges
  • Complex returns process
  • Lack of trust in unfamiliar retailers

This is Kent, an artsy dad, and his 14 year old daughter Alana. Alana lives in Rhode Island with her mom. He only gets to see her every 6 months for about a week at a time and she is coming into town in two weeks. Kent needs to think of something they can do together while she's visiting. He knows that Alana loves arts & crafts and nature - so maybe they can spend some time building a tabletop terrarium together..

Information Architecture

I had users sort my products into categories, but i learned rather quickly that the real names for a lot of my items were very confusing or unknown to my users. So I did some reverse card sorting and had them write what they thought the names of each category and sub category should be, and then I gave them a stack of prewritten words that could choose from for each category until I found names that were universally understood.  From there I was able to create a site map for the microsite.

 
Rectangle Copy 3.jpg

Competitive Analysis

I looked at the current market for online terrarium buying and I found two main things. (1) These sites don’t have any information about return policies for terrarium kits on their websites and (2) The kits don’t actually come with the plants! You have to buy the plants separately on a sister website or go into the store to purchase.

 

Sketches to Wireframes

This is the home page and the product page. I knew I wanted the home page to show whats new, have good navigation in the header, a how-to-guide, and show an Instagram feed of what terrariums others have created. I wanted the product page to show a lot of product information, product ratings, related products and products frequently purchased together, the ability for users to read and write reviews, and have shipping and return policies listed on the page. I played around with the layout until I thought it represented the brand well.

Rectangle Copy 3.jpg

User Testing

Through user testing, I learned that users weren’t sure what the Instagram feeds were, they thought they might be new products being displayed. User’s weren't sure where the related products were being displayed on the product pages. They also had a hard time finding the shipping prices and return policies and thought the navigation was a little difficult to filter down options once in a category page. They did not like bring pressured to save their information and create and account on the checkout page. 

Iterations & Annotated Wireframes

I added Instagram Icons next to the feed to show more explicitly what is being displayed in those areas. On the Category Pages, I added a ‘ALL’ filter so they could easily tell what items were being displayed below. On the product pages made the labels bigger and more clear to show the related products. I also made the shipping and return policies more obvious. On the checkout page, I changed the option to save your information and create an account to after checkout is finished. 

Rectangle Copy 3.jpg

HIGHER FIDELITY WIREFRAMES

Storyboarding

The Build Your Own Tabletop Terrarium microsite provides inspiration and preassembled terrarium kits to be crafted at home that can be purchased online unlike any other current comparable marketplace. I’m going to show you Kent’s flow from homepage to checkout on the site. at the top of the page you’ll see the user flow highlighted to show which part of the flow Kent is in during each part of the process. 

 
Storyboard User Flow - Home.png

Kent starts on the home page where new products are being readily displayed for him. He checks out the Instagram feed to see what cool terrariums other people have made. He sees a few he thinks Alana might like!    

Storyboard User Flow - product detail.png

From here he narrows down the options to large terrarium kits, he finds the faceted terrarium kit and gets more information.  He can see the items that come with the kit, shipping and return information, and the Instagram feed of what other people have made with this exact kit. He reads the product reviews and decides to go for it.                        

 
 
Storyboard User Flow - cart.png

His cart pops up, but he decides to keep shopping. He wants to get extra succulents, those are Alana’s favorite. He see’s one he likes in the related products area and gets more information about it.                             

Storyboard User Flow - product detail 2.png

On this page he can see reviews, shipping and return information. He really likes the Hayling succulent, so he decides to get two and proceed to checkout.                                            

 
 
Storyboard User Flow - Checkout.png

At the top we have a secure payment with icon displayed to establish trust. He puts in his information and notices that standard shipping is free.               

Storyboard User Flow - Checkout Confirmation.png

He is really concerned with return policies, so he sees that he can see the policies in customer support and he reads them. Now that he feels better, he places his order. This brings him to the confirmation page that will allow him to see a detailed receipt, the return process, and he can create an account to save his information for next time, for an even faster checkout process!      

 
 
10. Results.jpg

Kent is happy that he was easily able to find and purchase a hip activity online for him and Alana to do together when she gets into town. 

 
Rectangle Copy 3.jpg

Peer Feedback

Your presentation background, borders, and photos look so well together! I love the "build your own terrarium" concept. I want one. Love the video presentation and the pop out windows are amazing. -Cole
Slide 15 is AWESOME!!! You have serious skills and talent. Your objective is clear and you stay focused on the users problems. I loved the story line at the end. Your attention to detail and narration was just great! Well done! -Sabrina

BROWSE OTHER PROJECTS