Eclaire
Category:
Web App Design
Duration:
6 weeks
Eclaire is a conceptual desktop web tool that helps users customize lighting solutions based on room layout, lifestyle needs, and existing lighting conditions with the help of AI and Augmented Reality tools. The tool guides users through three intuitive steps and allows them to see lighting impact before making a purchase.
Eclaire is a conceptual desktop web tool that helps users customize lighting solutions based on room layout, lifestyle needs, and existing lighting conditions with the help of AI and Augmented Reality tools. The tool guides users through three intuitive steps and allows them to see lighting impact before making a purchase.
Eclaire is a conceptual desktop web tool that helps users customize lighting solutions based on room layout, lifestyle needs, and existing lighting conditions with the help of AI and Augmented Reality tools. The tool guides users through three intuitive steps and allows them to see lighting impact before making a purchase.
Project Overview
Lighting design is often treated as an afterthought in online furniture and home decor platforms. Yet, for many people, the right lighting can transform both function and mood of their spaces.
Eclaire guides users through three intuitive steps to get to their desired lighting situation.
Platform: Desktop
User Focus: Time-strapped adults in need of interior design support
Problem: Lighting is often too technical (design choice, installation)
My Role: Sole designer (Concept, UX, UI, research, visual design, prototyping)
Lighting design is often treated as an afterthought in online furniture and home decor platforms. Yet, for many people, the right lighting can transform both function and mood of their spaces.
Eclaire guides users through three intuitive steps to get to their desired lighting situation.
Platform: Desktop
User Focus: Time-strapped adults in need of interior design support
Problem: Lighting is often too technical (design choice, installation)
My Role: Sole designer (Concept, UX, UI, research, visual design, prototyping)
Discovery & Research
Discovery & Research
Discovery & Research
To understand how people think about lighting in their homes, I conducted:
In-depth user interviews to find pain points
Competitive audit (Home Depot, Etsy, Ikea, Wayfair, etc)
Key insights:
People feel overwhelmed by lighting options and jargon
Lighting is both emotional and functional, but few platforms address both
Users want guidance, and easy to imagine results
To understand how people think about lighting in their homes, I conducted:
In-depth user interviews to find pain points
Competitive audit (Home Depot, Etsy, Ikea, Wayfair, etc)
Key insights:
People feel overwhelmed by lighting options and jargon
Lighting is both emotional and functional, but few platforms address both
Users want guidance, and easy to imagine results
To understand how people think about lighting in their homes, I conducted:
In-depth user interviews to find pain points
Competitive audit (Home Depot, Etsy, Ikea, Wayfair, etc)
Key insights:
People feel overwhelmed by lighting options and jargon
Lighting is both emotional and functional, but few platforms address both
Users want guidance, and easy to imagine results
Defining the Problem
Defining the Problem
Based on research, I created three representative personas to guide the design:
People want personalized lighting but don’t have the time or expertise to figure out what works best for their space. They crave:
A structured path to decision-making
Visual feedback for confidence
Simple, customizable options
People want personalized lighting but don’t have the time or expertise to figure out what works best for their space. They crave:
A structured path to decision-making
Visual feedback for confidence
Simple, customizable options
Ideation and Lo-fi wireframes
Ideation and Lo-fi wireframes
Ideation and Lo-fi wireframes
I began with paper sketches and a storyboard that walked through an ideal user journey. Then I designed:
To-be task flow, and low-fi screens that broke the process into 3 steps
Mid-fi wireframes with logic around lighting needs and recommendations
I began with paper sketches and a storyboard that walked through an ideal user journey. Then I designed:
To-be task flow, and low-fi screens that broke the process into 3 steps
Mid-fi wireframes with logic around lighting needs and recommendations
Mid-fi and Design Decisions
Mid-fi and Design Decisions
After mapping out the user journey and sketching key interactions on paper, I translated the concept into mid-fidelity wireframes. This stage helped me focus on structure, flow, and functionality without the distraction of visual styling. I tested different layouts for the customization flow, refined navigation elements, and clarified the information hierarchy based on early user feedback. These wireframes served as the foundation for usability testing and iterative improvements before moving into high-fidelity design.
After mapping out the user journey and sketching key interactions on paper, I translated the concept into mid-fidelity wireframes. This stage helped me focus on structure, flow, and functionality without the distraction of visual styling. I tested different layouts for the customization flow, refined navigation elements, and clarified the information hierarchy based on early user feedback. These wireframes served as the foundation for usability testing and iterative improvements before moving into high-fidelity design.
A11Y:
From the start, I prioritized accessibility by using a high-contrast color palette, clear typographic hierarchy, and generous spacing. All interactive elements meet WCAG AA color contrast standards.
A11Y:
From the start, I prioritized accessibility by using a high-contrast color palette, clear typographic hierarchy, and generous spacing. All interactive elements meet WCAG AA color contrast standards.
Final protoype
