skinn redesign case study

UI/UX | Redesign | E-commerce

SKINN by Titan is a premium fragrance brand from the House of Titan that bridges fine French perfumery craftsmanship with modern Indian sensibilities.

Skinn Redesign Hero Banner

tools used

Adobe Photoshop, Adobe XD

project overview

SKINN by Titan is a premium fragrance brand from the House of Titan. The goal of this project was to redesign specific sections of the Skinn website to better reflect the brand's premium identity - making it feel more classy, exclusive, and intuitive for users shopping for fragrances online.

the problem

The existing website had clutter and lacked the premium feel that Skinn as a brand deserved. The sections needed to be cleaner, more intuitive, and better at guiding users through their shopping journey - both on desktop and mobile.

design objectives

  1. • Represent Skinn as a premium brand with heritage.
  2. • Educate customers on Skinn's features.
  3. • Create a classy and intuitive website experience.
  4. • Make gifting feel special and exclusive.
  5. • Remove unnecessary clutter from the UI.

my role & responsibilities

  1. • UI/UX Designer working within a team.
  2. • Designing intuitive user interactions for use case enrichment.

screens designed (desktop & mobile)

  1. • Header
  2. • Product Detail Page (PDP) - How to Use section
  3. • Product Listing Page (PLP)
  4. • Quick View section
  5. • PDP Image Zoom In & Zoom Out

key learnings

  1. 1. Learned how to design within real business constraints and brand guidelines.
  2. 2. Designing for both desktop and mobile taught me how the same interaction needs to be thought about differently for each screen size.
  3. 3. Refined my ability to translate project goals into clean design files while delivering assets on time.

visual worksnaps


The showcased designs reflect my contribution during the design phase.

Final implementation may vary slightly due to development and business requirements.

header

Desktop header UI design in Adobe XD.
XD Design - Desktop
Live desktop header navigation bar.
Live website - Desktop
Mobile header UI design in Adobe XD.
XD Design - MWeb
Live mobile header navigation bar.
Live website - MWeb
Mobile header UI design and live website.
XD Design - MWeb & Live website - MWeb

how to use section

Desktop How to Use section UI design in XD. Mobile How to Use section UI design in XD.
XD Design - Desktop & MWeb
How to Use section XD design for desktop and mobile.
XD Design - Desktop & MWeb
Live How to Use section on desktop. Live How to Use section on mobile.
Live Website - Desktop & MWeb
Live How to Use section on desktop and mobile.
Live Website - Desktop & MWeb

product listing page (PLP)

Desktop Product Listing Page UI design in XD.
XD Design - Desktop
Live Product Listing Page on desktop.
Live Website - Desktop
Desktop product tile grid UI design in XD.
XD Design - Desktop (Product Tiles)
Live product tile grid on desktop.
Live Website - Desktop (Product Tiles)
Mobile Product Listing Page and producct tile grid UI design in XD.
XD Design - MWeb
Live Product Listing Page and product tile grid on mobile.
Live Website - MWeb

PLP quick view section

Desktop Quick View modal UI design in XD.
XD Design - Desktop
Live Quick View modal on desktop.
Live Website - Desktop
Mobile Quick View modal XD design and live implementation.
XD Design And Live Website MWeb

zoom in - zoom out

Live product image zoom feature on desktop.
Live Website - Desktop
Live product image zoom feature on mobile.
Live Website - MWeb

other titan work

Irth Redesign project preview

Irth Redesign

Case Study

Coming Soon

IRTH is a premium yet affordable women's handbag and accessory brand launched by the House of Titan (a Titan Company).....

other best projects