Grebban x Common Studios

Common Studio is in need of a new Product Detail Page (PDP) that seamlessly balances conversion optimization with a strong brand identity. The goal of this project is to design a user-friendly and visually cohesive product page that aligns with Common Studio’s design values while effectively driving sales.

To ensure the PDP meets the project’s requirements, the design must be guided by the MoSCoW sheet, which outlines essential features, and the PIM system, which structures and manages product information. A careful approach is needed to develop or configure the PIM system in a way that supports the specific needs of the page. Additionally, Common Studio’s position in the market should be clearly defined to identify opportunities, guide design decisions, and differentiate the brand from the competition.

The brand identity has already been established, and designers will have access to key assets, including the logotype, typefaces and also product images. These elements must be integrated into the design to ensure consistency and maintain the brand’s visual language.

Given the mobile-first approach, the design should be optimized primarily for iPhone 14 (390x844px). It is crucial to avoid scaling issues on smaller screens while ensuring that the layout remains intuitive and engaging. The final design will be presented in prototype mode from a local computer, offering an interactive preview of the user experience.

The PDP must strike a balance between enhancing conversion rates and preserving Common Studio’s brand expression. This means incorporating clear calls to action, engaging visuals, and a well-structured product hierarchy that makes information easy to navigate and compelling to explore. Accessibility is also a key priority, and the design must meet AA contrast requirements to ensure readability and inclusivity for all users.

In addition to delivering a high-fidelity prototype, the project will include a document outlining the reasoning behind key design choices, as well as an accessibility audit to confirm compliance with best practices. The end result should be a polished, conversion-driven, and brand-aligned product page that strengthens Common Studio’s digital presence while setting it apart from competitors.

‍

The final design of Common Studios' PDP seamlessly balances brand identity, user-friendliness, and conversion optimization. Following a mobile-first strategy, the design has been optimized for the iPhone 14 (390x844px), ensuring a responsive and scalable experience on smaller screens.

The product page follows a clear information hierarchy, highlighting key product details and benefits in an easily accessible way. CTA elements are strategically placed to drive conversions, featuring prominent buttons and animations that help users quickly notice important information and discover related products.

The visual identity remains consistent throughout, integrating the brand’s logo and typography based on Common Studios' established brand profile. To ensure flexibility across different formats, an alternative logo version was created, emphasizing the double "M" in "Common" for increased visibility. The visual design takes inspiration from a blend of Japandi and Brutalism, resulting in a large grid, distinct colored lines, oversized buttons, and generous typography. Together, these elements create a clean, modern layout that balances aesthetics and functionality.

To enhance the user experience, the navigation has been designed to be intuitive and seamless. Product information and specifications are structured for readability, with dynamic sections that allow users to explore details without overwhelming the page.

The color palette and typography were chosen with clarity and accessibility in mind, resulting in two primary colors: a cobalt blue and a light citrus yellow. This high-contrast combination meets AA contrast requirements, ensuring readability and inclusivity, particularly for users with visual impairments. A red accent color is used for "Sale" tags to create strong recognition for discounts and promotions.

Product images take center stage in the gallery section and are also featured in carousels to encourage additional purchases through sections like "You might also like" and "Style with." All images are presented in high quality to create an inspiring and engaging shopping experience.

The end result is a polished, conversion-driven, and brand-aligned product page that strengthens Common Studios' digital presence. By clearly positioning the brand in the market, the design helps differentiate Common Studios from competitors while delivering a more engaging and effective shopping experience.

‍