Creating an engaging site for a legacy cotton brand with future-ready eCommerce scalability.

UI/UX Design
QA
Launch
2025

Swisspers

Mobile screen of Swisspers homepage

Creating an engaging site for a legacy cotton brand with future-ready eCommerce scalability.

UI/UX Design
QA
Launch
2025

Swisspers

Mobile screen of Swisspers homepage

Creating an engaging site for a legacy cotton brand with future-ready eCommerce scalability.

UI/UX Design
QA
Launch
2025

Swisspers

Mobile screen of Swisspers homepage

Creating an engaging site for a legacy cotton brand with future-ready eCommerce scalability.

UI/UX Design
QA
Launch
2025

Swisspers

Mobile screen of Swisspers homepage
Role

Lead Product Designer

project type

Agency

Responsibilities

Strategy, Design, Handoff

Role

Lead Product Designer

project type

Agency

Responsibilities

Strategy, Design, Handoff

Role

Lead Product Designer

project type

Agency

Responsibilities

Strategy, Design, Handoff

Role

Lead Product Designer

project type

Agency

Responsibilities

Strategy, Design, Handoff

Overview

Cotton care, made simple.

Swisspers, the name behind many everyday cotton essentials, is a go-to brand for cotton rounds, swabs, and pads.

As lead product designer, I managed the full design process—from original site audit to new site build and launch. My focus was on creating an intuitive, informative experience that simplified product discovery and set the foundation for future eCommerce growth.

Step 1: Identifying the problem

Reintroducing a legacy brand through product-led UX.

Following a brand and packaging refresh, Swisspers needed an updated site experience that better supported product discovery and education.

With the majority of users landing on the site after in-store discovery, the user experience needed to prioritize product education and clarity around the full lineup and provide pathways to purchase online through Amazon or Walmart or in local retail locations. With future growth in mind, the site was also thoughtfully designed to scale into a seamless eCommerce experience.

question

How might we build an informative platform that supports in-store and online shopping today—and grows into eCommerce tomorrow?

Swisspers sitemap
Swisspers sitemap
Swisspers sitemap
Swisspers sitemap
Step 2: Ideation & Exploration

Making cotton essentials clear: from info to checkout.

In the ideation and exploration phase, I focused on guiding users to detailed product information, encouraging new product discovery, and simplifying checkout via Amazon and Walmart. I looked at brand sites owned by parent companies that lacked direct eCommerce functionality but redirected users to third-party online suppliers and retail locations, and brainstormed around:

Guiding users to external online suppliers while maintaining a seamless experience

Integrating a store locator that enables users to quickly find nearby retail locations with ease

Designing product pages that could be easily scaled to a full eCommerce experience in the future

Providing product comparisons for similar products to help users find the right product for them

I moved into user flows, mapping how users might navigate the site—whether they were introduced to the brand in-store or discovering it online for the first time. The focus was on clear product education and intuitive paths to checkout.

Working within the limitations of the client’s chosen platform, WordPress, I accounted for restricted plugin functionality while building wireframes. These foundational design choices helped shape a site experience that was both user-friendly and adaptable to the platform’s technical constraints.

Swisspers user flow
Swisspers user flow
Swisspers user flow
links to purchase online
Product detail module
Product detail module
Product detail module
Product detail module
3rd=party Store locator
Store locator page
Store locator page
Store locator page
Store locator page
Educational PDP Set-up for Ecommerce
Educational modules
Educational modules
Educational modules
Educational modules
Product Comparison Chart
Product comparison chart
Product comparison chart
Product comparison chart
Product comparison chart
Guiding Users by category
Collection highlight module
Collection highlight module
Collection highlight module
Collection highlight module
Guiding Users by use case
Horizontal slider by product use case
Horizontal slider by product use case
Horizontal slider by product use case
Horizontal slider by product use case
Step 3: Design Execution

Educate, engage, and simplify.

To bring Swisspers’ refreshed brand to life, the design focused on creating a seamless, intuitive experience that guided users through detailed product information and shopping options with ease. The aim was to reduce confusion from the previous site, build user confidence, and direct users to checkout online or locate nearby retailers. Key design implementations included:

Clear Redirects

Button CTAs clearly labeled with platform logos redirected users to external checkout sites

Store Locator

A dedicated store locator, linked from each product page, enabled easy in-store discovery

Detailed product pages

Product pages were built to scale for future eCommerce with additional product and brand modules

product comparison Chart

Each product page featured a chart to clarify differences and help guide users to the right product for them

My work on the brand refresh gave insight into Swisspers’ vision: a more lifestyle-forward, slightly playful tone to resonate with younger consumers. Leading with the brand's iconic hot pink, I brought in the rest of the color palette and modern typefaces to bring energy and joy to daily essentials.

Clear Redirects, Product Education, Comparison Chart
Final product page
Final product page
Final product page
Final product page
Simplified store locator
Store locator page
Store locator page
Store locator page
Store locator page
Mobile screen of collections module
Mobile screen of collections module
Mobile screen of collections module
Mobile screen of collections module
Mobile screen of About page
Mobile screen of About page
Mobile screen of About page
Mobile screen of About page
Mobile screen of product by use case horizontal slider
Mobile screen of product by use case horizontal slider
Mobile screen of product by use case horizontal slider
Mobile screen of product by use case horizontal slider
Mobile screen of why cotton module
Mobile screen of why cotton module
Mobile screen of why cotton module
Mobile screen of why cotton module
Mobile screen of product list page
Mobile screen of product list page
Mobile screen of product list page
Mobile screen of product list page
Mobile screen of how to use module on product page
Mobile screen of how to use module on product page
Mobile screen of how to use module on product page
Mobile screen of how to use module on product page
Product collection page
Product collection page
Product collection page
Product collection page
Product heatmap module
Product heatmap module
Product heatmap module
Product heatmap module
Impact

Empowering discovery and enabling growth.

The updated experience positioned Swisspers for future eCommerce growth while aligning with its refreshed, lifestyle-forward brand identity. Clear pathways guided users to shop online or find nearby retail locations, and the product comparison module simplified decision-making across similar SKUs, ensuring a seamless browsing experience. The refreshed website UI brought energy and clarity to the brand’s everyday essentials—pairing bold color and modern type with intuitive UX to support product discovery and conversion.

Scalable Foundation

each page and module was built to easily scale to ecommerce in the future

Satisfied Client

The Client was Ecstatic about the site design and how the final assets turned out

Reduced Friction

users were guided smoothly to third-party checkout or a store locator