Case Study | ecoji
Mobile-Responsive Eco-Friendly T-Shirt E-Commerce Site
Challenge
To create a mobile & web-responsive e-commerce site that promotes eco-friendly t-shirts
Focus
Branding & Logo Design
Happy Path with Guest Checkout Page
Mobile & Desktop Screens
Role & Tools Used
UX/UI Designer
Figma
Prototypes
Moodboard & Logo Design
Logo Name and Mark
Wanted to have eco in name to convey eco-friendly
Went for more circular shape in logo name and mark
Designed mark to be visible in browser tabs
Started with Josefin Sans for base font then customized using pen tool in Figma
Moodboard Creation
Eco-friendly branding + logo
Practical clothing for everyday wear
Primary Color #ABCBA9:
Soft green representing the earthSecondary Color #092C5A:
Strong blue inspired by the oceansAccent Color #FFFBD1:
Yellow for a pop of color & contrast against blueChrome tabs to see how logo mark would appear from a distance and in dark/light mode
Checkout User Flow
High-Fidelity Screens | Mobile
High-Fidelity Screens | Desktop
Guest Checkout Flow Screens | Desktop
Key Takeaways
Future Features
Featured clothing section
Mobile filter screen
Variants + design system
Nice to have: error states
Lessons Learned
The devil is in the details
From line spacing to microinteractions, it definitely takes time to make sure all the details are there!Don’t underestimate the grind
It’s crazy how much time passes when I’m designing.
My favorite part of designing the custom logo name and mark!