What's in my jar?
Mobile Site Case Study
What’s in my jar? (WIMJ) is a skincare platform designed to aid people in making informed decisions regarding skincare products. It is based on science rather than marketing claims.
MY ROLE
UX|UI Design
Research Synthesis
Prototyping
Usability Testing
PROJECT OVERVIEW
What’s In My Jar? : A four-week / forty-hour project targeted to improve user experience in the most critical areas of the site. This project demonstrates how UX Design may be utilized to tackle business and marketing challenges.
Client:
What's in my jar?
Mentor:
Noemi Selisker (Springboard)
THE GOAL
A meeting with the business owner was conducted to gain a more complete understanding of the site's main business goals：
1. Increase readership, build up fan base.
2. Improve conversion rate for the monthly consultation service.
THE PROBLEM
WIMJ's original screens
1. Research
A site study was conducted and key issues were identified:
1. An overwhelming amount of data obscured quick user review
2. Cumbersome funnels resulted in distraction and confusion
3. Site needs to be mobile-first for 80% of mobile users
4. High rate of abandonment lowering monthly consultation subscription
5. Site had a small target audience: young consumers in from 18-25 yo
6. Management viewed traditional marketing (product claims) with skepticism
7. Small font type with low color contrast created difficult legibility
THE SOLUTION
-
Identify WIMJ key users and their needs.
-
Improve information architecture
-
Simplify WIMJ funnels, remove frictions.
THE PROCESS
1. Research
2. Analysis
3. Ideation
4. Design
5. Feedback
6. Iteration
Iteration
Detail Fixing
Secondary Research
Competitive Research
Personas
User Journey Flow
Stakeholder Presentation
Usability Tests
Sketching
Wireframing
Low-Fidelity Prototype
Hi-Fidelity Prototype
1. Research
Do we have the right users?
Secondary Research
Current users of the WIMJ site consist primarily of young, Gen Y, college-age consumers. Additional online research, focused on beauty and skincare spending patterns and buying power, was conducted in order to qualify older consumers as potential customers for WIMJ as a means to increase conversion and revenue for WIMJ.
The above screenshot depicts the age group between 35 and 55 with the highest income and expenditures.
US statistics indicate that as consumers age, the average amount spent of beauty and personal care products declines accordingly.
UK statistics indicate that consumers 50 and over are the biggest spenders on looking glamorous, while women over 45 account for >58% of the beauty market.
Over age 50, Baby Boomers contribute $7.6 trillion in annual economic activities, while Millennials are projected to spend $1.4 trillion.
Market research findings analysis:
Multiple findings indicate the older consumers have significantly larger purchasing power and are willing to spend more money on beauty and specifically skincare.
Should WIMJ expand the reach to include and attract users in older age group, they will need to offer some disruption to the above in order to gain the attention of this demographic. WIMJ has valuable information that can be highly beneficial to this age group, however, currently the channel and message of the site is not directed toward connecting to this age group, but rather focused on Gen Y consumers.
Key Findings 1
we can safely conclude that older consumers have great potential for WIMJ.
What's in the competitive field?
Competitive Research
Social engagement aspects:
Funnels:
Key finding: research reveals that skincare communities play a very important role in these sites, and more importantly in user decisions. Utilization of key influencers may offer critical user enticement and site enhancement in skincare discovery sites.
Key Findings 2
Utilization of key influencers may offer critical user enticement and site enhancement in skincare discovery sites.
2. Analysis
In order to enhance WIMJ’s site visitation and conversion rates, it is recommended to consider to adopting two additional target demographics.
The new users
Existing
+ Add
+ Add
Personas
Key differences:
Primary user 1
Kate - the young smart shopper
- the skeptical
Can’t spend a lot of money
Don’t believe large corporations and their advertisements
Strive to find the perfect, inexpensive product
​
Primary user 2
Layla - the older and selective shopper
- the cautious optimists
Lots of disposable income and not afraid to spend
Okay with large corporations and their advertisement
Wants products to deliver advertised results
Primary user 3
Mia - the beauty influencer
- the business minded
Wants to receive sponsorship from brands
Walks a fine line between unbiased beauty advocate and paid endorser of products
Wants very much to build a fan base
Different users have different goals and attitudes toward corporate marketing, requires WIMJ to adjust its contents, and messages to accommodate all three primary users.
Common goals:
Finding the most effective Products
Knowing products real performance (real users and AI)
Ability to cross-check facts
Desires to be known as the “smart shopper”
Has access to professional advice
3. Ideation
Key touchpoints
User Journey Flow
A hybrid version of a journey map providing a quick visual reference for each step of the user journey flow.
4. Design
Design
Sketch
The sketch provided a rough content structure for developing the
low-fidelity wireframes in the next step.
Interactive low-fidelity wireframes were created in order to provide a more clear demonstration of content structure and the resulting funnels.
Low-fidelity wireframes
In the future, it is anticipated that a significant percentage of users will reach the site via differing social media platforms. The home screen must balance rich content with differing marketing funnels.
High-fidelity wireframes
New Marketing Content and Message
change body of text to action inducing short sentences.
Add visual hierarchy for quick review
Improved Product page:
Add "Want List"
Add "Compare"
Show price on top
Use large product image
Made "Key Promises" more prominent
reorganize information:
Implemented accordion fold to group large amounts of information. Added color coding for quick reference.
Simplify process:
simplifying and streamline process through the consolidation of repeated steps
New signup funnel:
At the report stages, create free and premium content, encouraging users to sign up.
The simplifed skincare routine registration process
The old route
Registering a user’s skincare routine is core to creating subscriptions - requires users to add products for 7 days, twice a day - morning and evening. This requires a cumbersome and lengthy process, based on a typical user’s routine, which incorporates 5-8 products. It may take users over 50 registrations to complete the process. This extended process will likely result in a majority of users dropping out of the funnel.
New product registration route
The new design is focused on simplifying and streamlining this process through the consolidation of repeated steps. Rather than adding the same product 14 times (7 days x 2), the new design allows for adding each product only once.
5. Feedback
Usability tests
Usability tests
The prototype was presented to WIMJ team and received approval for testing. Testing was then conducted with neutral participants - those not familiar with the project - and the feedback was registered for incorporation into further iterations.
Five (5) participants were recruited for these usability tests consisting of four (4) females and one (1) male. All participants were asked to complete same tasks as detailed below:
​
Tasks:
-
Explore home screen as a new user seeking skincare products or related services
-
Test the Product Evaluation route
-
Test the Skincare Routine analysis route.
-
Test the Premium Membership signup route
-
Test the new marketing content structure
​
Goals:
-
Discover any existing frictions in the key routes
-
Evaluate the psychological and emotional responses from users as they navigate the new marketing content structure
-
Analyze the conversion effectiveness of the new funnel
Meeting notes conclusion:
All five participants provided exceedingly valuable feedback relating to content, user flow, graphic design, and copy writing.
​
-
The tag line: “skincare based on science, not on marketing” was well perceived.
-
New marketing content and messages are engaging and effective.
-
All participants went through key routes smoothly, some made suggestion on minor issues such as wording.
​
Long term improvement were suggested to WIMJ:
​
-
The site requires various landing pages with specific funnels to accommodate different user needs
-
A/B testing should be conducted for home screen, as some test participants wants to learn about skincare issues, and some prefer to immediately navigate the site
-
The home screen may need additional design as an app, based on the high degree of Mobile access - 80% access from mobile devices. A/B testing is recommended
-
The current color scheme is very feminine. Gender neutral colors such as white and blue might be more effective when WIMJ is targeting on male users.
-
Instead of offering only one product package, providing multiple product packages can help establish trust and create a sense of choice with users.
6. Iteration
Iteration & Detail fixing
Iteration & Detail fixing
Company Intro, skin concerns has been moved to the top of the page
Changed icons, copy writing and colors.
Changed icons, copy writing and colors.
Simplified onboarding process
Users are encouraged to sign up for the premium services
Increased font size, add color contrast for added legibility
Conclusions:
The goal for WIMJ UX project is to improve user conversation rates to a paid subscription/consultation plan. Through the identification of key users and consideration of key user needs, we can design content and efficient funnels that contribute to this project’s key goals. This user-centric method of design was critical in simplifying routes and developing core features such as the new onboarding process for user skincare routine registration, yielding an increased opportunity to conversion to paid member.
Design decisions were made utilizing an approach that combines UX with mainstream marketing tactics, providing a well rounded UX product. The WIMJ project effectively demonstrates how the UX disciplines and methods can solve complex marketing challenges and serve the needs of the business and user.
