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 products used on the skin. 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 weeks / forty-hour project demonstrating how UX Design may be utilized to tackle business and marketing challenges. Through this process including, problem identification, research, prototyping, and usability testing, both user and WIMJ business objectives were improved.
Client:
What's in my jar?
Mentor:
Noemi Selisker (Springboard)
THE PROBLEM
The current WIMJ website contains a large amount of valuable information in skin care products and routines that can be desirable to many users. However, WIMJ has a low conversion rate and desires to entice conversion of visitors to the revenue-generating monthly subscription/consultation program.
Currently, 80% of visitors accessing the WIMJ site do so via mobile devices. The current UI challenges users with overwhelming amounts of data and funneled paths leading to a significant drop-out rate.
visitors access via mobile
overwhelming amount
of data and fuzzy paths lead to a significant drop-out rate
80%
WIMJ's original screens
1. Research
THE SOLUTION
Clarify and define users and their specific needs in order to improve and refine key touch-points, allowing clear navigation to solution destinations and affording a more robust opportunity for conversion to subscription/consultation plans that further the revenue goals of WIMJ.
-
Identify and define WIMJ key users and their needs
-
Reconstruct information architecture
-
Simplify WIMJ funnels, remove frictions.
The goal of this project is to deliver a working, tested hi-fi prototype based on user research and feedback. Due to time constraints imposed by the project, only the most effective and time efficient procedures were selected and deployed.
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
Who are the 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:
The information regarding the spending pattern in beauty and personal care of consumers over 40 years old is mixed. Some research shows they spend less on beauty and personal care than their younger counterparts. At the same time, multiple findings indicate the older consumers have significantly larger purchasing power and willing to spend more money on beauty and specifically in skincare.
Although further research should be conducted, we can safely conclude that older consumers have great potential for WIMJ. Research suggests the possible reasons older consumers spend less on beauty and personal care: they have developed their beauty routines over the years, which they BELIEVE is working for them; they have grown to accept their current style and appearance; they have shifted focus from themselves to family or work.
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 are out there?
For social engagement aspects:
For funnels:
Competitive Research
There are many skincare websites with a few offering similar services. The majority of these sites delivery key functions but lack a pleasing user experience with clear funnels and user inspired UI. Interestingly, 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
Currently, WIMJ is designed to target college-age, Gen Y users. Based on the key findings in 1 and 2 above, we will consider to adopting two additional target demographics to enhance WIMJ’s site visitation and conversion rates.
Who are the users?
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
Has a strong social conscious
Cares about a company’s social/environmental commitment
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
If given a choice, will choose products with social/environmental commitment, but not key to the purchase decision
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 ver much to build a fan base
Places extreme emphasis on companies with strong social/environmental commitment
Different users have different goals and attitudes toward corporate marketing, requires WIMJ to adjust its contents, and messages to accommodate all primary users.
Common goals:
Finding the most effective Products
Knowing products real performance (real users and AI)
Quick access to the most scientific and up-to-date industry knowledge.
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
How do the three primary users interact with the site? What type of content are they searching? What are the pain points? What are the impressions as they navigate each step? What content can be included to establish and enrich the user’s trust of the site? How can we anticipate and incorporate their questions into the site?
Below is a hybrid version of a journey map, providing a quick visual reference for each step of the user journey flow.
4. Design
Design
Sketch
A series of design sketches were created utilizing paper and pen. The sketch provided a rough content structure for developing the low-fidelity wireframes in the next step.
Interactive low-fidelity wireframes were conceived, designed and presented 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. As a result, we want to create landing pages with specific funnels. For this project, the home screen serves as a general gateway to the WIMJ brand. Based on the the three target users, each is likely to arrive at the site with different needs and pain points, The home screen must balance rich content with differing marketing funnels, creating a bit of a design dilemma.
High-fidelity wireframes
App styled home screen with additional functions added
Use “membership signup” to replace “book consultancy”
Changed ad copy
Added “Want List”
Added “Shopping Cart”
Added “Compare”
Showed product price at the top
Used large product photo
Made “Key Promises” more prominent
Brand new routine registration process
(routine registration detailed below)
Users afforded choice to “skip” or
“read” content via color coded accordion fold. Additionally, the fold allows for large amounts of data to be efficiently displayed.
Existing screens
From a visual and aesthetic point-of-view, the new design incorporates an existing color scheme for brand consistency, augmented with contrasting shades and font variation to increase legibility. Care was taken to limit and avoid the use of traditional skincare stock photos as a method to enhance the emotional connection with current users - in particular the younger users.
The new skincare routine onboarding process
Existing screen
New design
The existing route for registering a user’s skincare routine - core to the site - requires users to add products for 7 days, twice a day - morning and evening. This creates a cumbersome and lengthy process, based on a topical user’s routine which incorporates 5-8 products. This extended process will likely result in a the majority of users to dropping out of the funnel.
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.
-
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
Conclusions:
The goal for WIMJ UX project is to site acmes and 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.
