UI and UX for P&G Ecommerce Website SK-II

SK-II, cosmetics brand owned by Procter & Gamble (P&G), is launching a new digital portal right around the corner for the 2020 Olympics. Designed to offer a luxurious and seamless experience across multiple platforms. This site takes DNA from other P&G site and super charged them to give that experiences that gives a wow feel to its premium clientele. Client’s vision in one sentence is to have “User engagement as much as Apple’s PDP page or Better”. UX work was done by design agency Huge, who came up with user research details, wireframe, visuals and also some interactive prototypes for our development team to understand interactions and the data flow etc.

Scope of Work:

I joined this awesome team of UI developers after its initial phase (Home page is ready, so as PLP pages) and the visual (Figma) are in ready state. My first task is to create a “Countdown” timer that shows time to 2020 Olympics start… But due to Covid Pandemic, 2020 Olympics was postponed and this component dint see light of day, but I was not upset as next in card is PDP page that has far nicer interface.

Role:

My primary role in this team is lead UI developer, due to my expertise in UI development and UX design I took over the UX coronation and consulting to beat up the design to shape and meet client’s expectation. When this product reached it post release state I played a dedicated role as UX designer for the updates and newer components.

Development Scope:

I along with a team of over 20 dev took over the mammoth challenge of developing the PDP and PLP screen. These screen are all very interactive so we did extensive research and finalised scrollmagic javascript library as our choice as it meet most of the UI requirement. To be honest, this JS library reduced our work by a big margin as most interaction is triggered by scroll and this worked like a champ.

Facial Treatment Essence (FTE) page is almost like a Hero page of this entire project had over 12 independent component and can be customised via a template file. The “Hero Intro” component is indeed a hero of this entire template with product showing up like a 3d animation and prepares you for the rest of the experience. This component loads over 300 (later optimised with lesser than 100 frames) frames at very high resolution get you this grand intro, the best part is the interaction the transition (appear and rotate) all are controlled by scrolling, which further make it more Apple like in terms of user experience. Though my contribution to this component very is slim, I did help the team architect this component that works seamlessly in multiple devices with taking a hit on performance.

There were other fancier component like the 28day that our team work for over 20days to achieve the desired output… I was fortunate enough to work on 7/12 component and “How To” comes as my favourite. Yeah it also leverages scrollmagic’s scroll tracking power… The interaction is via scroll as well but the feel is like totally different from other components in this page. The component loads a full screen image and on reaching the top of the page, it resizes to fit in the first slot of three, then the slot moves horizontally to second slot then the transition ends once the third slot is reached.

Regimen is one other components that follows the same lines as the “How To” component, yeah this one appears from top down with an intro text, followed by a set of 3 beauty product, by the time these products reach the middle of the page, they stick and the focus starts to move horizontal. The first product is “Toner” followed by the “Cream” then the “Essence”. That’s the end of this component’s and it just slides out.

One other component that is worth a feature is Fermentation, which enters the viewport fullscreen and then shrinks a bit and settles down and the transition begins. The interaction is also via scroll and difference is this loads and manipulates short videos optimised for web and mobile devices.

Living Proof follows the same animation pattern but the slightly different transition, i.e. adding a semi transparent white layer between the video and the text. Both these components can be customised by updating a JSON file that controls the sorting and generic behaviours, which gives us flexibility to switch on or off any component on call.

UX Design Scope:

Though my official scope is limited to UI development, I did quite a contribution to the UX part. In the initial phase, I worked behind the stage to get some clarity to the UX team about the limitation and mitigation option without drifting away from the original design. The FTE Hero is one great example where reducing 300 frames to 90 frames and optimising the scroll speed gave a result that is on par with the original plan. Also I played a pivotal role in optimising typography and alignment where text wrapping in smaller caused some issues.

Once the project passed launch, I took over the design decision responsibility as well and designed screen mods and new feature inclusion etc. The biggest design update I am proud of is the “Afterpay” integration and “Checkout Bar Snapping” system. I also have to make a tough decision to remove “Hero Intro” and “28 Days” so the page performance better, there by increasing conversion rate. An alternative Hero (static) was also designed by me to optimise performance without compromising the user experience.

Challenges

This being one the flagship project for P&G scope for compromise don’t exist! The Huge’s view is extremely focused on achieving pixel perfect reproduction because of this our development team had few challenges, which came up due to technical limitation or performance concerns! Below is a comprehensive list of challenges faced during development…

• This e-commerce portal relies heavily on videos and hi-res images performance took a big hit in our initial prototypes, then by using custom lazy loading system, CDN for media deployment and in-house optimisation all helped.
• 90% of the interaction is via scroll so we face some challenges in mobiles devices, especially IOS devices as the viewport changes with direction change. A custom script designed to detect and adapt helped but the effort invested is quite high.
• Being a portal designed to offer luxurious experience mobile was given almost similar experience which also needed some twitching as to what looks good in big screen may not deliver the similar message when viewed in smaller screen.
• Finally, accessibility needed some tweaking on both design side and development side to get that acceptable accessibility clearance from the team.

Learnings

SK-II is a very special project for everybody who worked on it, including me. The site is special if you consider UX or UI yeah it is that special and I am taking away a lot with me… Firstly this is not the first project that is media heavy or superior in terms of UX but definitely the first that combined them along with performance as the third param, so now I can confidently say I know how to deal with media heavy payload! I also learned multiple ways to achieve the same result be it via design update or via custom coding, like the performance on mobile devices. Lastly this project gave me some insight on how a large scale design agency like “Huge” operates, thanks to P&G and Mindtree for exposing me to them. I learned from them how an iterative Figma is delivered, demos are made to stakeholders/developers/users, how design updates are evaluated and accepted for implemented.

I’m extremely happy to have been part of the SK-II portal development project. The platform’s intuitive interface, modern data interpretation, and sleek scroll-based interaction made it a standout experience. Collaborating with a major client came with its perks—it challenged me to adapt to a fast-paced environment, sharpen my skills, stay updated with the latest technologies, and significantly elevate my professional profile. Being part of something so ground-breaking was a once-in-a-lifetime opportunity, and I’m genuinely proud of the role I played in bringing it to life.