hannah wilson art
The Product
An e-commerce Shopify website dedicated to selling original artwork, prints, and apparel for local artist Hannah Wilson.
project duration
3 months
My Role
Solo Product Designer & Developer (End-to-End)
My Responsibilities
-
Research & Strategy: Competitor analysis and information architecture.
-
UX/UI Design: Brand refinement, wireframing, and interactive prototyping.
-
Development: Complete front-end Shopify website implementation and launch.
The Problem
The client’s original website was trying to do two vastly different jobs at once: sell e-commerce retail products and book high-end event services (Live Painting Co). This structural overlap confused users, diluted the distinct brand identities, and stifled online retail sales.
The goal
Split the original website into two distinct digital properties, completely isolating the e-commerce store onto Shopify to streamline the buyer journey, clarify her retail brand identity, and increase online sales.
Research+ Discovery
Because this project operated on a fast three-month timeline, I focused my research phase on market benchmarks and understanding the target buyer archetypes for independent art.
Competitive Analysis
-
Key Finding 1: Information Architecture
-
Successful art e-commerce sites separate "original works" (high investment, low quantity) from "prints & apparel" (accessible investment, high quantity) early in the user journey.
-
-
Key Finding 2: User Friction)
-
Competitors who mixed booking services (like workshops or live events) into their retail product catalog had a highly fractured user experience. The checkout flows for a physical product versus a scheduled service felt clunky and forced users to navigate entirely different sets of form fields, creating massive visual and cognitive friction.
-
USer personas
Based on Hannah's existing market presence and sales history, I mapped out four distinct user personas. This exercise quickly revealed that the original single website was trying to serve completely conflicting user intents.
E-Commerce Shopper:
Cara, 26 | Local Market Fan
A young professional with a steady income who loves the Colorado mountains. She discovered Hannah at a local market and is visiting the online shop to buy more apparel and prints for herself.
Design Focus: Easy navigation to browse catalog extensions.
Quote:
"I loved meeting Hannah at the market, and now I’m back online to snag that sweatshirt I couldn't stop thinking about. I want my apartment and closet to feel like Colorado."
E-Commerce Shopper:
Anne, 45 | Fine Art Investor
A homeowner with a comfortable disposable income who wants to invest in an original, one-of-a-kind statement piece for her living room. She values authenticity, loves supporting independent artists, and wants to make sure a high-value canvas will arrive safely.
Design Focus: High-resolution texture imagery, clear scaling/dimensions, and transparent shipping/handling logistics for premium artwork.
Quote:
"I am looking for a beautiful, original painting that will be the centerpiece of our living room. Since it’s a significant investment, I need to see the fine details clearly and feel confident that this one-of-a-kind piece will ship securely."
E-Commerce Shopper:
Jasmine, 19 | Budget Brand Advocate
A college student and long-time social media fan. While she can't invest in original fine art, she actively supports the brand by purchasing lower-budget items like stickers and hats.
Design Focus: Prominent visibility for accessible merch and apparel.
Quote:
"I've followed Hannah on Instagram for years and love her style. I can't afford an original canvas yet, but I love packing my laptop and water bottle with her stickers to support her."
The outlier:
Sasha, 33 |
Live Art Commission
A high-income bride-to-be in Telluride looking to hire a local artist for an elaborate mountain wedding painting.
The UX Friction: Sasha doesn't want an e-commerce shopping cart; she needs a high-end service inquiry flow, booking calendar, and portfolio gallery.
The Strategic Pivot: Seeing Sasha's user journey side-by-side with Cara, Anne, and Jasmine made the core UX problem obvious. Forcing a high-end service client (Sasha) into the same digital space as a retail shopper damaged the user experience for both. This insight directly guided my restructuring of the information architecture.
Quote:
"We are planning an unforgettable mountain wedding, and I want a live painter to capture the magic of our day. I need to see her past event portfolio and know how to book her immediately."
Information architecture + Site Map
The biggest structural challenge was untangling the information architecture. The original website mixed retail products with premium live-event inquiries. To maximize e-commerce conversions, I designed a streamlined, flattened site map for the new Shopify store that keeps the checkout path clear while elegantly routing outlier service traffic away via a distinct global header link. I also created a user flow, which traces how a retail shopper seamlessly navigates from the mobile homepage to an accelerated 1-click checkout for a hat, ensuring a frictionless path to purchase.
Sitemap of new Shopify store that keeps the checkout path clear while routing service traffic away via a distinct header link.
User flow: Discovering and purchasing a Hannah Wilson Art hat
From blueprint to high-fidelity: Translating concept to code
This section demonstrates the progression from skeletal digital wireframes focused on information hierarchy to polished, high-fidelity prototypes that bring Hannah's vibrant, Colorado-inspired artwork to life within a high-converting Shopify framework.
Digital Wireframes
My primary goal during the wireframing phase was to map out a content hierarchy that placed products at the absolute forefront, removing any visual clutter that could distract from conversion. I focused on designing clean, scannable layouts that would ensure a seamless browsing experience on mobile devices, where the majority of retail traffic lands.
Mobile homepage:
Dedicates maximum screen real estate to impactful imagery of Hannah and her art alongside a global menu, using a structured grid just below the fold to instantly guide users to new arrivals and best sellers.
Mobile product page:
Allocates the top half of the screen to high-resolution product imagery while packing the title, price, and 'Add to Cart' button into the immediate viewable area to enable quick, scroll-free mobile conversions.
Mobile homepage
Mobile product page
High-Fidelity Prototypes
By pairing high-resolution imagery of Hannah’s vibrant artwork with a carefully curated typography scale and cohesive brand identity, I transformed the foundational wireframes into a polished, responsive digital experience. This final interface highlights optimized mobile layouts, fluid interactive transitions, and an intuitive browsing flow built to elevate user trust and maximize retail conversions.
Accessibility considerations
-
Color Contrast compliance
Ensured all text elements, category labels, and call-to-action buttons meet WCAG AA standards against their backgrounds, keeping the interface highly readable for low-vision users.
2. Accessible touch targets
Optimized all interactive elements on mobile including the global header menu, product variant pickers, and the "Add to Cart" button to maintain a minimum touch target size of 44X44 CSS pixels with ample spacing to prevent accidental taps.
3. PLAIN LANGUAGE + CLEAR INFORMATION HIERARCHY
Streamlined the navigational copy and flattened the site structure to ensure the shopping experience remains approachable and intuitive for beginners, avoiding confusing jargon.
Final Takeaways
Impact + Business success
Following the launch of the newly restructured digital flagship, the client experienced an immediate surge in both traffic and sales conversion. By isolating her retail offerings onto Shopify, the streamlined, mobile-first design successfully captured immediate intent and eliminated payment friction for her growing fan base.
Lessons learned
-
The Power of Simplified Information Architecture: I learned how flattening a site navigation directly influences conversion. By grouping products into clear, shallow categories, we drastically reduced user cognitive load and proved that a shorter path to purchase yields better business outcomes.
-
Balancing Brand Artistry with E-Commerce Best Practices: As a designer, it was incredibly rewarding to find the sweet spot between showcasing Hannah’s vibrant, organic fine art and maintaining a rigid, highly structured e-commerce layout. I learned that great visual design should always serve to elevate the product, never distract from the transaction.
Client Testimonial
"Working with Kass on my Shopify site was a wonderful experience. I would recommend her to anyone considering refreshing or switching over to Shopify. She was incredibly adaptable and easy to work with throughout the entire process. I really appreciated her attention to all the little details that made my site feel just right. Kass kept things organized by providing helpful lists and regular check-ins, which made everything so much easier on my end. She was very responsive. At the end of the project, she went above and beyond by sending me detailed videos explaining how to add new products and manage the site going forward. I feel confident and supported thanks to her guidance! I know if anything comes up or I need any changes she will be able to help! "
— Hannah Wilson, Artist & Founder of Hannah Wilson Art + Live Painting Co.