Screen Shot 2018-12-26 at 2.42.16 PM.png

I did not get lost on subway

Image:: Calvin Klein ‘Kiss’ capsule

Image:: Calvin Klein ‘Kiss’ capsule

 

Overview

Design a product that will take Calvin Klein’s customers through a modern, sensual and iconic lifestyle imagery.

Let Calvin Klein communicate with customers through an artistic lens and vice versa.

Role: Product Designer, User Experience, Interaction Design, Branding, Textile Design

 

Purpose

Calvin Klein is removing itself from Department stores like Macy’s to a digital platform.

How can we combine fashion and digital experience together by reaching out to new and existing consumers through a youthful approach?

 
Facebook Post4.png

Develop

Keeping Calvin Klein’s goal to increase engagement with its customers in mind.

The three MVPs that I will focus on are: personalization, image upload, and sharing.

Consistent color scheme are utilized throughout the interface to remain a strong digital presence and identity.

 

01 Personalization/ Customization

Feature Prioritization: Customization of fit, color, stitch, and images.

Customization allows users be part of the product development which promotes the feeling of ownership.

I streamlined the process into a single flow by consolidating four tools to a fixed tool bar.

customize 3.gif

02 Image Upload

photo edit 2.gif
 

DISCOVER & REVISIONS

Screen Shot 2018-12-27 at 5.07.38 PM.png

The prototype has most features that offer our audience a free form creativity.

However, due to the lack of the project’s clarity and business goal’s fulfillment. There were 5 main areas that needed improvement. I saw this opportunity to improve my User Experience and User Interface skills.

Areas of focus:

  1. Streamline Customization Process

  2. Labels and Icons

  3. Photo Placement

  4. Checkout Page

  5. Sharing

 

01 Streamlining the Customization Process

To make the customization process as intuitive as possible, I adopted VSCO editor tool bar. Although, it is an extra click away, users can get a better overview of the product and the visibility is cleaner.

In the old version, the only way users can start over is by going back to the home page. When users click on next step, they will be led to the order review screen. The “next step” button was eliminated because there was some confusion among users in thinking that “next step” might have meant next tool. The “close” and “done” buttons were added to ease the redo and check out actions.

Facebook Post.png

Style, Color, Image, Stitch

Action buttons like save and exit and were moved down to the bottom of the screen for thumb reachability. Different style options are reduced in size for larger product visibility.

Facebook Post1.png

02 Labels & Icons

There was some confusion with the labels for tools. Fit was mistaken as size and stitch was an apparel jargon for some users. Due to the absence of a standard usage of these icons, text labels are necessary to communicate the functionality and reduce ambiguity.

 
Facebook Cover.png
 

03 Photo Placement

The old version only allows users to upload and edit the colors. One user stated “I uploaded my photo but my friend’s face got cut off.” To allow flexibility in photo placement, scaling and rotation tools were introduced. A slight low-opacity backdrop was added to help users navigate their image more suitably.

Facebook Post2.png

04 Check Out (First Iteration)

Screen Shot 2018-12-02 at 11.30.21 AM.png

Checkout (Revised)

In my old iteration, I had three separate screens for the checkout flow. I consolidated the three main features (size, address, and payment) into one screen. Instead of a typical step-by-step checkout flow, I introduced an action sheet. Users can tap the + button and it will bring up the action sheets. The main reason is to provide a quick overall information for repeat customers to glance if the information is correct. Instead of being prompted for input every time, this allows flexibility down the road in case users want to pop an individual sheet in a different rows. 

Facebook Post3.png

05 Sharing

I implemented the share CTA button to highlight and promote the online customization platform. By clicking the share button, users will be prompted with different social media channels. This is to increase engagement and involvement between users and Calvin Klein as its most engaged audience can be found on social channels. The campaign will also deploy digital influencers to emphasize the “cultural selfie.”

Facebook Post4.png

Impact

  • Increase engagement and involvement between the users and the brand

  • Build a well of user-generated content

  • Promote brand identity on social media

  • Let users be part of the product development. When efforts are invested, it promotes the feeling of ownership.

  • Longer product lifespan as users are more willing to keep a customized item longer.

  • Customization can boost sales as users are willing to pay more when it comes to customized products.

Where it all started

This project stemmed from my print project for the Calvin Klein Underwear Department. I was inspired by the intersections of New York Metro’s rail map. Over the span of two days, I created this collection capsule using OneStep 2 Polaroid Original Pink Duo-chrome 600 film and CAD. All photos and design copyrighted by me. I received a great feedback from the design team and decided to elaborate the project further by creating a digital experience for Calvin Klein. Couple months after, I saw a potential outside the initial project scope and here I am.

Subway_Station_Mockup3.jpg