Smart Home App — Mobile UI Design

Final project for my Mobile UI Design course. A responsive, accessibility-minded app that centralizes smart-device control (lighting, climate, security) with simple, cohesive UI patterns.

Smart Home App mockup showing the main dashboard and device controls

Project Overview

This Smart Home App was created as the final project in my Mobile UI Design course (Spring 2024). The brief: design a mobile experience that simplifies everyday tasks using design thinking, storytelling for empathy, and high-fidelity UI patterns in Adobe XD.

The problem: smart devices often live in separate apps with inconsistent patterns. The opportunity: a single, cohesive interface for core tasks (lighting, climate, and security) that reduces cognitive load and speeds up routine actions.

Learning Objectives

  • Apply Design Thinking — Ideate and Prototype
  • Use storytelling to activate empathy
  • Create mobile UI layouts with real content
  • Simplify the customer experience
  • Build a style guide, patterns, and design system in Adobe XD
  • Deliver consistent, cohesive high-fidelity prototypes in XD

Goals

  • Unify essential smart-home tasks (lights, climate, security) in one app
  • Design clear, predictable patterns and a lightweight design system
  • Support quick actions (on/off, scenes, schedules) with minimal taps
  • Improve accessibility and legibility in key states and controls
  • Ship a polished, testable high-fidelity prototype in Adobe XD

Audience & Landscape

Target Users

Renters and homeowners (18–55) who own multiple smart devices and want fewer apps and faster everyday control.

Reference Apps

Studied patterns from Apple Home, Google Home, and SmartThings to inform navigation, states, and quick actions.

My Role

  • UX/UI Designer: Information architecture, flows, and interface design
  • Design System: Tokens, components, states, and interaction patterns
  • Prototyper (Adobe XD): Interactive prototype for core tasks and scenarios
  • Usability: Quick tests to validate clarity, speed, and accessibility

Tools & Skills Used

📱
Adobe XD
🎨
Mobile UI Design
🧩
Design Systems
🔍
User Research
♿
Accessibility
🎯
Prototyping

Process & Solution

Approach

  1. Empathy & Storytelling: daily routines → quick tasks → edge cases
  2. IA & Flows: home dashboard, rooms, devices, scenes, schedules
  3. Lo-Fi → Hi-Fi: iterate on card density, control affordances, and states
  4. Design System: type scale, color tokens, interactive components
  5. Prototype & Validate: rapid tests on clarity and speed of common tasks

Watch the Demo

Smart Home App prototype walkthrough:

Gallery & Mockups

Smart Home App low-fidelity wireframes and key user flows
Smart Home App sitemap and navigation structure
Smart Home App high-fidelity dashboard with device controls
Smart Home App rooms screen with quick actions
Smart Home App device details and state controls
Smart Home App scenes and schedules

Reflection & Outcome

This course project sharpened my end-to-end UX process: translating needs into flows, building a design system, and validating whether patterns actually speed up common tasks. The result is a cohesive prototype that centralizes device control with clarity and accessibility.

Key takeaways: start with the most frequent actions, design for state clarity, and document components early. These practices made iteration faster and the final prototype more consistent.

← Back to Portfolio