WHAT
E-Commerce Strategy & Design

ROLE
Research | UX Strategy | UI Design

Responsive Design for Increased
E-Commerce Revenue and Performance

State of Natural Skincare Industry

Site Analytics

Competitive Analysis

Heuristic Evaluation

Taxonomy/Information Architecture

User Flow

Usability Testing

Card Sorting

UI Design

Mario Badescu is a U.S. based skincare company with a goal of bringing simple, gentle, and effective products to the world. Their line of products, which ranges from facial sprays to serums, are sold in high-end retail stores and online through their e-commerce site.

In the recent years, Mario Badescu products have become somewhat of cult favorites in the natural skincare world. Customers are very loyal to their products, however their e-commerce site specifically experiences high bounce rates and slow load times, and many purchases are coming from third party sites or retail stores.

I was tasked with evaluating the current Mario Badescu site and using heuristics and other analytics to determine what areas Mario Badescu needed to improve, as well as developing a strategy to increase the revenue through the online channel.

How might we increase revenue of Mario Badescu through the e-commerce channel?

Conducting research to determine weaknesses and find opportunities to increase conversion.

Looking at the numbers from site audits, analytics and Alexa.com, it became clear that Mario Badescu's online retail site had a higher bounce rate and fewer daily visitors than their competitors. Their site suffered from slow load times and glitches, which seemed like it could be tied to the bounce rates. Research also revealed that the information architecture of the site caused confusion for users trying to navigate the site, and that their taxonomy could be simplified.

My hypotheses.

Exploring ways to improve site and navigation clutter will improve site load times and improve customer glitch complaints.

Performing an audit of current sitemap could potentially speed up user scenarios and lead to quicker conversions and less cart abandonment.

Lack of 'guest' checkout option is causing increased bounce rates and cart abandonment.

Determining actionable insights from user research and heuristics.

To better understand why Mario Badescu's website was not performing as well as their competitors, I turned to users of their products to see what they thought. I did this by performing 5 card sorts that compared Mario Badescu's taxonomy to other competitors, doing an audit of site reviews, and performing a heuristic evaluation with 2 users to see where Mario Badescu lined up next to their competitors' in the user's minds.

Current site navigation at time of project

What these tests revealed.

Card Sorting revealed that current navigation causes confusion for the user by providing too many options with similar terminology. Users preferred more general categories to search for products by, such as 'face' and 'body' rather than seeing every option laid out all at once in the current site navigation.

Heuristic Evaluation (using Abby the IA's methodology) revealed that users found the site to be less communicative and clear than competitor's sites.

Current site analysis revealed that users found the site glitchy, slow and that no guest checkout option was frustrating. Others wished for better product descriptions and complained about malfunctioning forms during checkout.

Designing an e-commerce solution that
simplifies the path to conversion.

My main focus due to these insights was creating an easier path to checkout. It seemed from what users were saying was that it was hard to navigate to the products they wanted, and then not allowing them to checkout as a guest was creating an extra obstacle to completing their purchase. By implementing a modified taxonomy and clear checkout process, I hoped to address the 46.10% bounce rate and slow downs in conversions.

In the prototype to the right, you can watch the new navigation and revised checkout process play through. Below you can see my design process in creating responsive wireframes.

Key changes below include:

Modified taxonomy in the navigational menu - allowing users to search by area of body they are looking for, rather than seeing every category up front.
A 'Quick Shop' option was implemented, which in mobile is executed by scrolling past a product (hover on desktop), allowing users to shop and get to checkout faster.
Checkout has been restructured to allow for guest checkout and more payment options, as it was also determined that allowing user quicker means of pay would also increase conversions.