Designing an Adaptive Boutique E-Commerce
Website
Overview
COTT is a premium clothing and accessories brand for women and men, proudly operating in France. Specialising in 100% cotton garments, COTT stands apart with its commitment to quality, sustainability, and timeless fashion—steering away from fast fashion trends. Each piece is crafted with unique designs by skilled designers, ensuring exclusivity and authenticity.
For this project, after the UX design phase was completed, we were entrusted with the UI design to bring the brand’s vision to life. We developed the website’s UI, aligning it with the suggested style and color palette to reflect COTT’s refined aesthetic and values.
Role
Platform
Process
Duration
Tools
Team Size
UI Designer
Desktop/Mobile
Discover, Define, Ideate,Implement
3 months
Figma, FigJam, Photoshop
2 Members
#Kickoff
UX Handoff
Based on the wireframes provided by the UX team, we initiated the first phase of the visual design process with several key insights in mind. These wireframes served as a solid foundation to ensure alignment between user needs and business goals from the very beginning.
Our focus during this stage was to:
Highlight diverse product categories to allow users to easily explore and find items aligned with their interests.
Communicate the brand’s core values, such as quality, sustainability, and authenticity, ensuring users quickly grasp the brand's essence.
Prioritise two main product categories that reflect business goals and seasonal demand, increasing visibility and driving sales.
#Inspration
Design Philosophy
From the beginning, our design philosophy was centered around expressing the brand’s values and business goals as naturally and authentically as possible. After thoughtful research and exploration, we concluded that the best way to achieve this was by drawing inspiration directly from the cotton plant itself—the core material behind all of the brand’s products.
We focused on incorporating smooth transitions, soft shapes, and a color palette inspired by cotton fields and natureto create a visual experience that felt organic, fresh, and light. Our goal was to ensure that users, from the moment they entered the website, could immediately sense what the brand stood for and what its priorities were, all while enjoying a visually pleasant and inviting experience.
#inspiration
Mood board
After receiving the website structure from the UX team, it was time to define its visual direction. To capture the overall look and feel, we created a moodboard that reflected the style, tone, and atmosphere we wanted for the final design.
#assets
UI-Kit
#Core
Communicating the Brand’s Identity Through Visuals
One of our first challenges was selecting a strong, expressive visual element that would instantly reflect the brand’s essence. The founders emphasised that users should immediately understand that the products are made from 100% cotton. After analysing competitor websites and conducting multiple rounds of user testing, we determined that a short GIF—taken from a brand promotional video—could quickly and effectively communicate this message. This visual became a key part of the landing page experience, establishing trust and setting the tone for the website
#Visual
Balancing Aesthetics and Function with Unique Card Design
In line with our philosophy of emphasising softness and natural flow, we chose arch-shaped frames for the product cards. Initially, we hesitated, unsure if this unconventional shape would impact usability. However, after several rounds of testing, we found that the rounded frames successfully evoked the softness and delicacy associated with the brand’s cotton products. The form both differentiated the brand visually and reinforced its key values.
#Test
Validating Our Design Choices Through Testing
This design decision was the result of careful research, brainstorming, and collaboration with the client. Although the arch shape was a relatively new and risky choice for web cards, user testing showed overwhelmingly positive results. Users connected emotionally with the visual softness and appreciated the uniqueness of the design, giving us the confidence to move forward.
#Values
Using Color to Evoke Emotion and Communicate Values
We strategically incorporated a soft green color in one of the website’s sections to highlight the brand’s themes of vitality, freshness, and natural purity. This design choice encouraged users to pause while scrolling, drawing their attention to the brand’s story and values. Feedback from testing sessions confirmed the success of this approach—users described feeling a sense of softness, freshness, and even an almost “scented” experience. This emotional connectionhelped reinforce the brand’s authenticity and inspired greater trust and interest in the products.
#Action
Designing Interactive Cards to Drive User Action
For the final part of the landing page, following the structure provided by the UX team’s wireframes, we designed two interactive cards to guide users toward action. The first card, titled “Last Chance,” directs users to a page showcasing the latest items from the current collection. The second card, temporarily titled “Holidays,” is designed to be flexible — its title and content will adapt to future seasonal collections or promotions introduced by the brand.
To maintain visual harmony and emotional flow, we placed these cards on a soft background color inspired by the natural tones of cotton field soil. After the fresh green transition in the previous section, this subtle, earthy tonecreated a calming visual closure. It gave users a moment to pause, reflect on their needs, and confidently move toward making a purchase — reinforcing both user-centered design and the brand’s business goals.
#Overview
prototype
Landing Page
Product Page
Cart Page
Payment Page
Categories page
Item Page
Login Page
Summry Page
Product page
Overlay Cart
Shipping Page
Confirm page
#Design
Wire framing (Mobile)
Design Approach
For the mobile version, we maintained the main structure but adapted the design to ensure it was easy to use and navigate on smaller screens.
#Steps
Next
Conducting post-launch usability testing to evaluate how well the design communicates brand values.
Updating the dynamic content areas regularly to align with seasonal collections and campaigns.
Collaborating with the development team to ensure smooth transitions and animations perform well across all devices.
#Learning
Takeaways
Using natural elements (color, form, movement) effectively conveys brand values.
Visual storytelling builds emotional trust and strengthens brand perception.
User testing validates design risks and informs confident decisions.
Flexible components support seasonal updates and evolving content.
Smooth collaboration with the UX team ensures alignment with business goals.
Subtle design choices (like transitions and color shifts) influence user behavior.
Consistency in tone, shape, and flow creates a cohesive experience.
A thoughtful design philosophy helps guide decision-making at every stage.
