Casablanca Paris
UI
Ecom
Design system
Simple and elegant UI design for a luxury fashion brand
I was brought in to redesign Casablanca's website and bring an element of refinement and luxury to newly created wireframes. Working within the confines of Shopify, a new website and component-based design system was crafted, along with interactions and animations.
Homepage
Objectives
1
Apply a refined luxury aesthetic to the provided wireframe structure
2
Build a component-based design system tailored to Shopify's constraints
3
Define interaction patterns and animations to enhance the interface
Deliverables
Design system
Component library
Full website design
Motion guidelines
Homepage
Homepage
Homepage
Adaptable logo colours to suit every campaign
Homepage variations
Responsive design
Product Listing Page
We wanted to inject some elements of brand storytelling in the PLP with use of large editorial images and promo panels. We also added some micro interactions to make a more user friendly experience.
PLP
PLP
PLP
PLP
PLP cards
PLP filters
Product Display Page
Simplicity and elegance was key for the PDP. The goal was to allow the product images to shine, whilst ensuring easy access to key functionality in order to maximise conversion.
PDP
PDP
PDP
PDP select colour
Basket
World of Casablanca
The World of Casablanca is used to showcase new collections, campaigns and articles. A design toolkit was created to allow easy creation of content for any campaign or news.
Article
World of Casa
Article
Article
World of Casa
Design system
A component-based design system was created, utilising variables and variants in Figma for maximum flexibility. Corresponding components were then built by developers in Shopify.
Content cards
A full component library for ensuring quality and consistency
Homepage variations
Additional credits