Case studySmart homes2020–2022

A wall panel as simple as a light switch.

A touchscreen in the wall of almost every room in Veev's prefabricated homes. An agency designed the first version around gestures. I redesigned it around simple, visible controls, together with the mobile app.

Role
UX/UI Designer
Company
Veev
Timeline
2020–2022
Platform
Android wall panel
Veev wall panel in a living room, showing controls for Main Light, Entrance Light and Wall Sconces
Problem

The first panel, designed by an agency, was hard to navigate and relied on complex gestures. Veev also needed it to support new devices.

What I did

Replaced the hidden gestures with controls you can see, moved navigation into a fixed rail, and designed it together with the new app.

Result

A panel that works like a switch. Lights, shades, the front door and modes are one tap away, in the same design language as the app.

01The problem

Hard to use, with more devices on the way.

An agency designed the first panel. It was hard to navigate and relied on complex gestures. At the same time, Veev was adding new devices and technologies.

For the people at home

No time to learn.

The panel sits on the wall of almost every room, hallways included. Homeowners use it, and so do guests, children and residents who are not technical. Nobody gets onboarding. The benchmark was the physical light switch.

For the home

Every home is different.

Each home had its own mix of rooms and devices, and the panel had to handle all of them. Veev sold premium homes, so it also had to be visually quiet and fit any interior.

02Research and concepts

Start from what is in each room.

I began with the floor plans and the devices of each unit. Then I wireframed a new direction for each device type.

Research

Room by room.

For each unit I went through the floor plan, the light fixtures and the devices in every room. A room breakdown shows what its panel has to control.

Example
Walnut, unit 3A, Master Bathroom.
Controls
One light, climate with a fan and floor heating, modes and panel settings.
Research board: a unit floor plan, the typical light fixtures of a unit, a room breakdown for the Master Bathroom in unit 3A, and grayscale wireframes for lights, blinds, climate and the front door
Visual concepts for the panel in dark navy, dark green and light versions, with different layouts for lights, shades, climate and modes
Concepts

Dark, light and in between.

I explored dark and light directions, and different layouts for lights, shades, climate and modes. The final design uses a dark rail for navigation and a light canvas for the controls.

03Key decision

Visible controls instead of hidden gestures.

The agency's spec relied on long presses, drags and an edge swipe. Nothing on screen showed them. I replaced them with controls you can see.

Before · GesturesDim the room lights
  1. V1 home screen: large round buttons for Lights, Blinds and Modes on a dark navy background, with Lights On and Blinds Open toggles below

    1Touch and hold the Lights button.

  2. V1 lights take-over: a large shape fills the screen and grows as you slide, with the level at 50 percent

    2Slide on the full-screen take-over. The direction depended on where the button sat on the screen.

For a button on the right, you slid left and up. For a button on the left, the other way. A tap on the same button did something else and opened a screen with each light on its own.

After · Visible controlsDim the room lights
  1. V2 home screen: a Lights control with dots marking the level, Shades with a handle, and AC with plus and minus buttons

    1Slide along the light.

The control is always on screen, in the same place, and it moves the same way the light level does.

TaskBeforeAfter
Dim the lightsHold the button, then slide on a full-screen take-over. The direction depended on where the button sat.Slide along the light, or tap ON or OFF.
Move the blindsHold the button, then slide on a full-screen take-over.Drag the handle on the shade itself.
Open the menuDrag from the left edge of the screen. A thin bar was the only hint.Always visible in the rail.
Set the temperatureScroll a wheel of numbers.Tap − or +.

V1 screens are rendered from the agency's design file. The gestures are described in that file's own notes.

Play the problem

The babysitter test.

Be a guest in a Veev home. Do the same two tasks on the agency's panel and on my redesign, and compare.

Old panelNew panel
  • Dim the living room lights low. Leave a little light on.
  • Check that the front door is locked.
0.0sec0missteps
Blinds Modes Lights Lights On Blinds Open Temp is 72° 100% Living Room Temp is70° Front DoorLocked GarageClosed
Your role

You are babysitting in a Veev home.

The kids just fell asleep. You have never used this wall panel before. Do two things:

  1. Dim the living room lights low. Leave a little light on.
  2. Check that the front door is locked.

Round 1 is the agency's original panel. Round 2 is my redesign. Both rounds are timed. If you get stuck, the panel shows you where to press.

How the old panel works here: tapping a button opens each light on its own, dimming needs a long press and a slide whose direction depends on where the button sits, and the menu hides behind a drag from the left edge. This follows the agency's own design notes, simplified for the browser.

04The product

Controls that work like switches.

Large, simple controls on a light canvas. Dimmable lights get a control you slide, with dots as anchors for the level. On/off lights get a simple switch.

Wed, Dec 8 10:15 PM Lights ON OFF Shades AC ON 74° HEAT

Lights 61% · Shade 57% closed · AC on, 74°, heat

Try itThe home screen, rebuilt from the final design as a working demo. Slide the light, drag the shade or change the AC.
Navigation

Every device type one tap away.

The rail on the left holds Home, Modes, Door, Lights, Shades and Settings. The date and time stay on top of every screen.

Three panel screens: the home screen with lights, shades and AC, the lights screen with Main Light, Entrance Light and Wall Sconces, and the front door camera
Shades screen on a wall panel with three shades, Left, Center and Right, each at a different height
Shades

One control per window.

Each shade has its own control. Drag the handle to set its height.

Front door

Answer the door from any room.

The doorbell camera opens on the panel. Press to talk, and slide to unlock the door.

Front door screen: doorbell video of a courier at the door, with Press to Talk, Slide to Unlock Door and End Call
Veev app on two phones: the home screen and the Entrance Light screen, in the same dark green and light style as the panel
One system

Designed with the app.

I redesigned the panel at the same time as the mobile app. Both use the same colors and controls, so a device looks and works the same on the wall and on the phone.

05Learnings

What I learned.

  1. 01

    Speed builds trust.

    The benchmark is the light switch. If a tap does not respond at once, people stop trusting the panel.

  2. 02

    Visible beats clever.

    Guests and children use the panel with no onboarding. A control they cannot see is a control they will not find.

  3. 03

    The screen is part of the interior.

    A panel in every room should be quiet. It has to fit the room, not stand out like a gadget.

Contact

Let's talk.

I'm looking for a senior product design role on a team that builds complex products. B2B platforms, operations tools and client experiences.

LinkedIn Download resume