Blue Light Blocking Glasses

An education-driven e-commerce experience designed to help users reduce digital eye strain and confidently choose the right lens.

Focused on clarity, trust, and conversion for digital wellness products.

Duration

4 Weeks

Role

Lead UI/UX Designer

Blue light blocking glasses website UI
The Problem

During my research, I found that users who spend long hours in front of screens experience eye strain and sleep disruption, but struggle to choose the right blue light glasses online.

Most existing platforms focus heavily on style, while critical information about lens technology and real benefits is unclear or missing—leading to confusion, low trust, and drop-offs before purchase.

The Solution

I designed a lens-first, education-driven e-commerce experience that prioritizes clarity and trust before conversion—positioning blue light glasses as a digital wellness essential rather than just a fashion accessory.

The Design Process

Phase 1
Research

User pain points, competitor analysis, and trust issues.

Phase 2
IA & Flow

Structured education before product push.

Phase 3
Visual Design

Calm, minimal UI focused on readability.

User Persona

Working Professional
  • Age: 25–40
  • Screen time: 8–10 hrs/day
  • Pain points: Eye strain, headaches
  • Goal: Comfort without sacrificing style

Information Architecture

  • Home – Value & trust
  • How it Works – Education
  • Shop – Product listing
  • Product Detail – Benefits & reviews
  • Checkout – Minimal flow

Wireframing Approach

Low-fidelity wireframes were used to define hierarchy, CTA placement, and educational priority before visual styling.

Color System

Primary – Trust
Text
Background

Typography

  • Primary Font: Inter
  • Usage: Headings, body, CTAs
  • Reason: High screen readability

Key Outcomes

  • Improved product understanding
  • Higher user trust before purchase
  • Smoother conversion journey

Want to see the full experience?

I can walk you through the Figma design and decisions.