Parisa Wang x CareerTu
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.
UXUI Designer, UX Researcher
Self-directed, with guidance from mentor and
feedback from stakeholders
Sketch, Figma, Principle, InVision, Photoshop, Illustrator
Feb-April 2020, 3 months
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.
A live online website which absorbs some of my design concepts.
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.
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
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)
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:
Sticky button or menu
Large advertising images
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.
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.
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.
Define the Problem
Using the insights and needs from user research to craft "Point of View" statements.
Objective: Define what and how the problems to be solved
Detail: POV, media strategy, user flow
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.
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.
Objective: Figure out page sections and user actions across platforms
Detail: Information Architecture, Wireframe
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
Basic Brand Guidlines
Objective: Clarify page sections and user actions across platforms
Detail: Design Guidelines, Design Iteration
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.
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:
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.
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.