In a dynamic digital age where e-commerce is king, iHerb faced a challenge: an outdated interface in a highly competitive health and wellness market. My role as a UX/UI Designer was to reinvent iHerb's web presence, transforming it into a contemporary, user-focused platform that can stand out from the competition.
A performance overview of the current interface of iHerb showed a significant user dropout rate. In the face of rapidly evolving digital expectations, the site's ability to engage and convert visitors was declining, demanding a strategic change to realign its presentation with contemporary standards and user behaviours.
The solution aimed to refine the site's navigation and interface, emphasising clarity, organisation and ease of use. The approach was rooted in leveraging contemporary design trends to improve the overall user journey, with an emphasis on optimising for both performance and aesthetic to meet the demands of today's e-commerce consumer.
To gain insights into consumer’s behaviours, I conducted a crucial quantitative analysis that involved two primary steps: a thorough assessment of the current iHerb website's performance and a study of the current market trends within the health e-commerce sector.
Analysing popular players in the wellness e-commerce space revealed opportunities for differentiation. Their strengths and shortcomings informed a strategic approach to iHerb's competitive positioning.
This process involved surveying potential users and synthesising the collected data to create empathy maps and user personas, essential in understanding users' needs and pain points.
The vast majority expressed the need for a more intuitive and less cluttered navigation experience, they wanted a simpler, clearer way to find what they needed. Their feedback proved to be incredibly important in guiding the design process. (Total responses: 33)
With the qualitative data collected from user interviews, I created an empathy map. This enabled me to detect recurring themes among users and systematically organise them in 4 categories.
With the qualitative data collected from the market research and the user interviews, I crafted 3 user personas, detailing aspects such as age range, occupation, interests, as well as their goals and frustrations.
User Experience Design combines scientific accuracy with creativity to craft a product's functional framework. It methodically defines user interaction by planning information architecture, user flows, low and high-fidelity wireframes. It also involves usability testing to validate design hypotheses, ensuring a seamless and intuitive user experience.
Respondents have mentioned the menu displays an overwhelming amount of categories and products to click on. I developed a site map to show the structure of a new menu, with a focus on simplicity and quick navigation.
I developed a user journey showing the routes users will take to reach specific goals on the website, to ensure a seamless navigation experience across the entire website.
Low-fidelity wireframes facilitate quick iterations to examine the product's functional approach. At this phase, the focus is on refining the core mechanics, deliberately setting aside visual elements such as colour, imagery, or illustrations.
After the initial low-fidelity sketches, I advance to creating annotated, high-fidelity wireframes. These detailed black-and-white digital layouts provide a comprehensive blueprint, refining the product's design framework.
User Interface (UI) Design is the aesthetic discipline that guides the product's visual interaction with its users. It begins with the development of mood boards, which act as visual guides to establish the product's overall aesthetics.
This foundational step is crucial in developing a unified visual language, laying the groundwork for all design elements that follow.
