Mikhail Solodovnikov

LinkedIn

Read CV

SWISS + POWER

SWISS + POWER

SWISS + POWER

Introduction

SWISS+POWER's LED therapy device sells at €179 — but the Shopify store read like a mass-market beauty brand. As sole designer, I diagnosed the gap as structural: trust signals buried in the footer, navigation built around generic labels, and a hero that led with messaging instead of product.

I redesigned 12 page templates in 4 weeks — new IA, clinical visual direction, and a 40+ component system the team now extends without breaking the language.

I redesigned 12 page templates in 4 weeks:

new UX architecture, clinical visual direction,

and a 40+ component design system the team

extends independently.

Role

Product & UI/UX Designer

Company

SWISS+POWER (Freelance)

Year

2025

Timeline

4 Weeks

Team

Sole Designer · Client collaboration

Categories

Beauty Tech

E-commerce

Scope & outcomes

  • 12 page templates redesigned
  • //
  • 40+ component system
  • //
  • Admin panel build
  • //

Process

Process Seams — Where I Fixed the Flow

Audit & Diagnosis

Wireframes & IA

Visual Design & System

Launch & Handoff

Audit & Diagnosis

Seam Fix: Reframed the brief from "make it look fresh" to "fix the price–perception match for a €179 device." Moved the conversation to structural decisions before any design started.

Artifacts: Site audit, IA gap analysis, competitor scan, client decision brief.

Outcome: Structural diagnosis aligned with the client by day 5. Scope locked before week 2.xt here

Timeline

1 week

Wireframes & IA

Seam Fix: Wireframed all 12 templates with mobile breakpoints before a single color was chosen. IA restructured around three user intents — browse, decide, trust.

Artifacts: 12 wireframed templates, mobile breakpoints, IA map, decision-hierarchy spec.

Outcome: Hierarchy locked with the client before visual work — protected against "make it pop" loops on a 4-week deadline.

Timeline

1 week

Visual Design & System

Seam Fix: Visual direction built against approved wireframes — clinical, restrained, product-centered. Component system designed from the start, not extracted from pages.

Artifacts: 40+ component library, system states (cart, modals, empty), photography direction, typography and color tokens.

Outcome: Zero structural rework when visual direction was applied. System covered every page that followed.

Timeline

1 week

Launch & Handoff

Seam Fix: Documented usage rules so the marketing team extends the system without breaking the language. The language survives without me.

Artifacts: Component docs, page templates, slide cart, FAQ + checkout patterns.

Outcome: Delivered ahead of deadline. Client returned for engagement #2 — backend admin panel build.

Timeline

1 week

Audit & Diagnosis

Wireframes & IA

Visual Design & System

Launch & Handoff

Audit & Diagnosis

Seam Fix: Reframed the brief from "make it look fresh" to "fix the price–perception match for a €179 device." Moved the conversation to structural decisions before any design started.

Artifacts: Site audit, IA gap analysis, competitor scan, client decision brief.

Outcome: Structural diagnosis aligned with the client by day 5. Scope locked before week 2.xt here

Timeline

1 week

Wireframes & IA

Seam Fix: Wireframed all 12 templates with mobile breakpoints before a single color was chosen. IA restructured around three user intents — browse, decide, trust.

Artifacts: 12 wireframed templates, mobile breakpoints, IA map, decision-hierarchy spec.

Outcome: Hierarchy locked with the client before visual work — protected against "make it pop" loops on a 4-week deadline.

Timeline

1 week

Visual Design & System

Seam Fix: Visual direction built against approved wireframes — clinical, restrained, product-centered. Component system designed from the start, not extracted from pages.

Artifacts: 40+ component library, system states (cart, modals, empty), photography direction, typography and color tokens.

Outcome: Zero structural rework when visual direction was applied. System covered every page that followed.

Timeline

1 week

Launch & Handoff

Seam Fix: Documented usage rules so the marketing team extends the system without breaking the language. The language survives without me.

Artifacts: Component docs, page templates, slide cart, FAQ + checkout patterns.

Outcome: Delivered ahead of deadline. Client returned for engagement #2 — backend admin panel build.

Timeline

1 week

Audit & Diagnosis

Wireframes & IA

Visual Design & System

Launch & Handoff

Audit & Diagnosis

Seam Fix: Reframed the brief from "make it look fresh" to "fix the price–perception match for a €179 device." Moved the conversation to structural decisions before any design started.

Artifacts: Site audit, IA gap analysis, competitor scan, client decision brief.

Outcome: Structural diagnosis aligned with the client by day 5. Scope locked before week 2.xt here

Timeline

1 week

Wireframes & IA

Seam Fix: Wireframed all 12 templates with mobile breakpoints before a single color was chosen. IA restructured around three user intents — browse, decide, trust.

Artifacts: 12 wireframed templates, mobile breakpoints, IA map, decision-hierarchy spec.

Outcome: Hierarchy locked with the client before visual work — protected against "make it pop" loops on a 4-week deadline.

Timeline

1 week

Visual Design & System

Seam Fix: Visual direction built against approved wireframes — clinical, restrained, product-centered. Component system designed from the start, not extracted from pages.

Artifacts: 40+ component library, system states (cart, modals, empty), photography direction, typography and color tokens.

Outcome: Zero structural rework when visual direction was applied. System covered every page that followed.

Timeline

1 week

Launch & Handoff

Seam Fix: Documented usage rules so the marketing team extends the system without breaking the language. The language survives without me.

Artifacts: Component docs, page templates, slide cart, FAQ + checkout patterns.

Outcome: Delivered ahead of deadline. Client returned for engagement #2 — backend admin panel build.

Timeline

1 week

Challenges

Broken price–perception match

The product's clinical credibility existed — ELLE award, certifications, 5,000+ reviews — but none of it was visible where purchase decisions happen. Users had no signal that this was a €179 medical-grade device before they hit the price.

Insight: Visual language was the problem, not awareness. The same buyer who converts on a clinical brand page was bouncing from a generic one.

Action: Moved ELLE badge and price anchor into the first viewport. Shifted photography to product-centered, restrained clinical aesthetic throughout.

Template-driven IA blocked scalability

Default Shopify structure forced every new product launch to depend on a designer — content hierarchy was shallow and couldn't reflect how users actually make decisions (by concern, by routine, by product).

Insight: The issue wasn't the template itself — it was that no one had modeled the actual decision path before choosing a structure.

Action: Redesigned IA around three user intents with progressive disclosure for specs. Built a 40+ component system so non-designers can launch new products without breaking the visual language.

Before & After Transformation

Generic wellness brand → clinical device with a price that makes sense.

Navigation restructured around product categories, not generic labels. Hero shifted from brand messaging to product benefit with proof in the same viewport.

Before & After Transformation

Generic wellness brand → clinical device with a price that makes sense.

Navigation restructured around product categories, not generic labels. Hero shifted from brand messaging to product benefit with proof in the same viewport.

Before & After Transformation

Generic wellness brand → clinical device with a price that makes sense.

Navigation restructured around product categories, not generic labels. Hero shifted from brand messaging to product benefit with proof in the same viewport.

Before
After
SWISS+POWER
Before
After
SWISS+POWER

Homepage

Benefit first, proof second, price last — the hierarchy a €179 product needs to earn its click.

ELLE award badge and €179 price anchor placed above the fold — value established before the user decides whether to scroll. Product benefit leads the hierarchy; full specs expand on demand for users who want them.

Homepage

Benefit first, proof second, price last — the hierarchy a €179 product needs to earn its click.

ELLE award badge and €179 price anchor placed above the fold — value established before the user decides whether to scroll. Product benefit leads the hierarchy; full specs expand on demand for users who want them.

Homepage

Benefit first, proof second, price last — the hierarchy a €179 product needs to earn its click.

ELLE award badge and €179 price anchor placed above the fold — value established before the user decides whether to scroll. Product benefit leads the hierarchy; full specs expand on demand for users who want them.

Product page

Benefits answer "what does this do for me" — technical specs unfold on demand for users who want them.

Progressive disclosure keeps the above-fold clean for first-time buyers while giving detail-oriented users access to full specifications without friction. Trust layer — 30-day guarantee, Klarna, certifications — placed directly below the CTA, not in the footer.

Product page

Benefits answer "what does this do for me" — technical specs unfold on demand for users who want them.

Progressive disclosure keeps the above-fold clean for first-time buyers while giving detail-oriented users access to full specifications without friction. Trust layer — 30-day guarantee, Klarna, certifications — placed directly below the CTA, not in the footer.

Product page

Benefits answer "what does this do for me" — technical specs unfold on demand for users who want them.

Progressive disclosure keeps the above-fold clean for first-time buyers while giving detail-oriented users access to full specifications without friction. Trust layer — 30-day guarantee, Klarna, certifications — placed directly below the CTA, not in the footer.

Mobile views

Same decision hierarchy on mobile — primary action always within thumb reach.

Every template adapted with mobile-specific spacing — no horizontal scrolling on product cards, add-to-cart always visible without scrolling. Same decision hierarchy as desktop: benefit first, proof second, price and CTA above the thumb line.

Mobile views

Same decision hierarchy on mobile — primary action always within thumb reach.

Every template adapted with mobile-specific spacing — no horizontal scrolling on product cards, add-to-cart always visible without scrolling. Same decision hierarchy as desktop: benefit first, proof second, price and CTA above the thumb line.

Mobile views

Same decision hierarchy on mobile — primary action always within thumb reach.

Every template adapted with mobile-specific spacing — no horizontal scrolling on product cards, add-to-cart always visible without scrolling. Same decision hierarchy as desktop: benefit first, proof second, price and CTA above the thumb line.

Design system overview

40+ reusable components on a 12-column grid — built so the marketing team can launch new products without breaking the language.

Components cover product cards, trust badges, benefit lists, FAQ accordions, and cart interactions. Every component documented with usage rules so non-designers can extend the system independently.

Design system overview

40+ reusable components on a 12-column grid — built so the marketing team can launch new products without breaking the language.

Components cover product cards, trust badges, benefit lists, FAQ accordions, and cart interactions. Every component documented with usage rules so non-designers can extend the system independently.

Design system overview

40+ reusable components on a 12-column grid — built so the marketing team can launch new products without breaking the language.

Components cover product cards, trust badges, benefit lists, FAQ accordions, and cart interactions. Every component documented with usage rules so non-designers can extend the system independently.

Wireframes

Every template wireframed and reviewed before a single color was chosen — hierarchy decisions locked in week 1.

Wireframe-first process ensured layout logic was validated with the client before any visual direction was applied. This compressed revision cycles and prevented scope creep in weeks 2–4.

Wireframes

Every template wireframed and reviewed before a single color was chosen — hierarchy decisions locked in week 1.

Wireframe-first process ensured layout logic was validated with the client before any visual direction was applied. This compressed revision cycles and prevented scope creep in weeks 2–4.

Wireframes

Every template wireframed and reviewed before a single color was chosen — hierarchy decisions locked in week 1.

Wireframe-first process ensured layout logic was validated with the client before any visual direction was applied. This compressed revision cycles and prevented scope creep in weeks 2–4.

View More.

WOW Person

Live Streaming · Creator Economy

View project →

Nodebase

Visual twin for complex projects

View project →

Let's stay connected.

Let's stay connected.

Let's stay connected.

mikhail_my_name@icloud.com
mikhail_my_name@icloud.com
LinkedIn
Read CV

Create a free website with Framer, the website builder loved by startups, designers and agencies.