Brand Outlet Mall

Inspiration

Living in the US, I’ve always loved TJ Maxx-style discount shopping but wanted a digital experience that matched the thrill of in-store finds—without compromising on authenticity. I saw a gap: European and American shoppers crave genuine branded deals but struggle with inconsistent sizing, missed flash sales, and complicated returns. That’s where Brand Outlet Mall was born: to blend the trust of authentic products with the convenience of personalized, region-friendly online shopping.

What it does

Brand Outlet Mall is a single-page e-commerce platform for 25–55 year-old shoppers seeking genuine premium brands at up to 70% off. It features brand filtering, real-time price-drop alerts, a US/EU/UK size finder, and a streamlined returns process—all wrapped in a visually cohesive, responsive design tailored to Western shopping habits.

How we built it

I started with Figma to map the UI/UX, aligning with Western left-to-right flow and high whitespace for readability. I coded the core with HTML5/CSS3 (TailwindCSS for rapid styling) and JavaScript, using React for component structure. Key features: Intersection Observer for scroll animations, CSS marquee for the trust strip, and custom validation for email signups. I tested responsiveness across desktop/tablet/mobile to ensure touch-friendly tap targets and collapsed grids for smaller screens.

Challenges we ran into

The biggest hurdle was balancing smooth animations with performance—overusing JS animations caused lag on mobile, so I shifted to lightweight CSS transitions and optimized Intersection Observer triggers. Another challenge was ensuring the size finder logic worked for all region/category combinations, requiring robust conditional checks to avoid empty state errors.

Accomplishments that we're proud of

We created a seamless, brand-aligned experience that feels premium (matching the target audience’s expectations) while remaining fast and accessible. The hover micro-interactions (card lifts, button pulses) and scroll animations add joy without distraction, and the cart badge persistence (via localStorage) adds functional polish. Most importantly, the design adheres to Western usability norms while solving region-specific pain points (size conversion, return convenience).

What we learned

I deepened my understanding of responsive design for Western markets—prioritizing readability, touch targets, and visual hierarchy. I also learned to balance aesthetic flair (gold accents, gradients) with performance, and how to build user trust through clear authenticity badges and transparent return policies (key for Western shoppers).

What's next for this project

Next steps include adding live product data integration (via e-commerce APIs), user account functionality for saved deal alerts, and multi-currency support (USD/EUR/GBP). I also plan to optimize for SEO (Western search trends) and add A/B testing for CTA button copy to boost conversion rates. Finally, I’ll integrate a mock checkout flow to complete the shopping experience.

Built With

• css3
• html5
• javascript
• react
• tailwindcss