Branding | Responsive Website Design | Animation | illustrations

Sapling is an e-commerce store that sends potted plants straight to your door.

“2019 AIGA Certificate of Merit in UX/UI” winner and the 2020 “Silver ADDY in UX/UI” winner

 
Haddon_Cover.jpg
 

Logo iterations

I wanted the company to be fun and light-hearted, so the name Sapling was chosen. Sapling is a young plant, so that allowed for a more fun youthful feeling for the brand. During the first stages of logo sketches, I tried to combine a plant and a box to relate back to the company being a store. That direction wasn’t very effective though, so my next round involved me trying to combine the letter S and a plant leaf. The final logo is a Monstera leaf and an S combined. The color of the logo is a lighter green because younger plants are normally lighter than adult plants and wanted to relate back to the fun youthful vibe of the company.

 
 

Style guide

 
 

Illustrations

Due to the fact that the logo is so organic and the brand feel was fun and light hearted, I created vector illustrations of various plant leaves for the hero image and to be used throughout the website.

 
Screen+Shot+2020-03-12+at+7.08.30+PM.jpg
 

HOme page

The home page has a large hero with the illustrations I created. There is a short description of the business and how it was founded. For the featured products section, I wanted to use the organic shapes from the hero in a new way, so the background of the photos were cut into organic shapes and the illustrations were used throughout the page as well.

 
 
saplinghome-02.png
 
 

Store Page

The store page allows the customer to filter through different types of plants as well as size and different light conditions. The customer can also choose what color pot they want their plant to come in.

 
 

Product page

The product page gives you all the information you would need on the plant, including amount of sun light and water that it typically needs. The organic background was used on this page as well to highlight the product.

 
 
productpage.jpg
 
 

Loyalty Page

The profile page allows you to become a sapling member. The customer can earn points through various ways and the customer can use those points to purchase items. There are three different membership levels depending on how many points the customer has earned.

 
saplingloyalty-02 copy.png
 

Mobile Site

 

animation

 

Reflection

When I went into this project, I thought it would turn out completely different. I learned through this project that you really need to make decisions based on the brand and not based on what you thought you were going to make. I struggled with making the logo for a while, and was relieved to finally settle on the idea of an S mixed with a leaf. But the logo was very organic and youthful, which didn’t align with the vision I originally had for the project. But the outcome was so much better than my original vision.

I was happy to be able to make illustrations and make the website more airy and free. I also learned that you shouldn’t keep the same layout when moving to mobile. My first round was very similar, and I realized that it made everything very hard to read and too small. One of my favorite parts of the project was getting to experiment with how objects would move in After Effects with my final animation.

 

Overview

Time: 4-5 Weeks

Tools: Figma, Adobe Illustrator, Adobe After Effects, Adobe Photoshop

Skills: Web Design, Illustration, Branding, Logo Design, UX/UI