Children’s Art Project Website

Overview

The Children’s Art Project (CAP) website serves as an online storefront for products decorated by artwork of young cancer patients with proceeds supporting programs for children with cancer. At the request of the CAP team, I completed an audit which revealed a number of usability, accessibility, and design challenges that impacted the user experience. I was tasked with redesigning the site and working with a contract agency to complete the project. This case study explores the issues identified in the original website, the design and development process for the redesign, and the final outcome.

Screenshot of homepage of old children's art project site
This is how the old site looked. The circle on the nav indicates where MD Anderson merchandise could be found, which we determined needed its own new experience as part of this redesign.

Before: Issues & Pain Points

My comprehensive audit of the original CAP website highlighted several key areas for improvement, including accessibility concerns, navigation difficulties, and overall visual inconsistencies. Below is a summary of the major pain points:

1. Accessibility & Contrast Issues

  • The dark gray body text lacked sufficient contrast against the white background, making it difficult to read.
  • White text on the periwinkle navigation bar and the dark gray “Add to Cart” button failed to meet WCAG AA contrast standards.
  • Text embedded in hero images lacked alternative text, making them inaccessible to screen readers.
  • Screen readers struggled with poor alt text for the site logo, which consisted of random letters and numbers instead of a meaningful description.

2. Design & Visual Hierarchy Challenges

  • The hero image carousel was ineffective in engaging users, with blurry images and cut-off text—especially on mobile.
  • The logo appeared pixelated, and the site’s color palette relied too heavily on the red from the logo without integrating it cohesively into the design.
  • A single font (Times New Roman) was used throughout the site, creating a lack of typographic contrast. Navigation text, in particular, needed a sans-serif font for improved readability.

3. Navigation & User Experience Issues

  • The main navigation contained an excessive number of links, causing it to wrap onto two lines, making it feel cluttered.
  • Some menu items were inconsistently categorized—for example, ornaments, accessories, and apparel were listed under “Gifts All” but also had separate menu items.
  • The “Home” link was unnecessary and could be removed to simplify the navigation bar.
  • Button link text was vague (e.g., “View All”), making it unclear what content users were navigating to. More descriptive labels were needed (e.g., “View All New Items”).

4. Product Display & Filtering Issues

  • Sold-out items were displayed without any clear indication of when (or if) they would return.
  • Sale items were difficult to identify due to weak visual differentiation.
  • The “Featured” filter lacked clarity—many featured items were sold out, making it unclear how products were selected.

5. Footer & Content Strategy Improvements

  • The site’s purpose and mission were not immediately apparent upon landing on the homepage. The About page was buried in the footer and needed to be moved to the main navigation.
  • External links in the footer did not indicate that they would lead users off-site, which could be confusing.

Redesign Goals

Based on these findings, I knew the website redesign needed to focus on the following objectives:

  • Improve accessibility by addressing contrast issues, revising text colors, and adding proper alt text.
  • Enhance usability by restructuring navigation, simplifying product categorization, and providing clearer button text.
  • Strengthen visual design by updating typography, refining the color palette, and ensuring images are high-resolution.
  • Optimize product listings by making sale and sold-out items more distinguishable and revisiting the filtering system.
  • Improve storytelling by emphasizing CAP’s mission on the homepage and restructuring content for a more emotional connection with visitors.

 

Screenshot of wireframes for new site navigation. Site structure includes a lot cleaner top level nav and a more organized approach to subnav.

Sitemap

Next, I developed a comprehensive sitemap to establish a clear and intuitive navigation structure. The sitemap outlines the main navigation, categorizing key sections such as Shop, About, Customer Service, Featured Artists, and Contact. The Shop section was further divided into product categories like Apparel, Accessories, Gifts, Ornaments, Cards, and Stationery, ensuring an organized browsing experience.

Additionally, customer service pages, including exchange, privacy, and shipping policies, were grouped for easier access. Key design considerations included improving user flow, refining category labels, and ensuring seamless front-end navigation. This step was crucial in laying the foundation for a user-friendly and visually engaging e-commerce experience.

 

Homepage Design: Exploration of Site Look and Feel

In this design phase, I explored two distinct visual directions for the Children’s Art Project homepage, aligning each with a different ReactJS theme to maintain consistency with the existing framework.

  • The first design (Design A) features a modern and clean layout, utilizing a minimalist aesthetic, neutral tones, and structured content blocks for a sophisticated shopping experience.
  • The second design (Design B, and the design we ended up selecting) takes a vibrant and artistic approach, incorporating bold colors, playful typography, and hand-drawn elements to emphasize the creative and heartfelt nature of the project.

Both versions prioritize user experience (UX) and accessibility, ensuring intuitive navigation, responsive layouts, and seamless integration with e-commerce functionalities. This step allowed for flexibility in selecting the most effective visual style to enhance engagement and support the project’s mission.

Full Website Design and Collaboration to Launch

After selecting the final look and feel and choosing the most suitable ReactJS theme, I proceeded to design the rest of the website for desktop and mobile, including:

  • Category and product pages – ensuring a clear shopping experience.
  • About and artist feature pages – maintaining an engaging brand story.
  • Customer service pages – providing easy access to policies and support.
  • Checkout and account pages – streamlining the user journey for conversions.

From this stage forward, I closely collaborated with the development and implementation team, providing design specifications, assets, and guidance to ensure the final product aligned with my vision. I also participated in design reviews, user testing, and iterations to refine the experience before launch.

This process resulted in a visually compelling, user-friendly, and mission-driven e-commerce website that effectively showcases the artwork and supports the project’s cause.

See the completed site