Smart Home — UX/UI Case Study

Overview

Project Overview

A complete UX/UI case study for a smart home ecosystem — covering mobile app and web platform design. Full design thinking methodology: from user research through wireframes to a production-ready dark UI design system for IoT device control.

Challenge

The Challenge

Smart home apps are often overly complex, intimidating for non-technical users, and visually inconsistent across devices. The challenge was designing a unified experience that makes controlling a connected home feel effortless, safe, and elegant — regardless of whether the user is on a mobile phone or a desktop web dashboard.

Methodology

Design Process

1

User Research & Interviews

Conducted in-depth interviews with 12 smart home users. Identified pain points around device discovery, task complexity, and inconsistent feedback. Synthesised findings into affinity maps and user journey maps.

2

Competitive Analysis

Audited leading smart home platforms — Apple Home, Google Home, Samsung SmartThings, and Home Assistant. Mapped UX patterns, identified opportunity spaces, and documented best practices for IoT interface design.

3

Information Architecture

Designed a clear IA that organises devices by room and type. Created card sorting sessions to validate mental models. Defined navigation patterns and hierarchy for both the mobile app and the web dashboard.

4

Wireframing & Prototyping

Produced low-fidelity sketches, mid-fidelity wireframes, and fully interactive Figma prototypes. Ran two rounds of usability testing via Maze to validate flows and iterate on friction points.

5

Visual Design & Design System

Built a production-ready dark UI design system with tokens, components, and documentation. Applied WCAG 2.1 AA accessibility standards. Delivered final high-fidelity screens for iOS and responsive web.

Deliverables

Key Deliverables

📱

Mobile App UI (iOS)

Full set of high-fidelity iOS screens — home dashboard, device controls, room views, automation flows, and onboarding. Designed for iPhone at native resolution with dark and light modes.

🖥️

Responsive Web Platform

A feature-complete web dashboard designed across three breakpoints. Sidebar navigation, data visualisation widgets, device management tables, and real-time status indicators.

🎨

Design System & Components

Documented Figma component library with design tokens, colour styles, typography scale, icon set, and usage guidelines — ready for developer handoff.

👤

User Personas

Three detailed personas derived from research — a tech-savvy early adopter, a privacy-conscious family user, and an elderly user prioritising simplicity. View full personas →

⚡

Interactive Prototypes

Clickable Figma prototypes covering the five core user flows: device control, room management, automation setup, energy monitoring, and security alerts.

🏠

IoT Device Controls

Specialised control components for lights (brightness, colour temperature), climate (thermostat, humidity), security cameras, locks, and energy consumption — with real-time state feedback.

Toolset

Tools Used

Figma

Adobe XD

Maze

Notion

Outcomes

Results

Full

Design System

Mobile + Web

Platforms Covered

WCAG

AA Compliant

26

Behance Views