What’s In My Jar | Website Analysis

GOAL To improve the mobile user experience of WIMJ.com. This 40-hr project included two rounds of user interviews, data collection and synthesis. Redesign recommendations and wireframes were based on user feedback.

The Problem

What’s In My Jar (WIMJ) sells skincare consultations. The website has a lot of information that could be available to users, but they want to improve general website UX and believe there are opportunities to improve based on user needs.

The Solution

I will provide design recommendations based on user feedback. Recommendations entail re-restructuring the content of the home page in order to improve the UX.

My Role

Conduct research, user interviews, a comparative analysis and synthesis. Provide feedback based on user interviews.

STEP 1: User interviews

I interviewed 7 people ranging from the ages of 28-73 by phone and digital conferencing methods. I wanted to find out what was most important in skincare to potential customers. Results were insightful and interesting.

Key Takeaways

  • Users care for the health of their skin but the range of effort placed on skincare research and personal regimen vary. 

  • Users like to try different products and are often not loyal to just one company. 

  • Organic and pure Ingredients are important in skincare products.

  • Users prefer to support cruelty-free and environmentally friendly brands.

STEP 2: Competitive Analysis

During this same interview session, I asked users to review 5 competitor websites of WIMJ. I found that users described the sites as being either medical/scientific or a highly visual lifestyle brand. Users gravitated toward the companies with strong visual branding and design but did appreciate the in-depth information in the medical-based company websites.

Key Takeaways

  • Users like reading reviews.

  • Product descriptions must include ingredients list and include vegan status. 

  • Glossier was a favorite among users

  • Quizzes have mixed reviews. Some users like quizzes and others don’t. If you want to  include a quiz, the quiz must be short and free for users without registration.

  • Glowism felt sterile, cold, not engaging, medical. 

  • Gender neutral branding would be helpful to attract male users.

Step 3: WIMJ Website Evaluation Interviews & Feedback

I interviewed 10 users and asked them to evaluate WIMJ.com. Key takeaways were organized into two sections: visual design and information architecture. 

Key Takeaways

Visual Design

  • Overall users shared both positive and negative feedback 
on current color palette. 

  • Image of the mobile phone message graphic is hard to read. 

  • Navigation bar can be simplified and enlarged. Readability is difficult. 

  • Users like the product pages/graphics and product review graphics

  • Some photos are pixelated.

Information Hierarchy

  • Overall, users understood the website message but had to scroll around the home page before it was recognized.

  • Users struggle to identify that there are two ways to engage with the site: free and subscription. 

  • Many users did not understand what they would be paying for when scrolling the homepage. 

  • “How it Works” section should be moved closer to the top. 

  • WIMJ meaning should be explained on the homepage somewhere. It is not referenced in the “About Us” page either. 

  • Hero image of a mobile phone and a couple in the bathroom draws more attention than the actual message and CTA.

  • Two competing actions on the home page: “analyze products” and “start consultation.”

It helped me to visually see the layout of the homepage with user comments referencing specific elements.

Step 4: Site Map

My solution to improve the UX of the website is to reorganize the content of the homepage. In order to do that, I needed to further understand the goals of the website. I found that there were three ways users could interact with the website: Free account, product analysis and a paid consultation service. I created a sitemap in order to organize the elements of the current home page.

Step 5: Wireframes

My final product is a wireframe that takes into account user data and accumulated feedback and information.

Learnings

This project taught me to be proactive and creative in the process because the client may not always know what steps to take to move forward.

Next
Next

Case Study: Mobile App Design