2 Months
Product Designer
E-commerce
What is Evergreen?
The Problem Statement
Finding the right plants for homes, offices, and gardens is difficult because of:
Environmental Fit: Struggling to identify which plants work for indoor or outdoor spaces.
Plant Care Knowledge: Difficulty in understanding how to care for specific plants.
Health: Plants that purify air and meet pet-friendly requirements for a safe, healthy environment.
Aesthetic Needs: Plants that complement personal style, enhancing decor with natural beauty.
Solution
Evergreen, offers this:
Exclusive Selection – Access to rare & premium plant varieties.
Details Plants Info– Help weather plant is for indoor, outdoor or pet friendly
Expert Plant Care – AI-powered plant care with instant plant scanning.
Plant Identify – Instantly find plants with AI-powered scanning.
Research Insights:
Plant Care: Users don't know how to take care of their plants, so plant selection is difficult.
Competitive Analysis
Identified Gaps and Opportunities in exciting brand.
What could ideal solution offers
After combining research insights, personas and compititve analysis. I was able to visualize how the solutions might look like
User Flow
This stage defines all user pathways and flows, ensuring a seamless experience by following established e-commerce patterns.
Users spend most of their time on other sites. This means that users prefer your site to work the same way as all the other sites they already know
Aesthetic-Usability Effect - UX Law
"Users often perceive aesthetically pleasing design as design that’s more usable"
Onboarding Flow
The onboarding experience highlights the product’s value while seamlessly introducing users to the app’s story.
Login & Sign Up
User Can login using mobile number, email id, google, facebook and Apple id.
Home Screen
I have given the user a choice of only four plant categories, making it very easy for them to identify which plant they want.
Plant Detail flow
Based on research insights, users prefer having everything included on one page. A scroll feature, providing an AR, 360-degree view of the plant with photos, and also highlighting the plant details.
Plant Scan
Based on research insights, users prefer to receive information about a plant after scanning it, and they also want the option to purchase the same plant for themselves.
AR & Customized Pots
Users can discover plants suited to their location and customize pots to their preferences.
Order Flow
Users can discover plants suited to their location and customize pots to their preferences.
Design System
I created a style guide to maintain consistency across designs. It includes colors, typography, spacing, elevations, and icons, ensuring a cohesive visual language throughout the product.
Style Guide
Extract the fundamental building blocks of your product from the patterns identified during the audit and organize them into a clear, human-readable format.
Refine them as and when needed
❖ Color System
❖ Typography
❖ Grid
❖ Iconographic
Color System
A monochromatic color scheme uses a single strong color with multiple variations of that color. The most common approach is to have one main color and adjust its shades by applying 10-90% white or black overlays.
Sticking to one main color can be a smart choice, as simplification often helps in introducing new concepts effectively.
😎 Gold
We assign proper names and variable properties to colors, ensuring the product's future growth and scalability.
Primary Color
We used green in the Evergreen app because it symbolizes nature, growth, and health—core themes of the app. It's calming, visually appealing, and creates a strong, authentic brand identity while enhancing usability through a clean visual hierarchy.
Primary Green
Hex #1A7439
AA 4.05
25
#F7FAF5
AA 4.05
50
#EFF5EA
AA 4.05
100
#D8E6CC
AA 4.05
200
#9DC3AA
AA 4.05
300
#6FA782
AA 4.05
400
#438D5D
AA 4.05
500
#1A7439
AA 4.05
600
#166330
AA 4.05
700
#125228
AA 4.05
800
#0F4220
AA 4.05
900
#0C341A
Neutral Color
We experimented with neutral colors by deriving shades from blue. This approach keeps our product looking fresh and clean.
Hex code
#172B4D
AA 4.05
0
#FFFFF
AA 4.05
100
#F1F2F4
AA 4.05
200
#EBECEF
AA 4.05
300
#DCDFE4
AA 4.05
400
#B3B8C4
AA 4.05
500
#8590A2
AA 4.05
600
#758195
AA 4.05
700
#626F86
AA 4.05
800
#44546F
AA 4.05
1000
#172B4D
AA 4.05
1100
#091E42
Accent Color
An accent color is used to highlight key elements in a design, such as buttons, links, or important text, to create visual emphasis and improve user experience.
Typography System
Fonts set the mood of a product. We prefer geometric fonts because they have distinct shapes and lines, offering a modern and minimalistic aesthetic.
We selected these two geometric fonts for their modern and minimalistic appeal.
Plus Jakarta Sans
Display, Heading, Label
Ag
Medium, Semibold, Bold
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 !@#$%^&*()
Inter
Paragraph
Ag
Regular
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 !@#$%^&*()
We implemented a proper naming system with variable properties. Plus Jakarta Sans is ideal for displays, headings, and labels, while Inter provides better readability for paragraphs.
Icon Size - Radius
Padding - Spacing
Icons
Single tone
6
Doul tone
Component Libarary
Extract the components identified during the audit and define all possible use cases to ensure reusability and consistency.
Conclusion
Through a user-centered design approach that focused on actual user needs and business objectives, I developed an easy-to-use plant discovery and care application. The project had all the necessary features like plant categorization, AR visualization, and in-depth care information.
The iterative testing and feedback cycle guaranteed that the end product was in line with both business and user goals, providing an entertaining experience that users could have while discovering and taking care of plants.
The Perfect Plant Awaits You!
Find a plant that matches your vibe, space, and care needs effortlessly.
Thank you for Reading!
I would be happy to hear your feedback
