Painted Whims Redesign

Painted Whims

Painted Whims Boutique is a charming, local antique shop that specializes in curated vintage decor, professional structural repairs, and custom hand-painted furniture restoration. While the physical storefront exudes a warm, whimsical charm, its original digital presence felt cold, generic, and disconnected from the artisanal brand. The client needed a website redesign that not only showcased her beautiful, ever-evolving inventory but also met modern design and accessibility standards.

As the solo UX/UI designer, I rebuilt the homepage to bridge the gap between a modern ecommerce flow and a timeless, old-book aesthetic—all while creating a sustainable process for the owner to manage her content moving forward.

The Challenge

The original website suffered from a disjointed user experience and critical accessibility gaps. It relied on a stark, overly spacious layout with a light mint palette that failed to meet standard contrast ratios. Navigation was confusing, and the interface lacked clear call-to-actions, leaving users buried in blocks of text without a clear path to explore services. Furthermore, the client faced a technical hurdle: the site relied on outdated imagery because she lacked an easy, manageable way to upload new photos of her latest furniture restorations.

The Solution

I redesigned the Painted Whims homepage to balance a sleek, modern layout with classic, historical typography. Key elements of the redesign include:

Strategic, Accessible Color Usage: Honoring the client's favorite teal shade (#77BAB6), I used it intentionally for headers, footers, and structural accents, ensuring it never compromised text contrast ratios or readability.
Streamlined Information Architecture: Replaced a cluttered, redundant navigation bar with a clean, intuitive header and organized the core business offerings into a highly navigable, three-column layout (Antique Curation, Custom Restoration, and Boutique Decor).
Enhanced Visual Storytelling: Placed the boutique's stunning physical storefront at the center of the experience, paired with clear, actionable user flows like "Book a consultation" and "Browse Antiques."
Empowering the Client: Beyond the interface, I provided training to help the owner easily upload new photos of her work, ensuring her digital storefront stays as fresh and curated as her physical shop.

Design System & Accessibility

An antique boutique website should feel nostalgic and warm, but a digital interface must always prioritize clarity, readability, and inclusivity. For Painted Whims, the challenge was integrating the client’s brand-defining aesthetic while completely overhauling the original site's failing contrast ratios and confusing layout.

Reclaiming the Color Palette

The client’s signature color—a soft, muted teal (#77BAB6)—was central to her brand identity, but the original site used it behind dark text and in blocks that didn't meet standard contrast ratios.

To ensure the redesign met WCAG AA standards, I established strict parameters for how this color could be used:

The Rule: Because #77BAB6 is too light for body text and too light to safely host white text, it was completely removed from core text elements.
The Application: I utilized the teal strategically as a structural frame—appearing in the bold top navigation header, the footer, and as a border stroke around content cards.
The "Old Book" Detail: To bring in the antique vibe without sacrificing readability, I used the teal specifically for dropped capitals (the first letter of the paragraph) in her "About Me" summary, mimicking the styling of an old, leather-bound book while keeping the main text a high-contrast charcoal black.

Typography: Merging Modern and Timeless

The typography choices were intentionally paired to strike a balance between a sleek, navigable modern user flow and a classic, historical aesthetic.

Headers (The Antique Vibe): I introduced an elegant serif typeface for the headers (like Painted Whims Boutique and the section titles). Serifs naturally evoke a sense of history, tradition, and craftsmanship, tying beautifully into the boutique's curated atmosphere.
Body Text (The Modern Flow): For the descriptions and primary content, I selected a clean, highly legible sans-serif typeface. This ensured that chunks of text—like the descriptions under the service categories—remain incredibly easy to read at any screen size or resolution.

Layout & Navigability Transformation

The "Before" homepage suffered from an identity crisis—featuring both a mobile hamburger icon and desktop buttons simultaneously, alongside massive blocks of placeholder text that lacked visual hierarchy.

Intuitive Navigation: I consolidated the cluttered, overlapping header into a single, clean desktop navigation line with clear hover/active states (as seen with the underline indicator on "About," "Shop," and "Gallery").
The Three-Column Value Proposition: Instead of forcing users to read through dense paragraphs on either side of an image, I broke the business down into three clear, accessible buckets: Antique Curation, Custom Restoration, and Biotique Decor. Each column features an elegant icon indicator, a brief scannable description, and an explicit, high-contrast text link (e.g., Book a consultation), giving users an instant, logical path forward.

Client Training & Product Sustainability

A successful UX solution doesn't end when the design is finalized; it must also be sustainable for the person managing it. One of the primary business constraints for Painted Whims was that the original site relied entirely on outdated photos because the owner lacked a clear, accessible workflow to update her digital storefront with her latest furniture restorations.

The Handoff Strategy

To ensure the platform’s long-term success and empower the business owner, the handoff process included tailored training focused on content management:

Simplified Media Workflow: I mapped out a straightforward, step-by-step process within the backend content management system, standardizing image aspect ratios and file optimization tips so new uploads would never break the homepage layout.
Empowerment Through Education: By training the client on how to independently upload and rotate high-quality imagery of her latest curated vintage pieces and custom paint transformations, the website can seamlessly evolve alongside her physical inventory.

Final Impact & Takeaways

This project highlighted the delicate balance of merging a highly specific, physical brand aesthetic with modern web patterns. By keeping the brand's favorite teal accent off primary readable elements, pairing classical serif headers with a highly accessible body typeface, and building a structured layout, the Painted Whims digital presence now feels exactly like stepping into her brick-and-mortar boutique: welcoming, navigable, and beautifully curated.