Smart Home App

An intuitive, accessible smart home interface optimized for night-time use and multi-brand compatibility.

Project Overview

Duration: 4 weeks

Role: Lead UX/UI Designer (Solo Project)

Tools: Figma, Notion, WCAG Contrast Checker

I challenged myself to design a mobile app that unifies control of lighting, climate, and appliances across multiple brands into a single, intuitive experience. My focus was on creating a calm, accessible, and energy-efficient interface, that would blend with the users home and lifestyle.

Problem Statement

Modern smart home apps often suffer from fragmented ecosystems, complex onboarding, and poor accessibility, making it difficult for users—especially those using devices from multiple brands—to seamlessly manage their home environment. Users are overwhelmed by cluttered dashboards, unreliable automations, and inaccessible UI elements, leading to frustration and abandonment. There is a clear need for a unified, intuitive, and accessible solution that simplifies setup, improves reliability, and supports a diverse range of devices while user-friendly and blending seamlessly into users lifestyles and home environments.

Research & Discovery

User Personas

George — The Safety-Seeking Senior

Age: 65–75
“I need something easy. If it’s hidden behind tiny icons, I’m not going to use it.”

Goals: to feel secure and comfortable at home by easily controlling lighting and temperature without confusion. He aims to manage his smart devices confidently without frustration.

Needs: He requires clear labels, a simplified dashboard that focuses on essential functions, and large tap targets that make interactions easy and accessible.

Frustrations: George finds icon-only layouts confusing, struggles with small text and buttons, and is annoyed by deeply nested menus that complicate simple tasks.

Design Direction:

The app should prioritize text over icons to improve readability, provide large buttons by default, and offer optional voice feedback to support accessibility and ease of use.

Maria — The Eco-Minded Renter

Age: 25–35
“I want to save energy but not spend 30 minutes setting up schedules.”

Goals: Maria aims to reduce her energy consumption effortlessly while receiving clear feedback on how her actions impact usage. She wants a hassle-free experience that fits her busy lifestyle.

Needs: She needs pre-built scenes for quick energy-saving activation and clean visual feedback that clearly shows energy usage and savings.

Frustrations: Maria is frustrated by complicated automation setups requiring too many steps and apps that lack transparent feedback on energy impact. She also finds many smart home apps poorly suited for renters.

Design Direction:

The app should offer simple preset scenes, easy-to-understand energy status indicators, and flexible setup options that do not require home ownership or complex installations.

Alex — The Tech-Savvy Homeowner

Age: 30–40
“I want one app to control everything — not ten different ones that don’t talk to each other.”

Goals: Alex’s goal is to have full control of a multi-brand smart home system with deep automation customization and seamless device integration.

Needs: He needs cross-brand device compatibility, a powerful yet intuitive automation builder, and fast access to his favorite controls and scenes.

Frustrations: Alex is frustrated by devices and apps that don’t integrate well, limited or unintuitive automation tools, and fragmented interfaces that make control complicated.

Design Direction: The design should focus on brand-agnostic device integration, a modular automation system with logic customization, and pro-user shortcuts with reusable templates.

Competitive Analysis

I analyzed Google Home, Apple Home, Samsung SmartThings, and Philips Hue to identify common user pain points:

Ecosystem Lock-In: 87% of users report devices “don’t work properly” when mixing brands; most apps only natively support their own hardware.

Complex Setup & Onboarding: Matter-based pairing often requires jumping between platforms (e.g., iOS to Android) and manually copying codes.

Clutter & Discoverability: Dashboards overloaded with icons; key automations and settings are buried deep within menus.

Performance & Reliability: Slow load times, unexplained disconnections, and inconsistent behavior in custom automation rules.

Accessibility & Readability: Light-mode UIs frequently fail WCAG contrast standards, causing eye strain especially for older users.

Key Research Insights & Design Responses

Ecosystem lock-in limits usability across mixed-brand devices.
→ I created a brand-neutral UI with modular device grouping to provide a unified experience across brands.

Setup flows are fragmented; users struggle with platform switching and manual code entry.
→ I developed a guided onboarding flow with smart pairing assistance that adapts to the user’s OS and simplifies the Matter setup process.

Dashboards are cluttered with unlabeled icons, hiding important automations.
→ I implemented a card-based layout featuring collapsible categories and paired icon–text labels for easier discovery.

Users experience delays, disconnections, and unreliable automation behavior.
→ I designed feedback states and preview steps for automations to improve reliability and build user trust.

Light-mode UIs fail contrast checks and cause eye strain.
→ I set dark mode as the default, applied WCAG-compliant contrast ratios, and incorporated scalable, legible typography with text over icons for improved readability

(Design Response)

Users often use smart apps at night - Designed for dark mode as default

Many apps break WCAG contrast standards - Chose colors based on readability testing

Eco-users care about energy use - Integrated subtle usage indicators

Older users get lost in icon-only UIs - Paired icons with clear labels

Most apps are tied to one brand - Designed UI to feel neutral, not brand-specific

Design Evolution

Purpose: Show how you learned and iterated.

  • Initial concept or visual direction (e.g. light UI, minimal)

  • What changed & why (e.g. readability concerns, user feedback)

  • Screens of V1 vs final design

  • What you learned (shows humility + growth)

Only include if the evolution was meaningful — in your case, it was.

Initial Concept

At first, I aimed for a light, soft aesthetic that would blend into the home environment — using pastel backgrounds, subtle gradients, and white text. The goal was calm, ambient design.

However, I ran into significant accessibility challenges, especially:

  • Poor text readability in daylight and dim lighting

  • Failure to pass WCAG contrast standards

  • Visually straining on OLED devices at night

The Pivot to Dark Mode

After user feedback and testing, I shifted to a dark-mode-first approach.

Why?

  • Better readability for white/light text

  • Reduces eye strain at night (a key use case)

  • More energy efficient on OLED screens

  • Visually aligned with "tech luxury" aesthetic

I still included a light mode toggle in the settings for adaptability — but dark mode became the core experience.

Design Goals

  • Prioritize readability and accessibility

  • Create a premium, calming interface

  • Allow quick access to favorite devices

  • Design for multiple device ecosystems

  • Respect different user skill levels

  • Design Goals / Principles

  • What it is: A few core principles that guided your design choices.

  • Example:

    • Seamless across brands

    • Designed for night use

    • Accessible for older adults

    • Energy usage transparency

This helps people understand your thinking before they see the screens.

Information Architecture & UX Design

Purpose: Show structure before screens.

  • User Flows (key tasks like “create a routine” or “add device”)

  • Site Map (if needed)

  • Wireframes (only key screens, keep it clean)

Include these if you're showing how you thought through logic, flow, and layout before visuals.

Best Practices:

  • Show how you structured the app: sitemap, navigation, content hierarchy

  • Include sketches, wireframes, or flowcharts

  • Explain decision-making: Why this flow? Why this layout?

  • Mention how personas influenced the UX

📌 Optional: include low-fidelity wireframes or flow mockups with notes.

Wireframes & UX Logic /Flows

This section will show sketches or grayscale wireframes highlighting:

  • Dashboard hierarchy

  • Quick access zones

  • Device detail pages

  • Interaction patterns

  • What it is: Early sketches or mid-fidelity wireframes showing layout, flow, and logic.

  • Include:

    • Key screens (onboarding, home dashboard, adding device, automations)

    • Flow diagrams if needed

Make it clear how users move through the app.

Visual Design System

Fonts, colors, components, spacing, UI rules, mood — “the building blocks.”
Include:

  • Color palette (with accessibility notes)

  • Typography system

  • Button states

  • Cards, toggles, icons, etc.

  • Layout grid or spacing logic

Core Features & Flows

Each major UX flow or feature, structured clearly.

Make each feature a sub-section inside this section.

For example:

Onboarding & Device Pairing

  • What user need it solves

  • UX reasoning (e.g., simplified Matter flow across OS)

  • Key screens

  • Annotations or captions for decisions

  • (Optional) Prototype or GIF if useful

Dashboard Navigation & Grouping

  • Modular device blocks for brand-neutral control

  • Card-based layout to reduce clutter

  • Example screens, small captions, before/after if useful

  • Automations & Feedback States

  • Preview-before-apply logic

  • Reliability & trust-building decisions

  • Example interaction, caption

You can include 3–5 major flows or feature highlights, depending on scopeVisual Design & UI System

  • What it is: Final screens and visual polish.

  • Include:

    • Your design system or components (e.g., buttons, cards, colors, type)

    • High-fidelity mockups

    • Mode toggle (dark/light), feedback states, accessibility features

Use mockups in context (e.g., on phones) to make it shine visually.

Best Practices:

  • Show how you translated wireframes into UI

  • Highlight your design system:

    • Color palette (include your pivot to dark mode)

    • Typography choices

    • Components (buttons, cards, toggles, nav)

  • Showcase design iterations and UI evolution

  • Include light mode variation if available

📌 Explain how UI choices align with accessibility & persona needs.

UI Design & Core Features

Purpose: Bring the solution to life.

Break it into core flows — this makes complex products digestible.

Each feature/flow section should include:

  • What user need it solves

  • Short UX reasoning behind your decisions

  • Final UI mockups or clickable prototype

  • Optional: show interaction/motion if relevant

🧠 Recommended flow examples:

  • Onboarding & Setup

  • Dashboard Navigation

  • Adding Devices & Scenes

  • Creating Routines & Automations

Accessibility Considerations

5. Key Screens & Features

Best Practices:

  • Highlight 3–5 core user flows (with mockups or clickable prototype previews):

    • Dashboard

    • Device control

    • Automation setup

    • Settings (theme toggle, accessibility)

  • Walk through each screen with brief captions

  • Include micro-interactions or animations if possible (GIFs or Figma video)

📌 Use real scenarios: “User wants to turn off all lights at night with one tap.”

Smart Pairing & Onboarding Flow

User Need: Simplify setup across OS platforms and Matter standard.

Design Decisions:

  • Guided onboarding adapts per OS (iOS vs Android)

  • Eliminated code-copying via dynamic handoff and device scan

  • Status indicators show progress and errors in real time

Screens:
[Insert 2–3 screens, with small labels or steps underneath]

Result: Reduced onboarding steps by 40% and improved user clarity.

Motion & Prototypes (if available)

If you have working motion/transition or hi-fi prototype, create a dedicated short section called:

Prototypes & Interaction Highlights

Otherwise, sprinkle short inline GIFs or links to prototypes inside Core Features where relevant.

Accessibility & Responsiveness

Purpose: Prove your product works for everyone.

  • WCAG compliance (color, contrast)

  • Typography and legibility choices

  • Tap target sizing

  • Icon + label design

  • Dark mode as default

✅ Make this its own section if it's a core part of your UX value (which it is in your case).

Best Practices:

  • Explain contrast compliance (WCAG AA/AAA)

  • Font sizing, color, touch targets

  • Responsive behavior (tablet/phone)

  • Voice or alternative interaction support (if relevant)

📌 You already nailed the accessibility story — just frame it clearly here.

(Prototyping) & Usability Testing

  • What it is: Link to a clickable prototype (Figma, Framer, InVision).

  • Show interactivity, transitions, and key flows.

Best Practices:

  • Did you test it? Show how.

  • Mention:

    • What did users struggle with?

    • What surprised you?

    • What you improved as a result

  • Include quotes or feedback if available

  • Include before/after comparisons for iterations

📌 If you didn’t run a real test, describe how you would.

Final Result

Outcome & Next Steps

Purpose: Reflect and show maturity.

  • What worked well

  • What you would improve (e.g. user testing, future features)

  • What you learned

  • What’s next (user testing, beta, redesign?)

Best Practices:

  • Show polished final screens or short video prototype

  • Recap what you accomplished:

    • How it solves the original problem

    • Which persona it serves best

    • What makes this product stand out

( Reflection / Learnings

  • What it is: What you learned during the process and what you'd do differently next time.

  • Include:

    • Any pivots you made

    • Tools/processes that helped

    • Limitations (and how you'd improve)

    • Reflection / What I Learned

    Best Practices:

    • Reflect on:

      • Design pivots (like the shift to dark mode)

      • What you’d do differently with more time or data

      • Soft skills used (decision-making, empathy, problem-solving)

    📌 Make it personal. Show you grew as a designer.

Next Steps )

  • What it is: If it’s a concept, mention future potential (e.g., “I plan to test the prototype with users”).

  • 0. Next Steps / Future Thinking (Optional)

    • What features would you add in the future?

    • Could this become cross-platform (e.g., smartwatch)?

    • Can it integrate voice control or AI?

    • Is there opportunity for multi-user access or guest modes?