Boutique Client Website Design & Development

Delivered a full end-to-end marketing website tailored for a boutique client, blending thoughtful UX design with responsive, accessible development to elevate their digital presence.

Online illustrations by Storyset

Background & Purpose

This project marks my first comprehensive website design and development engagement for a boutique client. The process began with gathering detailed requirements through multiple collaborative sessions. Using Trello for organized feedback collection and Figma for interactive mockups, I ensured that the client’s vision was clearly translated into design. The website was developed with Astro, utilizing Tailwind CSS, Flowbite, and JavaScript for a performant, scalable, and mobile-optimized final product.

Design Process

Discover

Initiated the project with in-depth client meetings to understand their business goals, target audience, and desired functionalities. Used Trello boards to systematically capture requirements and feedback, ensuring all stakeholder insights were documented.

Define

Synthesized gathered information to clarify project scope, key features, and design priorities. Established accessibility and mobile responsiveness as core objectives to maximize user engagement and inclusivity.

Ideate

Brainstormed layout structures and content flows with the client, iterating on potential user journeys. This phase guided the creation of wireframes and interactive mockups in Figma, providing a visual foundation for design decisions.

Design

Translated wireframes into high-fidelity designs using Figma, incorporating client feedback through multiple review sessions. Focused on a clean, modern aesthetic aligned with brand identity and usability principles.

Review

Conducted usability testing with client involvement to validate design choices and gather iterative feedback. Refined UI components and functionality before final handoff to development, ensuring alignment with client expectations.

Figma MockUp

Below are the visual breakdowns of my website design, separated into key structural components: the main hero section, the interactive gallery, and the footer. Each part is tailored to enhance user engagement and visual hierarchy.

Main section mockup

Hero Section: Features a bold CTA with a blog carousel to highlight recent posts and drive engagement.

Middle section mockup

About & Services: Introduces the brand and showcases offerings in a responsive six-card layout.

Main section mockup

Service Details: Each card links to a full page with in-depth info, benefits, and an embedded contact form.

End section mockup

Resources: Organized with Flowbite tabs to browse blogs, downloads, and guides efficiently.

Main section mockup

Blog Pages: Supports deep content reading, newsletter sign-ups, and future integration for tools like contract uploads.

Full Page Overview

The complete site integrates branding, structure, and scalability into a cohesive scroll experience across all breakpoints.

Full scrollable composite of boutique website

Full scroll view of the completed site

Technical Skills Obtained & Tools Used

  • Web Development

    Developed and deployed a performant, full-stack marketing website using Astro, Tailwind CSS, Flowbite, and JavaScript, with a focus on scalability and responsive design.

  • UX/UI Design:

    Designed interactive, accessible mockups in Figma and refined the user experience through usability testing and iterative client feedback.

  • Project & Client Management:

    Led end-to-end project delivery by gathering requirements, managing feedback in Trello, and maintaining clear communication with stakeholders throughout the process.

  • Workflow & Tooling:

    Utilized GitHub for version control and documented scalable features like newsletter integration and contract tools to support future expansion.