Crafting a Responsive, Mobile-First Experience: Building The Cookie Company Website with Bootstrap & Mailchimp

This passion project highlights my ability to combine user experience design (UX), responsive front-end development, and digital marketing integration. By designing a custom, mobile-first site coded without templates, I demonstrated how strong UX/UI principles, interactive features, and email marketing work together to create a seamless brand experience.

Web Design Case Study: The Cookie Company

Role: Web Designer & Developer | Year: 2023 

Overview

The Cookie Company is a conceptual brand where I applied industry-standard workflows to create a scalable, responsive digital experience. The project involved:

  • Designing multi-device wireframes and high-fidelity prototypes in Adobe XD.

  • Developing a multi-page responsive website using Bootstrap 5, HTML5, and CSS3.

  • Adding lightweight interactivity using AI-assisted JavaScript snippets to enhance user engagement.

  • Extending the digital ecosystem with a Mailchimp email marketing campaign.

By treating this as a real-world engagement, I applied professional workflows — research, wireframing, prototyping, and development — with the same rigor I bring to client projects today.

Challenges & Solutions

Challenge 1: Designing without templates while ensuring usability

Solution: Conducted competitor analysis and applied UX research to create low-fidelity wireframes. Built high-fidelity mockups and prototypes for desktop, tablet, and mobile in Adobe XD, focusing on clean layout, intuitive navigation, and conversion-focused content blocks.

 

Problem 2: Achieving responsive layouts across devices

Solution: Implemented Bootstrap’s grid system with custom CSS and media queries. Created multiple image versions for the homepage cookie tray and used custom breakpoints to optimize responsiveness.

 

Problem 3: Adding interactivity without advanced coding

Solution: Integrated a Custom Cookie Builder feature using lightweight JavaScript snippets (assisted by AI). This allowed users to interact with cookie variations, showcasing adaptability and resourcefulness in bringing dynamic functionality to a static site.

 

Problem 4: Extending the brand experience with marketing

Solution: Designed a Mailchimp email campaign with five modular content blocks. The email design reinforced the website’s look and feel, supporting engagement and retention goals.

Process Highlights

  • X Research & Wireframes: Competitor analysis, low-fidelity sketches, validated navigation flows.

  • Prototyping: Interactive mockups in Adobe XD for three device sizes.

  • Front-End Development: Hand-coded HTML5 + Bootstrap 5 with custom CSS.

  • AI-Assisted Interactivity: Used targeted JavaScript snippets to implement the cookie builder feature.

  • Responsive Testing: Multi-device testing for accessibility and performance.

  • Digital Marketing Integration: Mailchimp e-blast designed for user engagement and conversion.

Outcome

  • Delivered a five-page responsive website: Home, Shop, Custom Cookie Builder, About, Contact.

  • Enhanced user experience with lightweight, AI-assisted interactivity.

  • Produced a cohesive email marketing campaign aligned with the site’s brand identity.

  • Demonstrated end-to-end digital design & development capabilities: from UX research to front-end coding to marketing integration.

Reflection / Key Learning

This project strengthened my ability to:

  • Apply UX/UI best practices to responsive, mobile-first web design.

  • Build clean, scalable front-end solutions using Bootstrap.

  • Integrate interactive features by leveraging AI-assisted coding tools.

  • Extend design impact into marketing touchpoints with email campaigns.

Future Scope: Add an e-commerce system and CMS integration to manage products dynamically, expanding functionality into a real-world business solution.

Scroll to Top