top of page
larm-rmah-5em1lVBmvw8-unsplash (1).jpg
flourish_iphone mock (1).png
flourish_logo (1).png

- INTRO -

Project Overivew

An eCommerce website for indoor plant lovers focusing on educating new enthusiasts.

The goal for Flourish is to create an e-commerce platform that sells indoor plants and plant accessories. The vision is to spread the joy of having and caring for indoor plants, help people build personal aesthetic, and develop a closer connection to nature.

Role

Lead Product Designer

Lead Visual Designer

Timeframe

11 Weeks

Sept to Dec 2020

Team (3)

Fengwei Han (info systems)

Maisie Howard (psychology)

Project

MHCI+D Course

HCID 512: Interfaces Lab

- PLAY BY PLAY -

Flourish Timeline

This course focused in on the designing UI and prototypes in Figma and micro-interactions in Principle, so research took a bit of a backseat in this project.

Flourish Timeline (1).jpg
My Role Creating Flourish

I was the lead product and visual designer on the team, and I enjoyed mentoring my two teammates on visual/UI design and creating a brand as they were eager to learn. It was wonderful to be able to maintain brand consistency with two new designers while helping to develop their technique and grow their confidence throughout the project.

- INTRO -

Project Overivew

- FLOURISH INDOOR PLANT E-COMMERCE WEBSITE -

Final Design

Final deliverables for the e-commerce site include Figma prototypes for the main page, product category, product page, and checkout--plus, principle animations for logging in.

Navigating Through the Prototype

I created this preview of the desktop prototype made in Figma.

Sign-In Micro-Interaction

I created this demo of the sign-in micro-interaction made in Figma and Principle.

Main Pages

I challenged my teammates Maisie (home page) and Fengwei (product category) to create visually pleasing, consistent, and professional prototypes. I did the product page.

Home Page

desktop_home_page (2).png
mobile_home_page (2).png

Category Page

Flourish_Category_Page_Desktop (1).png
Flourish_Category_Page_Mobile (1).png

Product Page

Flourish_Product_Page_Desktop (1).png
Flourish_Product_Page_Mobile (1).png
Check Out and Sign In

I worked with my team to quickly turnout the check out and sign in screens for both mobile and desktop.

Check Out

checkout (1).png

Sign In & Password Reset

signin (1).png

- COMPONENTS -

Design System

The design system was critical for our team even with just three people working on the same UI. We were communicating changes to the design system constantly as the design continued to evolve.

components (1).png

- HOW WE DID IT -

Process

- WHAT DOES THE MARKET LOOK LIKE? -

Competitive Analysis

In a saturated market, we needed to find an edge. The thing that stood out was catering to first-time plant buyers wanting the plant aesthetic, and teaching them plant care.

​

Copy of Cedar Team - Competitive Matrix (1).jpg

- OUR IDEA -

SWOT Analysis

We scrutinized our idea with a SWOT Analysis.

Copy of Cedar Team - SWOT Analysis for Our Plant Platform (1).jpg

- ORGANIZING OUR THOUGHTS -

Affinity Diagramming

We used affinity diagramming to align and organize our thoughts.

Copy of Cedar Team - Mind Map (1).jpg

- MAKING A BLUEPRINT -

Mind Map, Early Information Architecture

Figuring out how to navigate the website

Copy of Cedar Team - IA (1).jpg

Final Sitemap

Information Architecture (1).png

- THE BRIEF -

The Final Project Brief

The basic plan for the Flourish website.

About Flourish (1).png

- ATTAINING CONSISTENCY -

Visual Design Process

- TEAM ALIGNMENT -

Branding Workshop

How do you align visually? By talking and showing. Here is how we aligned:

Rough brainstorming of colors, branding, lifestyle photography, typography, etc.

Visual Design Moodboard (1).png
Design Moodboard (1).png

Getting inspired by other UI's and styles; round robin chats on why we liked or disliked

Aspirations Moodboard (1).png

Figuring out tone and values

Put down-selected options into an inspiration board

Inspiration Board (2).png

Final Design Principles

Principles (1).png
Concepting

- THE HANDOVER -

Design Documentation

- PIXEL PERFECT -

Example Redlining

Showing the pixels 

Example Redlines - Gallery View Page (1).png
Example Redlines - Checkout Page (1).png
Product 3 (1).png

- WRAPPING IT UP -

Summary

- PROCESSING THE JOURNEY -

Reflection

My teammates and I all loved indoor plants, so when we had to do an e-commerce site on something--it had to be plants. I enjoyed being lead designer and it felt good to help junior designers without a formal design background to learn the skills to be a designer. I was really happy with the team's ability to pick up Figma on the fly (with a little assistance) and grow while stepping up and doing high quality work in a tough fall quarter. 

​

Overall, this was a surface level interface design exercise with enough time built in to really get into designing. There wasn't much research or innovation done, mostly focused on look and feel--which as a designer, I appreciated. It was much like a team-based studio art course.

bottom of page