OVERVIEW
Problem
The client was seeking an agency to revamp their existing probiotic websites, with a specific focus on optimizing the mobile experience, in addition to improving the desktop experience.
CLIENT
Visbiome Probiotics
Outcome
I was tasked with leading my team in the development of a redesign for the Product Detail Page (PDP) for Visbiome Probiotic as a design test. Through a strategic and user-centered design approach, we focused on prioritizing vital purchase information and accommodating the needs of Visbiome's consumers through a hierarchical design structure.
Our innovative redesign not only impressed the client but also secured a six-figure account with my company for a full three-website redesign contract.
Visbiome is a company that specializes in developing and distributing high-potency probiotics for individuals with a variety of gastrointestinal and immune-related conditions.
INFO
Role
Design Manager
Team
Design Manager (Me), CRO Strategists (Farid & Stacy) & UX/UI Designers (Kudi & Sabbir)
Timeline
3 Weeks
DESIGN FOCUS POINTS
Plan of Action
2
Hierarchy-Based Design
By applying UX best practices to the new design we could create a PDP page that provides a smooth and intuitive user experience. By focusing on hierarchy and visual cues, we can ensure that customers can easily find the information they need to make an informed purchasing decision.
3
Maximizing Purchasing Power
I recognized that the current PDP was not capitalizing on a significant opportunity to combine single and pack orders into one page, providing customers with greater control and flexibility in their purchasing decisions.
This strategic move not only enhances the perceived value of our products but also increases the likelihood of selling extra units, leading to an overall boost in the lifetime value of our customers.
By streamlining the purchasing process, we can provide a better user experience and ultimately drive more conversions on their website.
1
Mobile-First Approach
My team and I aimed to create an intuitive, user-centered mobile experience for our client's Visbiome Probiotic website. We identified the key areas of the website and analyzed user behavior to understand the most frequently used features.
From there, we prioritized these features and optimized their design for a smaller screen size, ensuring both functionality and aesthetics. Our focus was to streamline the mobile user experience and provide a visually appealing design that aligns with the client's brand.
HYPOTHESIS
By improving the hierarchy of information and creating a more visually appealing and intuitive design on the PDP page, we can increase customer engagement, improve the user experience, and ultimately drive higher conversion rates. Additionally, by leveraging bundling opportunities and providing more flexible purchase options, we can increase the average order value and improve the lifetime value of visitors.
KEY OPPORTUNITIES
Overview of the current experience
The layout is overwhelming, causing confusion for users and hindering the overall user experience. It was clear that the information architecture of the website required a complete overhaul. The content organization and labeling were not intuitive, making it difficult for users to locate the information they needed to make informed decisions.
Additionally, the call-to-action button is being camouflaged by carrying the same color as the dominating green tone used throughout the page.
Finally, the lack of bulk ordering options and suboptimal mobile experience were significant pain points that needed to be addressed to improve overall customer engagement and sales.
PAIN POINTS
1
3
Improper Use of Color
Overusing a single color on a website causes a lack of visual hierarchy. In the current design the client used green in the nav, the product title, and the CTA. When a single color is used excessively, this hierarchy can be lost, and users may find it difficult to understand which elements are more important than others.
Unclear Shipping
Currently, the expected ship date is hidden in the page, only able to find by scrolling below the fold or in a link that is unclear that it is meant to be clicked on. Consumers want to know how when they can expect their package to arrive.
The shipping policy should be transparent and easy to find on the website so that consumers can make informed decisions about their purchases. It can negatively impact the user experience, consumer trust, and ultimately affect the brand's reputation
2
Non-Existant Product Information Hierarchy
Important product information is not being displayed in an optimal way on the product detail page (PDP). Instead, this information is buried in the product description and can only be accessed by scrolling down the page. Customers may miss them or even become frustrated that they have to work to find them.
This can lead to a negative user experience and may ultimately result in the customer abandoning the purchase. In addition, having to scroll through long blocks of text can be tedious and overwhelming, especially on mobile devices.
4
No Bundling & Subscription Opportunities on PDP
These options are currently not available on the PDP, leading to a disjointed customer experience and missed opportunities for repeat purchases.
Bulk ordering is only available on the product collection page and is difficult to find. Customers may never even know they exist. This can lead to missed opportunities for both the customer and the business.
STRATEGY
The plan of action
-
The user personas helped us empathize with the user and take a deeper dive into those pain points for the consumer.
Furthermore, my team and I conducted a comprehensive heuristic evaluation, on-site review analysis, and an audit of the design against the honeycomb evaluation method. We then met several times to discuss our findings and ensure that they informed our design decisions moving forward. -
Once we had a design hypothesis, we could create low-fidelity wireframes that depict the proposed changes to the PDP page. This would be a rough visual representation of the design, highlighting the key elements and functionality.
-
The UX design team began implementing the final design while adhering to the brand guidelines. Throughout the design process, we ensured that the user's needs and goals remained at the forefront of our design decisions, creating a seamless and effective user experience.
-
As this project was a design test, I was not able to present my design process in person. However, I created a detailed video walkthrough that included a whiteboard explanation of all the design decisions and considerations. I submitted this to the client for review, ensuring that they had a clear understanding of the what and the why behind the design.
To address these concerns, I worked closely with my design team to develop with a clearly defined design process. We took a deeper dive to understand the mindset and goals of the probiotic shopper. My team completed a thorough heuristic evaluation, on-site review analysis and completed an analysis of the design against the honeycomb evaluation method.
Design process
SOLUTION
A conversion-optimized design for desktop and mobile
The UX research was completed and the new PDP design was created in three weeks, resulting in a user-friendly and visually appealing interface where we took a customer-centric approach in addressing the pain points.
MOBILE EXPERIENCE
Creating a seamless mobile website experience was crucial in engaging and retaining the user base. This involved optimizing all aspects of the design to ensure that users can easily navigate and interact with the website, no matter what device they are using.
We kept the main focus areas based on core objectives and refined the design by analyzing which features are used most often. Effort was then put into ensuring those features were both intuitive, usable, and aesthetically pleasing on smaller mobile screen sizes.
We followed UX best practices when designing the touch targets to ensure that users can interact with the interface effectively and efficiently, without frustration or error.
All fonts are at least 11pts in size to reduce eye strain and both desktop and mobile designs were tested to meet accessibility requirements.
A sticky-add-to cart was included in the high-fidelity prototype to keep the call-to-action button visible and easily accessible to the user as they scroll down the page.
RETROSPECTIVE
Final Thoughts & Takeaways
1
Benefits of Collaborative Design
As a design manager, I recognized that the project we were about to undertake was complex and required a diverse set of skills to accomplish the desired outcome. So, I decided to leverage the strengths of two UX/UI designers and assigned them to work together as a team, rather than assigning the project to a single individual designer. This team format enabled the designers to bring their individual strengths and perspectives to the table, resulting in a more holistic and comprehensive design approach.
Leveraging two UX/UI designers in a team format proved to be a successful approach for this project, resulting in a design that exceeded our expectations and fulfilled the project goals. We were able to tackle multiple aspects of the project simultaneously and ensure that all aspects were cohesive and integrated seamlessly.
Working on the PDP redesign project for Visbiome was a great achievement for our team at Prismfly. I'm proud to have led the project, and grateful for the trust placed in me by my manager, Yusuf, in trusting me to secure this partnership.
The successful outcome is a testament to the dedication and hard work of the CRO strategists involved, as well as the collaborative efforts of Kudi and Sabbir, who ensured that the design met our high standards.
2
Scoop Creep is Real
Scope management was crucial in this project as we aimed to combine bulk ordering and subscription options. The project team identified potential areas for improvement but remained focused on the main objectives to avoid scope creep.
Despite the tight deadline of three weeks, the team successfully delivered both desktop and mobile designs by conducting thorough research and adhering to UX best practices.