
.png)
.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.
.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
.png)
.png)
Category Page
.png)
.png)
Product Page
.png)
.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
.png)
Sign In & Password Reset
.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.
.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.
.jpg)
- OUR IDEA -
SWOT Analysis
We scrutinized our idea with a SWOT Analysis.
.jpg)
- ORGANIZING OUR THOUGHTS -
Affinity Diagramming
We used affinity diagramming to align and organize our thoughts.
.jpg)
- MAKING A BLUEPRINT -
Mind Map, Early Information Architecture
Figuring out how to navigate the website
.jpg)
Final Sitemap
.png)
- THE BRIEF -
The Final Project Brief
The basic plan for the Flourish website.
.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.
.png)
.png)
Getting inspired by other UI's and styles; round robin chats on why we liked or disliked
.png)
Figuring out tone and values
Put down-selected options into an inspiration board
.png)
Final Design Principles
.png)
- THE HANDOVER -
Design Documentation
- PIXEL PERFECT -
Example Redlining
Showing the pixels
.png)
.png)
.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.