This smart home desktop web platform is built to serve further needs of most smart home device users, who spend their day in front of office desks.

Compared to the mobile app is allowed users to monitor their home on-the-go, the web application is designed for full-suite, single-site application scenarios using laptops and desktops.

ServicesUI/UX DesignClientDexatek Technology LTD.GenresConsumer ElectronicsToolsSketch, AxureWorked withPMs, Front-End/Back-End Engineers


PROCESS:

01

Information Architecture


02

User Flow


03

Wireframe


04

Interactive Prototypes


05

UI Design


06

UI Spec


Anytime, Anywhere.

Perhaps you spend more time on your laptop or desktop other than your smartphone?

This might be the case for most office workers during work days, the product built this web app for office workers and heavy desktop users to monitor their home while at work.

Not only set for simple stats such as humidity, but for advanced functions such as remotely deactivating unused electronics.

User-Flow & Sitemap Development


Creating with wireframes


Work closely with the developers in terms of MVP prototypes. Starting from device notification tabs of the home/menu to room/zone categorizations, these wireframes can create a preliminary sense of flow for action scenarios, benefiting further discussion with front and backend developers.

A crucial phase that not only holds true to user perspectives but also streamlines the development process as a whole.

Grouping accessories by room

The most highlighted differences between the ΣCASA Web App and the Mobile App would be the screen sizes.

The ‘Room’ is an exclusive feature of the Web App, through which users can directly assess overall statistics and electronic usage of the selected room. Users may also directly set up for accessories under certain room/zone categories with the feature.

After extensive discussion with the graphic designer on room types and icon styles, we’d developed a wide range of graphs and icons based on all imaginable types of space allocation. This would help users to select the right rooms intuitively as the human eye recognizes patterns way faster than words.

Examples on icons would be the study, basement, attic, garage, living room, dining room, the kitchen, the entrance, corridors, and the kids’ room among a total of 20 room categories. Users may also customize their own room types.

From Prototype to UI Design


Take a glance of indoor climate

with an Emoticon Design

Emoji-like icons placed on the top section to indicate how comfortable the room is. It is a thorough reviewing of power consumption, temperature, humidity. Scrolling down would expand the list to include other device statistics and configuration options. Users may thus check on the pets’ room to see if the temperatures too high, and turn on the fans to help with air circulation.

Power Consumption Display 

Overall estimation of your utility bill can be assessed by simply keying the electricity fees into the app. Simple yet thorough graphs can help users schedule optimized appliance usage to cut back on costly peak-time power consumptions.

History Review

A humidity chart tracking in years/months/days can also monitor air quality for the household. Allowing for automatic scheduling for the fans to start during high temperatures and auto-humidifiers to activate when it’s too dry.

Management of homes

The Smart Home Management tab can grant viewers an overview of all homes and devices under the user’s account, checking if all is running smoothly and without fault. Editing functions allow users to delete/rename their devices, or the assign them to different room/zones.

UI Specification


Worked closely with software team. I developed UI spec that covers style-guides, user-flow and features’ annotations so front-end engineers and back-end developers can implement correctly.