HomeAbout
Common Studios
– PDP Design
Contact me
Filipsoderlind@gmail.com
Linkedin
Filip Söderlind
About
In a collaborative workshop with the design studio Grebban, we had the opportunity to work on an exciting project for a fictional fashion brand called Common Studios.
Team
Filip Söderlind, Linnea Thorslund, Ebba Pettersson
My Role
UI Designer
Tools Used
Figma
The
Brief
Our task was to create a visually appealing and user-friendly Product Page (PDP) for Common Studios website. The main objective was to strike a balance between conversion-focused design and brand awareness. We were tasked with presenting the designs in a mobile format (specifically iPhone 14, 390x844) and creating the brand's unique visual identity and defining its UI vision and values.
Understanding the target customer
We narrowed down our target audience to expressive individuals, both men and women aged 20-30, with a keen sense of style and an appreciation for high-quality clothing.
Inspiration
To guide our design direction, we created a moodboard that captured the desired aesthetic. We wanted to showcase a significant portion of the product and decided to incorporate Dark Mode, a unique feature that stands out among competitors in the e-commerce industry.

While white backgrounds traditionally have better conversion rates, the growing popularity of Dark Mode motivated our decision. The dark background creates a striking contrast and enhances the visual impact of the content. We aimed to evoke a sense of toughness, action, and excitement through our design choices.
Visual identity
We established a style sheet that employed a lower line height in headings to achieve a sleek and sophisticated feel, while higher line height in paragraphs enhanced readability. Additionally, we selected a slightly smaller font size to create a premium impression. The notification icon, strategically placed within a button, aimed to prompt conversion even when a product is out of stock.

The "Buy" button utilized the brand's strong complementary color as the default, drawing attention to the purchase action. The high contrast between black and yellow ensured that the button would not go unnoticed, and its large size covered the entire screen, maximizing visual impact and capturing extra attention.
Design System
During our design process, we created a design system in Figma to establish consistent visual elements and streamline our workflow. We paid attention to details such as the notification icon within the button, which contributed to potential conversions. The paragraph text had a higher line height to enhance readability and accommodate dark mode.
Outcome
The result of our project is a PDP design that reflects the sophisticated and contemporary aesthetics of Common Studios. With a focus on conversion and brand awareness, we presented the brand's UI positioning and values. The mobile PDP, designed specifically for the iPhone 14 with a viewport of 390x844, provides an intuitive and visually appealing user experience.

By incorporating Dark Mode, we differentiated Common Studios from its competitors, capturing attention and evoking a sense of excitement. Our design choices, such as the strategic placement of the notification icon, emphasized the potential for conversions even when products are out of stock. Through careful attention to typography, color contrast, and visual elements, we aimed to create a compelling PDP that reflects the brand's essence and resonates with its target audience.

Note: The "Common Studios" brand and associated details were provided by the design studio "Grebban" as part of the workshop.
Contact me
Filipsoderlind@gmail.com
Linkedin
Filip Söderlind