Unilever owned brand Murad Skincare, which is led by world-renowned dermatologist Dr. Howard Murad offers a variety of skincare products. Murad’s website runs on the Magento eCommerce platform under Murad.com.
My task was to reorganize and redesign the product page of their site to optimize the user experience and increase conversion.
Roles and Responsibilities
- Murad Skincare:
- Ecommerce Manager
- Marketing
- Developers
- QA Tester
- Unilever Studio / Oliver Agency:
- Account Manager
- UX UI / Lead Designer (myself)
The Murad team was in charge of providing the data, analytics and final implementation. The agency’s Account Manager was responsible for the overall project management with respect to deadlines and budget.
My role in this project as a UX UI / Lead Designer was to define the user flow, create prototypes, wireframes, and the final UI design of the product page. Providing deliverables on or before deadlines.
Challenge
Murad’s research found that most of their consumer base were shopping their site on their mobile devices. Murad’s original product page was designed for Desktop and was not Mobile friendly. With this insight, Murad made the decision to update its site to adapt to its user’s behavior.
Initial research was gathered through tracking tools using Session Cam and Google Analytics to narrow down the user sales funnel. The old product page was encountering user frictions damaged the overall customer experience through the site. The users were simply unable to find the proper information as the page was not optimized for mobile and acutely hurting the conversion rates.
Scope
- Project Timeline: 6 weeks.
- Objective: Create a user experience and interface that allows users to shop for products easily on mobile.
- Methods:
- Expand the Mobile UX UI to the Desktop product page in order to have a homogeneous shopping experience.
- Identify the missing features on Murad
- A/B Tests
- Research user trends and habits in order to implement missing items that would help increase conversion.
Softwares & Tools:
Phase 1 – Research
After the team met, defined the scope, and constraints, I requested user analytics. The dev team provided me results collected via Session Cam and Google Analytics, providing: click, heatmap, scroll, user recordings. I needed to understand the behavior of the user within the product page to make a valid assessment. This in mind, I reached out to Murad’s customer service department, looking to identify the most common questions consumers asked their team before converting.
With the gathered research I identified and defined the major friction point on their original site, scrolling. On their mobile devices, users were scrolling up and down and missing key information (benefits, how to use the product, ingredients). The missing information linked to the product was creating the user to drop off.
Phase 2 – Prototypes, Wireframes & User Flow
I quickly realized that aside from the fact that the website was not optimized for mobile, it was also lacking some major features and placements on the product page, lacking: reviews, Q&A, wishlist, before after pictures, tags, cross-sell, and user content.
The team and I brainstormed on the Murad user’s needs. Based on our thoughts, I sketched ideas based on my vision of the UX flow within the product page.
Prototyping: UX Flow within the product page, mocks, and high fidelity prototypes.
Phase 3 – UI Design
The Murad team ran A/B tests on the old product page to make sure we understood the priorities of the options to display (benefit, details, or ingredients) and compared which blocks were affecting the conversion positively.
The wireframe and prototypes were approved internally and adapted per the latest user’s feedback and internal stakeholders’ requirements.
Based on feedback and approvals, I developed high fidelity mockups for Mobile and Desktop.
- The users need to access a first glance – minimizing scroll to a bare minimum.
- Highlight important product attributes:
- benefits of the product
- how to use it
- what are the major ingredients
- Adding a cross-selling section showcasing additional products to add to the user’s skincare regimen.
- Reorganized the product page and its details according to the most recent user habits on mobile to create a shopping experience on smaller screens without frictions.
For this project, I also worked on creating new UI elements aligned with the current branding and feel across the site:
Conclusion
At the end of this project, I delivered a final product page for mobile and applied the same UX and UI to the desktop in order to have a consistent experience on the site.
The clear spacing allowed the user to easily access the higher level of information at first glance to reach their goals and impact positively the conversion rate. I implemented at the time a sticky CTA when scrolling on Mobile to allow a quick shop experience. The images in the carousel were clickable and easily swipeable.
The product page that was more focused on visuals, with a clear UX flow, light UI including white space.
I gave recommendations and guidelines to the eCommerce and Marketing team in charge of the content: assets to use and copy details with character counts. I recommended that these teams should be less editorial and more concise, utilizing bullet points. Therefore, the large chunks of copy had to be shortened into bullet points as much as possible and placed into accordions. The product page also highlighted the benefit of the skincare products with before/after images (skin improvements based on real on-site user testing).
This Product Page Design affected positively the conversion on mobile. From this first mobile responsive product page, users were able to have a more efficient shopping experience all thorough the sales funnel to the final conversion.
