Floragrubb Sill

FloralGrubb Sill is a e-commerce website. They offering indoor greenery that fits busy lifestyles, enhances indoor spaces, and supports socially conscious business.

PROJECT GOAL

• Design efficient online shopping experience
• Build back-end database
• Owner can edit each user's data
• Have database running in php

my role

As the front-end developers, I am responsible for app’s user-facing code and the architecture of its immersive user experiences. In order to execute those objectives, I use three main languages: HTML, CSS, and Javascript programming. Also, use build database allow client can edit data anytime.

Brand Analysis

Floragrubb Garden is a local nurseries & gardening store in San Francisco.They are trying to helping san francisco apartments, homes, and businesses to look and feel more peaceful, stylish, and comfortable by pairing to plants selection to their home decor.

Style Guide

Font

Icon

Color

Information Architecture Map

Having a single document that delivers a simple and understandable representation of how the application or website works is vital for developing new features, updating existing ones, and for seeing what is possible considering the existing product.With IA available, it becomes significantly easier to make key decisions for new features and implementations, to understand timelines for product changes, and to follow user behavior through multiple processes.

Low Fidelity Wireframe

Design Highlight

The most important position of the homepage is to place information that promotes user consumption, such as holiday discounts, new product arrivals and other information. The 4 newly added products are shown below.
Each card with general information of product, user can explore more by click in single product page.

In order to provide users with a more efficient and convenient online shopping experience. Functions such as "search", “sort” and "filter" have been added to this page. Use javascript to make those function work well.

By coding in JavaScript and build database make the shopping cart work. It can calculate the price for a single product and automatically show the tax and total price.

Take Away

Coding is much easier with a good style guide

As a product with my own programming, the biggest challenge of this project is to design an e-commerce website within my limited programming skills.

As a product designer, coding is not my best skill. But this project made me realize that in the future design team, if the designer can provide the engineers with the detailed style guide and wireframe, the team cooperation will be more efficient.