From Fresh Eyes to Full Redesign, Transforming the SkinnyFit.com Experience
My Role: Lead Designer • Web + UX Strategy • eCommerce Redesign
Overview
Building a modern eCommerce foundation to boost trust, engagement, and sales
WEBSITE DESIGN UI/UX DESIGN ECOMMERCE
SkinnyFit is a wellness and beauty brand known for its weight loss and health products. When I joined Smashtech, I took over the long-stalled SkinnyFit.com redesign, which quickly became my “creative baby”. As the UI/UX Designer, I brought fresh eyes and full creative control to rebuild the site, pitch a new vision, and collaborate directly with the CEOs. The result was a modern, cohesive, high-converting eCommerce experience that strengthened the brand’s digital presence.
The Challenge
SkinnyFit.com was missing critical eCommerce essentials—product detail pages, category pages, and a clear shopping flow—resulting in a confusing customer journey and lost revenue. Previous redesign attempts had stalled, leaving the brand without a functional upgrade path. The challenge was to reimagine the site with a fresh, unbiased perspective and build a cohesive, high-converting experience that finally aligned with business needs.
The Pitch
From Fresh Vision to Full Buy-In:
How SkinnyFit 2.0 Took Shape
When I started, the SkinnyFit.com redesign had been stalled for months. To reset the project, I built a new pitch deck from the ground up, using fresh eyes to reimagine the brand’s digital experience with clarity, structure, and modern UX principles. I presented this vision directly to the CEOs, outlining opportunities to improve navigation, product education, and conversion. The pitch not only revived the project but also set the creative direction that guided every stage of the redesign.
The Approach
SkinnyFit.com needed a clear, scalable plan to move the stalled redesign forward. With fresh eyes and full creative control, I structured the project into three strategic phases that allowed us to launch a strong foundation quickly while setting up the brand for long-term growth.
Phase 1 focused on the core eCommerce experience: homepage, category pages, product detail pages, cart, checkout, testimonials, reviews, help, FAQs, legal pages, and the error page. These essentials rebuilt the shopping flow and established a cohesive, modern baseline.
Phase 2 expanded engagement with video-rich PDPs, account integration, an About page, order status, an influencer hub, and a sticky reviews feature.
Phase 3 introduced deeper retention features, including a loyalty program, improved search, a Shop by Goal experience, the Detox Program guide, and a blog redesign.
This phased approach created clarity for leadership, streamlined development, and ensured SkinnyFit 2.0 evolved with intention and purpose.
Wireframes
The wireframing stage was the foundation of SkinnyFit 2.0 — where the new UX system took shape and the structure of every page was defined. I created a full set of low-fidelity wireframes to map out hierarchy, content flow, and user behavior across the core eCommerce experience. This step ensured clarity before visual design began, aligned stakeholders on the functionality of each page, and established a scalable system that made building future phases easier. By focusing on usability, consistency, and flexibility, the wireframes provided a blueprint that guided both design and development through the rest of the project.
Key Features: Phase 1
Homepage
The SkinnyFit 2.0 homepage was designed to create a stronger first impression while guiding customers seamlessly into the shopping experience. I restructured the page to highlight clarity, credibility, and product discovery from the moment users land on the site. This began with a top messaging bar for timely promotions, accessible contact information, and a sticky navigation system that kept core actions—Shop, About, SkinnyFit Success, Blog, and Help—always within reach.
The hero section shifted to a lifestyle-driven approach with centered content that humanized the brand and connected more emotionally with visitors. To strengthen trust and social proof, I integrated a Press bar and a dedicated Best Sellers section, followed by a Testimonials module that reinforced real customer results. Below the fold, a blog carousel showcased educational content and supported SEO, while social media integration helped extend engagement beyond the site. The redesign concluded with a fully reimagined footer featuring streamlined navigation and an email capture form to grow the brand’s audience. Together, these updates created a more modern, credible, and conversion-focused homepage experience.
Category Page
The Category Page redesign focused on creating a cleaner, more shoppable layout that made it easy for customers to browse SkinnyFit’s product lineup. Each category featured a simple header followed by product cards showcasing the product rendering, name, clear starting price, and a prominent CTA. To help guide customers, each category also included a brief description that introduced the product range and explained its purpose. The result was a straightforward, user-friendly structure that supported quick scanning and confident decision-making.
Product Detail Page
One of the biggest gaps in the original SkinnyFit website was the complete absence of product detail pages, leaving customers without the information they needed to understand the products or feel confident purchasing. My redesign introduced a fully built-out PDP experience that educated, reassured, and guided users from interest to conversion. Above the fold, I emphasized a large product name, a prominent product rendering, ratings and reviews, a concise description, quantity selection, and clear subscription versus one-time pricing. Additional alt images showcased close-ups of the product and supplement facts, while social proof—Instagram and Facebook follower counts—reinforced brand credibility. A bold, high-visibility CTA anchored the primary interaction.
Below the fold, I added press logos for trust, followed by a meta navigation bar that allowed users to jump to key sections. The layout included a full ingredients breakdown with brief descriptions, a universal “How to Use” section using a consistent 3-step template, a Benefits section, Testimonials from real customers, integrated YOTPO Reviews, and a “You May Also Like” module to support cross-selling. Together, these components created a comprehensive, high-conversion PDP experience that the brand had previously been missing.
Cart
For the Cart experience, I explored multiple scenarios to make the shopping flow more helpful, informative, and conversion-driven. When the cart was empty, clicking the Cart icon prompted a friendly message paired with a curated Best Sellers upsell to re-engage shoppers and guide them back into the purchase journey. I also designed variations for carts containing one-time purchases versus subscription items. Subscription products included a clear breakdown of benefits to encourage recurring orders and highlight long-term value. These updates created a cart experience that was more intuitive, more persuasive, and better aligned with SkinnyFit’s retention goals.
Checkout
Checkout was the area with the most constraints. The CEOs were hesitant to introduce major changes upfront, concerned that deviating too far from the existing design might impact conversion. Because of this, the Phase 1 launch focused on proposing only minimal, low-risk improvements to modernize the layout without disrupting performance. While the initial update kept the core structure familiar, it established a cleaner, more organized foundation that we were later able to elevate over time as leadership gained confidence in the redesign direction.
Privacy Policy
The Privacy Policy page was simplified into a clean, text-based layout that focused on clarity and readability. I organized the content using clear hierarchy—H1 for the main title, H2 for key sections, and body copy for supporting details—making it easier for users to scan, understand, and trust the information. This structured approach ensured the page felt straightforward, transparent, and aligned with modern UX standards.
Help
The original Help page only offered a phone number and email, which limited how customers could reach support. I redesigned it into a more user-friendly support portal where visitors could submit messages directly through a structured form that captured their name, email, topic, required details, and any attachments. The phone number remained visible for those who preferred direct contact, and a clear link to the Frequently Asked Questions provided quick access to common answers. This approach created a more organized, accessible Help experience that streamlined communication and improved overall customer support.
Frequently Asked Questions
The FAQ page was redesigned using an accordion layout that allowed customers to easily expand or collapse questions as needed. I organized the content into clear categories — Top Questions, SkinnyFit Best Sellers, Ingredients, Orders, Subscriptions, and Company — to help users quickly find relevant information without feeling overwhelmed. This structure made the page more intuitive, scannable, and efficient for resolving common customer inquiries.
Customer Reviews
With YOTPO’s automated review emails already in place, SkinnyFit had collected hundreds of positive, verified customer reviews — but none of them were visible on the website. I proposed creating a dedicated Customer Reviews page that integrated the full YOTPO feed, allowing shoppers to browse real experiences, filter by product, and gain confidence before purchasing. Showcasing this volume of social proof not only strengthened credibility but also supported conversion by giving potential customers an authentic look at what others loved about SkinnyFit.
