iHerb
The redesign of the Users' Purchase Experience to Increase Credibility and Address Accessibility Issues
Executive Summary
Executive Summary
Summary
AESTHETICS = CREDIBILITY
iHerb is a provider of health and wellness products. It offers supplements, herbs, bathing and beauty products, groceries, kids accessories, and sports goods. It is a successful company with a constantly growing number of employees and is expanding to new countries.
“Amelioration effect” refers to the phenomenon when people perceive a visually attractive website as more credible. A study performed by Rieh & Danielson showed an aesthetic treatment, increased the rating for the same content in 19 out of 21 cases (90%). Both of the problem statements' solutions will fix this issue as they target a visual appearance among other issues. For this reason, I didn't include the credibility issue as one of the problem statements.
Summary
AESTHETICS = CREDIBILITY
iHerb is a provider of health and wellness products. It offers supplements, herbs, bathing and beauty products, groceries, kids accessories, and sports goods. It is a successful company with a constantly growing number of employees and is expanding to new countries.
“Amelioration effect” refers to the phenomenon when people perceive a visually attractive website as more credible. A study performed by Rieh & Danielson showed an aesthetic treatment, increased the rating for the same content in 19 out of 21 cases (90%). Both of the problem statements' solutions will fix this issue as they target a visual appearance among other issues. For this reason, I didn't include the credibility issue as one of the problem statements.
Summary
AESTHETICS = CREDIBILITY
iHerb is a provider of health and wellness products. It offers supplements, herbs, bathing and beauty products, groceries, kids accessories, and sports goods. It is a successful company with a constantly growing number of employees and is expanding to new countries.
“Amelioration effect” refers to the phenomenon when people perceive a visually attractive website as more credible. A study performed by Rieh & Danielson showed an aesthetic treatment, increased the rating for the same content in 19 out of 21 cases (90%). Both of the problem statements' solutions will fix this issue as they target a visual appearance among other issues. For this reason, I didn't include the credibility issue as one of the problem statements.
Problem Statement
Navigating the iHerb website is a challenge for its users because of an excessive amount of CTAs, an overwhelming amount of options, and a busy interface.
Navigating the iHerb website is challenging for visually impaired people as the website doesn't pass the accessibility scan.
Problem Statement
Navigating the iHerb website is a challenge for its users because of an excessive amount of CTAs, an overwhelming amount of options, and a busy interface.
Navigating the iHerb website is challenging for visually impaired people as the website doesn't pass the accessibility scan.
Problem Statement
Navigating the iHerb website is a challenge for its users because of an excessive amount of CTAs, an overwhelming amount of options, and a busy interface.
Navigating the iHerb website is challenging for visually impaired people as the website doesn't pass the accessibility scan.
HMW Statement
How might we ensure that the search and purchase on the iHerb website is easy, quick, and pleasant while still preserving many options provided by the company?
How might we ensure that visually impaired users and those who rely on screenreaders can easily navigate the site?
HMW Statement
How might we ensure that the search and purchase on the iHerb website is easy, quick, and pleasant while still preserving many options provided by the company?
How might we ensure that visually impaired users and those who rely on screenreaders can easily navigate the site?
HMW Statement
How might we ensure that the search and purchase on the iHerb website is easy, quick, and pleasant while still preserving many options provided by the company?
How might we ensure that visually impaired users and those who rely on screenreaders can easily navigate the site?
Solutions
Part 1: Sorting countless options into categories for easy navigation.
Part 2: Creating a visual hierarchy to let users focus on the most important information
Part 3: Analyzing the importance of different data presented on the website and filtering out options that are less likely to stimulate a purchase, to emphasize the ones that have a better success rate.
Part 1: Ensuring that all the redesigned pages pass the accessibility check
Part 2: Creating a cleaner design and faster, distraction-free checkout path to help people using screenreaders and therefore everyone else while preserving brand identity
Solutions
Part 1: Sorting countless options into categories for easy navigation.
Part 2: Creating a visual hierarchy to let users focus on the most important information
Part 3: Analyzing the importance of different data presented on the website and filtering out options that are less likely to stimulate a purchase, to emphasize the ones that have a better success rate.
Part 1: Ensuring that all the redesigned pages pass the accessibility check
Part 2: Creating a cleaner design and faster, distraction-free checkout path to help people using screenreaders and therefore everyone else while preserving brand identity
Solutions
Part 1: Sorting countless options into categories for easy navigation.
Part 2: Creating a visual hierarchy to let users focus on the most important information
Part 3: Analyzing the importance of different data presented on the website and filtering out options that are less likely to stimulate a purchase, to emphasize the ones that have a better success rate.
Part 1: Ensuring that all the redesigned pages pass the accessibility check
Part 2: Creating a cleaner design and faster, distraction-free checkout path to help people using screenreaders and therefore everyone else while preserving brand identity
Research Methods
Heuristic Evaluation based on Jakob Nielsen's ten general principles
Competitive Research
Accessibility Analysis
User Persona and User Journey
Research Methods
Heuristic Evaluation based on Jakob Nielsen's ten general principles
Competitive Research
Accessibility Analysis
User Persona and User Journey
Research Methods
Heuristic Evaluation based on Jakob Nielsen's ten general principles
Competitive Research
Accessibility Analysis
User Persona and User Journey
Case Study
Case Study
Case Study
Heuristic Evaluation
Heuristic Evaluation
I started redesigning by analyzing the current situation. Heuristic Evaluation will provide insights into the problematic areas of the website without including users. I based analysis on Jakob Nielsen's 10 general principles but didn't limit myself to just those, and used another usability, visual design, and information architecture rules to detect problem areas.
Heuristic Evaluation
I started redesigning by analyzing the current situation. Heuristic Evaluation will provide insights into the problematic areas of the website without including users. I based analysis on Jakob Nielsen's 10 general principles but didn't limit myself to just those, and used another usability, visual design, and information architecture rules to detect problem areas.
Heuristic Evaluation
I started redesigning by analyzing the current situation. Heuristic Evaluation will provide insights into the problematic areas of the website without including users. I based analysis on Jakob Nielsen's 10 general principles but didn't limit myself to just those, and used another usability, visual design, and information architecture rules to detect problem areas.
Jacob Nielsen's General Heuristic Principles
#1: Visibility of system status
#2: Match between the system and the real world
#3: User control and freedom
#4: Consistency and standards
#5: Error prevention
#6: Recognition rather than recall
#7: Flexibility and efficiency of use
#8: Aesthetic and minimalist design
#9: Help users recognize, diagnose, and recover from errors
#10: Help and documentation
Jacob Nielsen's General Heuristic Principles
#1: Visibility of system status
#2: Match between the system and the real world
#3: User control and freedom
#4: Consistency and standards
#5: Error prevention
#6: Recognition rather than recall
#7: Flexibility and efficiency of use
#8: Aesthetic and minimalist design
#9: Help users recognize, diagnose, and recover from errors
#10: Help and documentation
Jacob Nielsen's General Heuristic Principles
#1: Visibility of system status
#2: Match between the system and the real world
#3: User control and freedom
#4: Consistency and standards
#5: Error prevention
#6: Recognition rather than recall
#7: Flexibility and efficiency of use
#8: Aesthetic and minimalist design
#9: Help users recognize, diagnose, and recover from errors
#10: Help and documentation
Heuristic Evaluation
Usability Audit
Usability Audit
Usability Audit
Architecture
Architecture
1. Is obvious
2. Starts with most important
3. A search bar is present
4. Navigation is consistent
5. Contact information is visible
Forms
Buttons are easily clickable
2. Buttons have clear CTAs
3. All forms ask only for relevant information
Typography
1. Fonts are larger than 14px
2. Not more than 2 font families used
3. Font is larger than 16px on mobile
4. Headings are consistent on the pages
Error Prevention
1. The name of fields is visible
2. Fields contain different values
User Trust
The company’s address is present
2. There are reviews from customers
3. Customer support number is displayed
4. There’s a privacy policy page
Architecture
1. There’s enough space between blocks
2. It is visually clear which menu blocks the menu elements belong to
3. The layout is straightforward and grid is present throughtout
3. The pages are easy to navigate
Insights
The first word that comes to mind when opening the iHerb website is "tacky." Due to the primary function of this e-commerce website which is "to sell," it's packed with flashing sale buttons: "sale!", "immunity boosters!", "specials!" and many more. I can't help but feel that this website is yelling at me. When everything is emphasized- nothing stands out. The next problem I found is the unclear layout. Paradoxically, parts of the website look cramped and empty at the same time. Lastly, the use of too many colors is very distracting.
Next, I studied competitors' approaches to selling similar types of products. According to Zoominfo, iHerb's top competitors are Vitacost, Holland and Barrett, GNC, and Swanson.
What am I looking for?
How do competitors approach announcing their sales and motivating customers to purchase, and how does it influence their UI?
Insights
The first word that comes to mind when opening the iHerb website is "tacky." Due to the primary function of this e-commerce website which is "to sell," it's packed with flashing sale buttons: "sale!", "immunity boosters!", "specials!" and many more. I can't help but feel that this website is yelling at me. When everything is emphasized- nothing stands out. The next problem I found is the unclear layout. Paradoxically, parts of the website look cramped and empty at the same time. Lastly, the use of too many colors is very distracting.
Next, I studied competitors' approaches to selling similar types of products. According to Zoominfo, iHerb's top competitors are Vitacost, Holland and Barrett, GNC, and Swanson.
What am I looking for?
How do competitors approach announcing their sales and motivating customers to purchase, and how does it influence their UI?
Insights
The first word that comes to mind when opening the iHerb website is "tacky." Due to the primary function of this e-commerce website which is "to sell," it's packed with flashing sale buttons: "sale!", "immunity boosters!", "specials!" and many more. I can't help but feel that this website is yelling at me. When everything is emphasized- nothing stands out. The next problem I found is the unclear layout. Paradoxically, parts of the website look cramped and empty at the same time. Lastly, the use of too many colors is very distracting.
Next, I studied competitors' approaches to selling similar types of products. According to Zoominfo, iHerb's top competitors are Vitacost, Holland and Barrett, GNC, and Swanson.
What am I looking for?
How do competitors approach announcing their sales and motivating customers to purchase, and how does it influence their UI?
Competitor Research
Insights
I found that oversaturating the page with sale signs and CTA buttons is a common issue e-commerce sites have. Vitacost's and Swansons' websites share these problems, just like iHerb's website. On the other hand, I have realized that it is possible to advertise successfully without overwhelming consumers. GNC's and Holland and Barrett's websites show a clear layout and attractive design.
Insights
I found that oversaturating the page with sale signs and CTA buttons is a common issue e-commerce sites have. Vitacost's and Swansons' websites share these problems, just like iHerb's website. On the other hand, I have realized that it is possible to advertise successfully without overwhelming consumers. GNC's and Holland and Barrett's websites show a clear layout and attractive design.
Insights
I found that oversaturating the page with sale signs and CTA buttons is a common issue e-commerce sites have. Vitacost's and Swansons' websites share these problems, just like iHerb's website. On the other hand, I have realized that it is possible to advertise successfully without overwhelming consumers. GNC's and Holland and Barrett's websites show a clear layout and attractive design.
Accessibility Analysis
Analysis Decition
Accessibility Analysis is a critical part of any improvement and redesign. While browsing through the iHerb's website I noticed that some of the colors may have not enough contrast for people with impaired vision and decided to check my assumptions.
Analysis Decition
Struggles with plant care due to unfamiliarity often lead to failure.
Analysis Decition
Accessibility Analysis is a critical part of any improvement and redesign. While browsing through the iHerb's website I noticed that some of the colors may have not enough contrast for people with impaired vision and decided to check my assumptions.
Analysis Takeaway
A lot of the issues came from incorrectly labeling or attributing the elements. I have focused on studying readability scores and the areas that didn't pass the scan to ensure that my redesign doesn't repeat those mistakes.
Analysis Takeaway
Struggles with plant care due to unfamiliarity often lead to failure.
Analysis Takeaway
A lot of the issues came from incorrectly labeling or attributing the elements. I have focused on studying readability scores and the areas that didn't pass the scan to ensure that my redesign doesn't repeat those mistakes.
See Full Report
See Full Report
Target Audience
Audience Research Challange
The search for iHerb's target audience data was challenging. I didn't have access to their analytics and the company has 11 million customers all over the world and a sufficient range of products they are selling.
To find the target user I:
1. Analyzed their overall design style, writing style, and branding colors to get insights through color phycology what the company is standing for
2. Read their 'Mission statement' and 'About page' to find keywords that might be targeting specific age groups or gender
3. Research which other platforms iHerb is active on and what kind of posts are posted there (text/images/comments/subscribers)
4. Read customer reviews on multiple platforms trying to pinpoint reviewers' age, gender, interests
5. Searched any featured reviews, testimonials, or featured profiles
6. I Reached out to iHerb UX designers on LinkedIn to ask about their target audience - the message went unanswered.
Audience Research Challange
The search for iHerb's target audience data was challenging. I didn't have access to their analytics and the company has 11 million customers all over the world and a sufficient range of products they are selling.
To find the target user I:
1. Analyzed their overall design style, writing style, and branding colors to get insights through color phycology what the company is standing for
2. Read their 'Mission statement' and 'About page' to find keywords that might be targeting specific age groups or gender
3. Research which other platforms iHerb is active on and what kind of posts are posted there (text/images/comments/subscribers)
4. Read customer reviews on multiple platforms trying to pinpoint reviewers' age, gender, interests
5. Searched any featured reviews, testimonials, or featured profiles
6. I Reached out to iHerb UX designers on LinkedIn to ask about their target audience - the message went unanswered.
User Persona and their journey
Insights
User Journey Map is the method that highlights the correlation between a website's credibility (user's trust) and visual aesthetics. This research also showed where are areas of possible improvement or new market possibilities.
Insights
User Journey Map is the method that highlights the correlation between a website's credibility (user's trust) and visual aesthetics. This research also showed where are areas of possible improvement or new market possibilities.
Insights
User Journey Map is the method that highlights the correlation between a website's credibility (user's trust) and visual aesthetics. This research also showed where are areas of possible improvement or new market possibilities.
Design
Design
Design
Wireframes
Wireframes
Wireframes
Scope
I have focused on designing wireframes for the specific user flow.
Buying Vitamin B from the company Cellusor, using menu > filters.
Scope
I have focused on designing wireframes for the specific user flow.
Buying Vitamin B from the company Cellusor, using menu > filters.
Scope
I have focused on designing wireframes for the specific user flow.
Buying Vitamin B from the company Cellusor, using menu > filters.
Medium Fidefity: 'Buying an Item' user flow
Medium Fidefity: 'Buying an Item' user flow
Medium Fidefity: 'Buying an Item' user flow
high Fidefity: 'buying an item' user flow
high Fidefity: 'buying an item' user flow
high Fidefity: 'buying an item' user flow
Insights
The iHerb redesign satisfies readability criteria with good contrast and font sizes. I have incorporated iHerb's warm green color through the user flow and the yellow color on the landing page. I have assigned each color a specific goal based on the human color phycology studies- Green-CTA; Yellow-discount. The design is minimalistic and distraction-free.
Insights
The iHerb redesign satisfies readability criteria with good contrast and font sizes. I have incorporated iHerb's warm green color through the user flow and the yellow color on the landing page. I have assigned each color a specific goal based on the human color phycology studies- Green-CTA; Yellow-discount. The design is minimalistic and distraction-free.
Insights
The iHerb redesign satisfies readability criteria with good contrast and font sizes. I have incorporated iHerb's warm green color through the user flow and the yellow color on the landing page. I have assigned each color a specific goal based on the human color phycology studies- Green-CTA; Yellow-discount. The design is minimalistic and distraction-free.
Reflection
Reflection
Reflection
AHA Moment
The biggest 'AHA!' moment for this project was my User Persona thoughts throughout her journey map, specifically at the stage of 'iHerb browsing.' Maya (my User Persona) thought, 'This better not be a scam,' since the prices of the products are low and the website doesn't create trust for first-time shoppers. This got me curious to find out more about trust and the 'look and feel' of the product. Website redesign has to be approached carefully; they might attract new customers but also anger the existing ones. People don't like change. Perhaps this is the reason for iHerb not updating its website. The redesign should be integrated gradually not to 'shock' the user.
AHA Moment
The biggest 'AHA!' moment for this project was my User Persona thoughts throughout her journey map, specifically at the stage of 'iHerb browsing.' Maya (my User Persona) thought, 'This better not be a scam,' since the prices of the products are low and the website doesn't create trust for first-time shoppers. This got me curious to find out more about trust and the 'look and feel' of the product. Website redesign has to be approached carefully; they might attract new customers but also anger the existing ones. People don't like change. Perhaps this is the reason for iHerb not updating its website. The redesign should be integrated gradually not to 'shock' the user.
AHA Moment
The biggest 'AHA!' moment for this project was my User Persona thoughts throughout her journey map, specifically at the stage of 'iHerb browsing.' Maya (my User Persona) thought, 'This better not be a scam,' since the prices of the products are low and the website doesn't create trust for first-time shoppers. This got me curious to find out more about trust and the 'look and feel' of the product. Website redesign has to be approached carefully; they might attract new customers but also anger the existing ones. People don't like change. Perhaps this is the reason for iHerb not updating its website. The redesign should be integrated gradually not to 'shock' the user.
Challenges
The biggest challenge was deciding which elements of the oversaturated interface of the original iHerb site had the most successful click rate to keep those in focus. Having access to website analytics would help me better rely on solid data. What would I do differently next time?I would reach out to the iHerb company a lot earlier in the process in hopes of getting data about their target audience, site CTAs performance, and future plans.
Challenges
The biggest challenge was deciding which elements of the oversaturated interface of the original iHerb site had the most successful click rate to keep those in focus. Having access to website analytics would help me better rely on solid data. What would I do differently next time?I would reach out to the iHerb company a lot earlier in the process in hopes of getting data about their target audience, site CTAs performance, and future plans.
Challenges
The biggest challenge was deciding which elements of the oversaturated interface of the original iHerb site had the most successful click rate to keep those in focus. Having access to website analytics would help me better rely on solid data. What would I do differently next time?I would reach out to the iHerb company a lot earlier in the process in hopes of getting data about their target audience, site CTAs performance, and future plans.