- INTRO -
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.
Lead Product Designer
Lead Visual Designer
Sept to Dec 2020
Fengwei Han (info systems)
Maisie Howard (psychology)
HCID 512: Interfaces Lab
- PLAY BY PLAY -
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.
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 -
- FLOURISH INDOOR PLANT E-COMMERCE WEBSITE -
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.
I created this demo of the sign-in micro-interaction made in Figma and Principle.
I challenged my teammates Maisie (home page) and Fengwei (product category) to create visually pleasing, consistent, and professional prototypes. I did the product page.
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.
Sign In & Password Reset
- COMPONENTS -
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.
- HOW WE DID IT -
- WHAT DOES THE MARKET LOOK LIKE? -
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.
- OUR IDEA -
We scrutinized our idea with a SWOT Analysis.
- ORGANIZING OUR THOUGHTS -
We used affinity diagramming to align and organize our thoughts.
- MAKING A BLUEPRINT -
Mind Map, Early Information Architecture
Figuring out how to navigate the website
- THE BRIEF -
The Final Project Brief
The basic plan for the Flourish website.
- ATTAINING CONSISTENCY -
Visual Design Process
- TEAM ALIGNMENT -
How do you align visually? By talking and showing. Here is how we aligned:
Rough brainstorming of colors, branding, lifestyle photography, typography, etc.
Getting inspired by other UI's and styles; round robin chats on why we liked or disliked
Figuring out tone and values
Put down-selected options into an inspiration board
Final Design Principles
- THE HANDOVER -
- PIXEL PERFECT -
Showing the pixels
- WRAPPING IT UP -
- PROCESSING THE JOURNEY -
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.