Project Cover-1.png

Parisa Wang x CareerTu

Collaboration Handbag

Landing Page for Subscription

Story Behind the Bag: Unlock Your Potential

Parisa Wang was founded to create chic accessories to celebrate your journeys—personal & professional. CareerTu was founded with a mission to train students and young professionals in tech and data fields and connect to top companies. Therefore, the Parisa Wang x CareerTu collaboration piece was born to empower women in the workplace, unlock their potential, and celebrate their unique journey, in life & in love.

My Role

UXUI Designer, UX Researcher

Team

Self-directed, with guidance from mentor and

feedback from stakeholders

Tools

Sketch, Figma, Principle, InVision, Photoshop, Illustrator

Project Time

Feb-April 2020, 3 months

Project Overview

This project is for creating the landing page for Parisa Wang and CareerTu collaboration handbag. During this process, I worked with stakeholders to clarify business scopes and interviewed with users for their needs and preferences. Then I translated business and users requirements into design decision, worked iteratively to design, refine, and validate solutions. 

Outcome

A live online website which absorbs some of my design concepts.

 

Business Plan

Objective: Describe the nature of business and background information

Detail: Business Goal, Value Proposition, Potential Opportunities

Business Goal: Parisa Wang is an Ecommerce bag wholesaler and retailer aiming to create singular and luxurious handbags for women on the go at accessible prices (approx. $100~$450). It is most known for her Addicted Bracelet Bag, a minimalist cross body handbag with a ring buckle worn around the wrist - a bag elevated to a jewelry aesthetic.

The brand focuses on boosting its brand awareness through social media exposure and has become one of the fastest growing independent designer brands.

CareerTu's mission is to train students and young professionals the industry's in-demand skills, making them the ideal hire at their dream companies, in return providing businesses with experienced talents to increase their efficiency.

Parisa Wang collaborates with CareerTu for a new bag launch to help promote the brand further in the modern Asian community. The business goals are to raise awareness and have 150 waitlist subscribers by the launch day.

Value Proposition:

  • Exclusive and limited edition of a best selling signature handbag

  • Carried by well known retailers and ecommerce sites: Shopbop and Bollmingdales'

  • Backed by major press - WWD, Refinery29, Popsugar, etc.

  • Widely promoted by top influencers and celebrities - Bella Hadid, Hola Fiona, Savislook

Potential Opportunities:

  • Collaboration story: Fashion x Tech

  • Mission story: Unlock your potential bag or power women bag

  • Influencer collaboration: invite top influencers to feature the bag

  • Industry leader collaboration: Pitch Sheryl Sandberg and other female tech founders

  • UGI(User Generated Content): Customer tagging for giveaway

  • 15% promotional offers: Subscribe to waitlist to receive the promo code

  • Launch & Popup event (optional)

 

Market Research

Objective: Collect insights from competitors and current e-commerce trend

Detail: UXUI Audit, SWOT Analysis

​UXUI Audit: Learning from others is always a good way to improve. I mainly researched from direct competitors of Parisa Wang. To see how they use UXUI to increase subscription rate 📈. According to my research, they apply following UI elements:

  • Pop-up advertising

  • Sticky button or menu

  • Large advertising images

  • Clear filter

  • Clean design

Empathizing

 

Objective: Develop a deeper understanding of users

Detail: Interview, Affinity diagram, Persona, User Journey

Interview: Users should always be in the center

Before recruitment, I set the criteria based on Parisa Wang client resource. That saved time and narrowed down the user segments. I conducted interviews and focus group with 8 individuals in total. 5 of them are females, 3 of them are males. The age range of participants is from 22 to 29. Participants come from United States, China, and Canada.

To take off some of the pressure, I started with the most recent ecommerce shopping experience and kept questions open to know more about their stories. Knowing their attitude about this project is important, but learning their shopping habits is also necessary.  Here is the user research questions list.

Affinity Diagram: Stick all raw datas I got

I conducted notes taking during the interview, wrote down all paticipants' quotes, attitude, and facts. Grouped them into four categories: Platform, attitudes about waitlist, attitudes towards designer's brand bags, and how do they feel about collaboration.

​Here are some key points users mentioned during the interview and focus group process

  • Got impression from social media.

  • Focus more on photos and "notes" from other customers.

  • A large quantity of photos is really helpful, especially some life photos with product. Because they can see how this bag looks like in daily life.

  • They are interested in collaboration because of its limited edition and quantity.

  • They will take long time to consider and compare their target bag to other bags.

Persona

I created three personas to categorize synthesized  data that collected from user interviews and focus group.

1. Jessica White, who is a handbag lover and fashion followers.

2. Lilian Lin,  she is interested in designer's brand but will take more consideration when purchasing.

3. Jonathan Zhang, he considers to buy handbag for his girlfriend as the gift, something meaningful will motivate him to purchase.

User Journey

Each user type has different preferences under different scenarios. Some are design-oriented, some are function-oriented. Knowing how they feel and what they care during the online shopping process can dig out their pain points, which can benefit following design process.

 

Defining

Objective: Define what and how the problems to be solved

Detail: POV, media strategy, user flow

Define the Problem

Using the insights and needs from user research to craft "Point of View" statements.  POV statement = The user needs [user need] because [research insight]. According to the insights from user research, I posed the design problems as "How might we...?" questions. It's important ensure that the questions are broad enough to generate a wide range of ideas, yet specific enough to stay within the scope of the overall project.

Media Strategy: work in the team

Planed our media strategy with marketing peers based on user research and market research analysis. We also discussed with our clients about their budget for each channel.

User flow:

With the whole go to marketing plan in mind, I outlined the initial user flow based on business goals and marketing strategy. This helps designers, marketing team, and developers understand how steps are connected to each other. Clear user flow takes users from their entry point through a set of steps towards a successful outcome and final action -- completing subscription.

 

Ideation

Objective: Figure out page sections and user actions across platforms

Detail: Information Architecture, Wireframe

Information Architecture:

To understand how pieces on new collaboration landing page fit together, and how items relate to each other within the system. Information architecture (IA) focuses on helping users find information and complete task.

Wireframe: Connect the site's IA to its visual design by showing path between pages

 

Prototyping

Objective: Clarify page sections and user actions across platforms

Detail: Design Guidelines, Design Iteration

Basic Brand Guidelines

Colors

#FF5246

#EBE8E5

#000000

Collaboration Color

Fonts

Poppins       ABCDEFGHIJKLMNOPQRSTUVWXYZ

                     abcdefghijklmnopqrstuvwxyz

                     1234567890

Avenir               ABCDEFGHIJKLMNOPQRSTUVWXYZ

                       abcdefghijklmnopqrstuvwxyz

                       1234567890

Iteration1

01. Design Decision Annotation

1. People loves following trend. Showing the number of people on waitlist can create the feeling of urgency.

2. No one can so "NO" to discount. Highlight the promotional information on pop up window.

3. Positive indication. Showing following steps after users put their email information.

4. Carousel. More visual elements, more engagement.

5. Background story. Using dialog format design to increase interactiveness with users.

6. Floating button. A clear call to action button allows users to easily put their email during the browsing process.

02. Design Review with Internal Peers

  • Presented to other team members (Marketing team and account manager of this project)

  • Answered questions from team members

  • Defended for my design

  • Proposed further improvements

03. Facing Critique

Honestly, this is a real design challenge. As a designer, I have to defend for my work. Admittedly, it is not a perfect work. But I have to elaborate the ideas behind my design. Because I really did research and I need to speak for my users.

04. Internal Feedback

Gathered feedback from team to help with my first version of high fidelity prototype. I know using low fidelity to test is extremely efficient, because it is time saving and easy to change at the early step. But the landing page flow is not complex, and it is visual oriented. People can't get accurate information on low fidelity prototype. High fidelity prototype is more appropriate at this stage.  Below are some feedback they provided for my design:

  • Where will this website will be landed? (Because it is collaboration landing page, if someone they are interested in handbag and click the link, but the link directed to CareerTu. This would be very confusing for users)

  • The "❤️" design also represent "save", if separate it with button, it may mislead users that they need to have an account first then they can click the button.

Iteration2

01. Improvements Annotation

1. Put important message on title. Large product image and launching information are the most important message for users. Putting them on title part can attract users' attention at first glance.

2. Broken link. To solve the confusing about landing page address, I came up the broken link idea. Broken link can resolve embarrassment if users interested in handbag but be directed to CareerTu's website.

3. Integrate "❤️" with CTA button. Clarifying the meaning of the "❤️", which also can help with attracting more attention on CTA button.

4. Customized join waitlist window. Add image elements to the pop up window to impress users again.

02. User Testing

Testing the interface of landing page by real target users in realistic conditions. Testing plan specifies the problems I am interested to learn from users in each section. Moderator's guide is prepared for users to let them have the overview of this project and know what information of them will be recorded and how their privacy will be protected. The following shows main insights I learned from users.​

  • The pop-up window is too large

  • Key information should be addressed, such as promotional information and this product is limited edition

  • I want more product images

  • I would like to learn more product features

03. Testing Feedback

1. Pop up window is a little bit large. Users prefer the pop up window a little bit smaller and totally centered. 

2. Highlight the promotional information. Clear promotional information will increase the subscription possibility of them .

3. More images. They requires more image to know about this bag, including some product detail images.

04.  Go Live:

I proposed my design concept to clients and set up an interactive prototype in Figma to prepare for developer handoff. Below shows some of my design ideas applied in the final live website

 

Affiliate Program

Objective: Showroom part for more product collections

Detail: Revised user flow, UI Design Exploration

Updated User Flow:

Our clients would like to apply the 15% discount to all collections because of business crises caused by COVID-19. A showroom part on this landing page can lead users to Parisa Wang's official website. I double checked with account manager to clarify the user flow in affiliate program. Instant communication with stakeholders can help eliminating misunderstanding and increasing the effectiveness for following design steps. 

Desktop Version

Mobile Version

 

Reflection

Objective: List key takeaways from this project

  • Work collaboratively. This project is completed by myself individually but during the process, I have to check business requirement details with account manager, and discuss research results for further design steps with marketing peers. Effective communication internally can keep the design process always on the right track and get the feedback from stakeholders.

  • User-centered design is the first priority. As a designer, we can try different design style for exploration. But good design should be following user-centered philosophy and process.

  • Attention to interaction difference when designing responsively. When designing responsive pages, we need to pay attention some interactions across different devices. For example, hover effect can not be applied on mobile.

Copyright © Minkun Liu

Persona1-01