ClosetHer - Inclusivity, Green Apparel
The product page design for Closether incorporates several thoughtful decisions aimed at enhancing accessibility, usability, and inclusiveness. Here's a detailed explanation of these design elements:
Accessibility
- Contrast and Readability:
- The use of high-contrast text against the background ensures that the content is readable for users with visual impairments. The dark text on light background and vice versa help in reducing eye strain.
- Font sizes are sufficiently large and readable across different device screens, accommodating users with varying levels of vision.oard alone. This is critical for users with motor disabilities.
Usability
Responsive Design:
- The layout is responsive, meaning it adjusts seamlessly across different devices such as desktops, tablets, and smartphones. This ensures a consistent and intuitive user experience regardless of the device being used.
Clear Call-to-Actions (CTAs):
- Prominent CTAs like "Add to Cart" and "Shop Now" are clearly visible and easy to locate, guiding users towards the next steps without confusion.
Product Information Layout:
- The product details, specifications, and reviews are well-organized, allowing users to find the information they need quickly and efficiently. The use of tabs or sections can help in minimizing clutter and improving content discoverability.
Intuitive Navigation:
- The navigation bar at the top, with links to "Our Story" and "View Products," provides a straightforward way for users to explore the site. Breadcrumbs are used to help users understand their location within the site.
Inclusiveness
Diverse Representation in Imagery:
- Suggestions to use images that represent diversity in terms of race, gender, and body types can make more users feel seen and included. This also aligns with the brand’s message of empowerment.
Size Inclusivity:
- Offering a range of sizes (XS to L) ensures that more users can find products that fit them, promoting body inclusivity.
Price Visibility:
- Displaying the price clearly and including tax and shipping information helps users make informed decisions without feeling misled or needing to search for additional costs.
Conclusion
The design of the Closether product page effectively combines accessibility, usability, and inclusiveness, creating a user-friendly and welcoming experience for a diverse range of users. These design decisions ensure that the page is not only aesthetically pleasing but also functional and accessible to all.
Tools used
From brief
Topics
Share
Reviews
2 reviews
Good work Samuel! Liking the colour scheme and concept. With that said here are several pointers to help further improve your design:
- Inconsistent typography styling in the product title is jarring. Recommend aligning the product title font size to be consistent
- PDP buy box area has uneccessary white space between price & colour swatches which is inconsistent with element spacing. Ensuring all spacing is uniform will help improve scannability and cohesion of the design. Using the 8-point system could help here.
- Main navigation is overly simplified which may actually increase user friction through the funnel by forcing users to search through the entire catalogue. I would offer additional entry points to curated collections in order to reduce overwhelm and speed up path to purchase making sure this menu item is prioritised ahead of "About us".
Hope these points help turn up your design!
Since this is related to a course on accessibility, I'd like to highlight that the CTA (white text on light brown) and the menu items (light brown on peach background) show little contrast; I'm skeptical they would pass accessibility tests. I recommend checking them for improved accessibility (you can do so also with a Figma plugin directly in the app).
You might also like

Sojo NFT Marketplace

Heuristic Evaluation of Revolut Mobile App

From Idea to Full-Stack Web App

Hulu Through My Eyes - A Cinematic UI Exploration (unofficial)

Docto
