UI / UX for Natural Deodorant
E-commerce Website

A natural deodorant brand with SKU's online as well as in retail stores like Ulta + Target


increase in
increase LFV
per user
increase in average order value
increase in
increase in
conversion rate
increase in users
reaching checkout

My role

‍UI / UX Designer

As the lead UI/UX designer, I led the project from research and wireframes to interactive prototypes and final design. I worked alongside my team to redesign our clients existing e-commerce website using best practices.



Our client's customer base online and at retail was growing - therefore, so was the need for improving the user experience.

Heuristic research led us to conduct a full visual and content site audit, which showed us various areas that needed improvement.


The goal was to increase our clients' brand awareness, grow their eCommerce business, and drive retail traffic.

site audit in strategy deck


We gathered our research insights by communicating with the stakeholders and examining their industry's most significant pain points and their customers by reviewing comments and reviews. Our team also conducted an in-depth study of their current customer's experiences using HotJar to record their present movements, existing site analytics, and an audit of their main competitors.

The audit helped us determine what features needed to be added or replaced to be at parity with their competitors and capture market space.


Analyzing the research from our discovery phase, we realized that there was a huge opportunity to streamline multiple aspects of the website - including the home page, primary navigation, category pages, and product pages.

before + after


By streamlining the main navigation - we were able to have our client's customers reach their desired page in two clicks instead of five.

The previous navigation was confusing because their main navigation was twice-embedded within the mega menu, as seen above.

Implementing a best practice, we removed the mega menu and the users were directed to a newly built category page.

    Category Page

    category page with filtering options


    On the category page, we added features such as product filtering to help users find their favorite product while also being introduced to new ones.

    The user could now search by product type, size, and scent, with scent being one of the white space categories that could help separate clients from their competitors.

      lo-fi wireframe

      Before Product Page
      After Product Page

      before and after product page


      The product page had various issues, including that it was difficult for a user to self select a product.

      The product type image was a circle with a solid color as seen in the screenshot to the left; The user had to select each color to differentiate the products as there was no indication what the color meant.

      Now users could directly co-relate the product with the ingredient visual.

      We solved this by streamlining the users ability to self select + explore products by adding an ingredient visual and product name.

      • Condensing product information such as product description, how to use and ingredients into one module
      • Adding an icon-based free-from module, which touted what ingredients their natural formulas were free-from
      • Creating a FAQ Module with the most asked questions by product
      • Added a Review section for user confidence and social-proof


          Mobile UI Screen
          We also designed for a mobile-first approach, making sure to also address pain-points users had on the desktop version.

          The new product page on mobile also gave users quick access to all of the products on one product page by using an ingredient visual.

          The add to cart module was stickied to the bottom of the browser, allowing the user to select the product size, quantity and add it to their cart without scrolling.


          ClICK HEAT MAP

          Click heat mapping also showed that users could not only understand the new product selection modules flow but also explore more of the educational content.


          Heat Map

          This before and after heat mapping image shows that users were now scrolling a lot more with the new re-design than before. Users were now able to explore the content much faster - which correlates to how much quicker they could reach check-out.


          We reached our client's end overall goals within two months of launching.
          • Integrating established design elements from packaging and marketing onto the website to solidify the brand's presence.

          • Creating a new flow for users to search for educational content + products helped increase checkout reach

          • Re-working their store navigator to help drive traffic to their retail partner's locations.


          4-6 months


          Creative Strategist
          Project Manager
          Digital Marketer
          Lead Designer
          Junior Designers


          Competitive Analysis, Lo + Hi- Def Wireframes, Interactive Prototypes, Design Research, Visual Design, Content Strategy, Prototyping, Front-End Coding


          Adobe Creative Suite
          Shopify Plus

          MORE WORK

          Pretty Smart Foundation

          User Research, Strategy, Design + Development
          View Case Study

          Amazing Lash Studios

          Digital Marketing, Branding and Packaging Design
          View Case Study
          Charmed Palette


          Digital Marketing, Branding and Packaging Design
          View Case Study