Plantswap follows a subscription based model. Customers are able to subscribe to the service for 3 houseplants each week. At the end of the week, the plants are collected and replaced with new plants. The selling point behind this idea is so that customers do not have to care for their plants or feel the guilt of having one wilt away.
Given the landscape of today's hipster and nature-friendly ideologies, Plantswap aims to target an array of customers. This includes those who have a passion for raising their own plants, people who want to raise one but cannot commit to the intracies of the process, and even homeworkers and businesses who want to update their interior style once in a while.
The idea of Plantswap spontaneously came from our initial search for stockphotos on Unsplash for our previous idea Bubblebar. We were feeling stuck, and as we stumbled upon a photo of a plant in a bathroom. We began to research the different kinds of Plant-based subscription box models and realized that our idea has not been previously done. That's how we began to develop our idea for Plantswap.
Eloise is a 24 year old female with a double degree in Environmental Science and Digital Journalism from Monash University. Originally hailing from Melbourne, Australia, Eloise has moved overseas to Vancouver, Canada to lend her expertise in nature and journalism. Eloise enjoys learning about environmentalism and sustainability.
With her frequent use of technology during her undergraduate degree, and exercising her voice through digital journalism, Eloise is trained as an early adopter. Thus, she finds herself at the forefront of upcoming activism and trends in environmentalism. Based on her skill assets and interest, Ashley looks for ways to blend her love for digital journalism and the nature.
Eloise is a Journalist at DailyHive Vancouver. She is passionate about blogging environmental and sustainable movements within Vancouver. As such, she is often found connecting with the immediate community and educating them on all things Green, while commencing on field research that assists her in journalism. As her job is relevant to her background, Eloise often finds herself bridging environmentalism with digital journalism by finding ways to connect her audience to environmental events, information and businesses around Vancouver.
As a consumer, Eloise's goals are...
In order for Plantswap to get the attention of Eloise, the values of the company need to align with her interests in supporting environmentalism and sustainability. As Eloise is a journalist, a digital presence is mandatory in captivating the attention of people within her network that look for green-related living.
Regular will be used for the headings and titles throughout the website.
Light will be used for the company's body text. It provides the necessary simplicity to strike a balance with other fonts of Proxima Nova.
This font will primarly be used in distinguishing supporting elements such as fineprints and minor textual details.
3 column and 9 column grids
.link-inText
<a href="#" class="link-inText">In-text Link</a>
.button-nav and .selected
<a href="#" class="button-nav selected">Current Page</a>
<a href="#" class="button-nav">New Selection</a>
.button-submitReset
<input type="submit" value="Submit" class="button-submitReset">
<input type="reset" value="Reset" class="button-submitReset">
.input-textField
<form>
<label for="textField1" class="input-textField">Text Input Field
<input type="text" name="textInput" id="textField1" placeholder="Type here">
</label>
</form>
.input-radioDefault
<fieldset>
<input class="input-radioDefault" type="radio" name="option" id="radio1" value="1"><label for="radio1">Option 3>
</fieldset>
.img-link
<a href="#">
<a href="index.html">
<img class="resizeImage-quarter img-link" src="res/bannerPlant.jpg" alt="Plant Image linking to Index">
</a>
None
<h1>Top level heading</h1>
<h2>Second level heading</h2>
<h3>Third level heading</h3>
<h4>Fourth level heading</h4>
None
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque blandit non neque non malesuada.
Donec sollicitudin ornare nunc, a sodales massa efficitur eget. Proin congue tristique augue, vel
blandit elit. Donec orci est, fermentum tempor dapibus ac, porta id diam. Quisque malesuada congue
augue, eget pharetra felis tincidunt ut. Suspendisse ac pulvinar nulla. Nulla ultrices dui purus,
sed vulputate erat semper ac. <p4>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque blandit non neque non malesuada. Donec sollicitudin ornare nunc, a sodales massa efficitur eget. Proin congue tristique augue, vel blandit elit. Donec orci est, fermentum tempor dapibus ac, porta id diam. Quisque malesuada congue augue, eget pharetra felis tincidunt ut. Suspendisse ac pulvinar nulla. Nulla ultrices dui purus, sed vulputate erat semper ac.
None
<ol>
<li>The first item</li>
<li>The second item</li>
<li>The third item</li>
<li>The fourth item</li>
</ol>
<nav class="nav-container" role="navigation">
<ul id="navLinks" class="nav-links">
<li class="li-navItem"><a class="button-nav" href="index.html">Home</a></li>
<li class="li-navItem"><a class="button-nav" href="product-selection.html">Plant Packages</a></li>
<li class="li-navItem"><a class="button-nav" href="plant-index.html">Plantswap Index</a></li>
<li class="li-navItem"><a class="button-nav" href="guide.html">Caring Guide</a></li>
<li class="li-navItem"><a class="button-nav" href="about.html">About</a></li>
<li class="li-navItem"><a class="button-nav" href="contact.html">Contact</a></li>
</ul>
</nav>
.banner
<div class="banner">
<div class="bannerTextContainer">
<p class="bannerMotto">Welcome to</p>
<h1 class="bannerTitle">plantswap.</h1>
</div>
<div class="bannerElement">
<img src="res/bannerPlant3.png" alt="Banner Landing for Plantswap>
</div>
</div>
.product-listing
<div class="productList alt class="grid-container">
<div class="product-card grid-container-column">
<img src="res/products/plant1.jpg" alt="Plant product image">
<h3>Lady Orchid</h3>
<a href="product-view.html" class="text-button">Learn More!</a>
</div>
.form-mainElement
<div class="grid-item-sixth">
<form class="grid-container" action="thank-you.html">
<div id="billingFields" class="grid-item-half grid-container">
<div class="grid-item-full">
<h2>Billing Address</h2>
</div>
<div class="grid-item-full">
<label for="fname"><i class="fa fa-user"></i> Full Name</label>
</div>
<div class="grid-item-full grid-container">
<input type="text" id="fname" name="firstname" placeholder="John M. Doe">
</div>
<div class="grid-item-full"><label for="email"><i class="fa fa-envelope"><
/i> Email</label></div>
<div class="grid-item-full grid-container">
<input type="text" id="email" name="email" placeholder="john@example.com">
</div>
<div class="grid-item-full"><label for="adr"><i class="fa fa-address-card-o"></i>
Address</label></div>
<div class="grid-item-full grid-container">
<input type="text" id="adr" name="address" placeholder="542 W. 15th Street">
</div>
<div class="grid-item-full"><label for="city"><i class="fa fa-institution"></i>
City</label></div>
<div class="grid-item-full grid-container">
<input type="text" id="city" name="city" placeholder="New York">
</div>
<div class="grid-item-full grid-container">
<div class="grid-item-half">
<label for="state">State</label>
<div class="grid-item-full grid-container">
<input type="text" id="state" name="state" placeholder="NY">
</div>
</div>
<div class="grid-item-half">
<label for="zip">Zip</label>
<div class="grid-item-full grid-container">
<input type="text" id="zip" name="zip" placeholder="10001">
</div>
</div>
</div>
</div>
<div id="paymentFields" class="grid-item-half grid-container">
<div class="grid-item-full">
<h2>Payment</h2>
</div>
<div class="grid-item-full">
<label for="fname">Accepted Cards</label>
</div>
<div class="grid-item-full">
<div class="icon-container">
<i class="fa fa-cc-visa" style="color:navy;"></i>
<i class="fa fa-cc-amex" style="color:blue;"></i>
<i class="fa fa-cc-mastercard" style="color:red;"></i>
<i class="fa fa-cc-discover" style="color:orange;"></i>
</div>
</div>
<div class="grid-item-full"><label for="cname">Name on Card</label></div>
<div class="grid-item-full grid-container">
<input type="text" id="cname" class="text-inputField" name="cardname" placeholder="John More Doe">
</div>
<div class="grid-item-full"><label for="ccnum">Credit card number</label></div>
<div class="grid-item-full grid-container">
<input type="text" id="ccnum" name="cardnumber" placeholder="1111-2222-3333-4444">
</div>
<div class="grid-item-full grid-container">
<div class="grid-item-half">
<label for="expmonth">Exp Month</label>
<div class="grid-item-full grid-container">
<input type="text" id="expmonth" name="expmonth" placeholder="September">
</div>
</div>
<div class="grid-item-half">
<label for="expyear">Exp Year</label>
<div class="grid-item-full grid-container">
<input type="text" id="expyear" name="expyear" placeholder="2018">
</div>
</div>
</div>
<div class="grid-item-full">
<label for="cvv">CVV</label>
</div>
<div class="grid-item-full grid-container">
<input type="text" id="cvv" name="cvv" placeholder="352">
</div>
</div>
<label class="grid-item-full">
<input type="checkbox" checked="checked" name="sameadr"> Shipping address same as billing
</label>
<input type="submit" value="Confirm purchase" class="button-submitReset">
</form>
</div>
</div>
.checkoutCartElement
<section id="cart" class="grid-container-column bg-tertiaryColor">
<div class="grid-item-sixth grid-container">
<div class="grid-item-full">
<h2>Your plantswap package</h2>
<p>Please check to make sure your order is correct before continuing to the checkout</p>
</div>
<div id="selectionReview" class="grid-container">
<p class="month-radio text-button" for="1">1 Month</p>
<div class="grid-item-full grid-container">
<div id="plant1" class="product-card grid-container-column">
<img src="res/products/plant1.jpg" alt="Plant product image">
<h3>Orchid</h3>
</div>
<div id="plant2" class="product-card grid-container-column">
<img src="res/products/plant2.jpg" alt="Plant product image">
<h3>Airplant</h3>
</div>
<div id="plant3" class="product-card grid-container-column">
<img src="res/products/plant3.jpg" alt="Plant product image">
<h3>Bonasi</h3>
</div>
</div>
<p class="grid-item-full">Total: $45</p>
</div>
<div class="grid-item-full grid-container">
<a href="#packageSeletionForm" onclick="goBack()" class="text-button">Go back</a>
<a href="checkout.html" class="text-button">Checkout</a>
</div>
</div>
</section>