• About Company

    CANDI connects IoT devices and data to the services that create smart buildings.

  • Design Goal

    Identify and provide design solutions within the PowerTools web application.

  • My Role

    Role: UX Designer
    Team: PM, Field Engineer, 2 Front-end Developers


Interaction Design

- Create Policy: Conditional Fields -

Problem:

The Create Policy Form contains a large number of fields.

Solution:

Conditional Fields - allows users to manage sets of dependencies between fields. When a field is “dependent”, it will only be available for editing and displayed if the state of the “dependee” field matches the right condition. Items outlined in red are conditional fields.

Reason:

This technique reduces the average length of the form, while also reducing form abandonment by not displaying fields that might be irrelevant to certain users.

- ComboBox: Search and Select -

Problem:

According to best practices, when select menus grow larger than 15 options they become difficult to scan and navigate.

Solution:

Text field with auto-complete functionality

Reason:

In this case, users know what site they are looking for, so using this functionality works better than a super long select menu.

- Dashboard View: Item Tree with Pane -

Problem, Solution, and Reason 🙃:

Feature Request - I received a request to add a new view type that would showcase devices and gateways. It would feature how the devices and gateways connect and also statuses. Side detail pane added later.

Retrospective:

The current dashboard for Devices supports 2 view types (List and Grid). Instead of adding a completely new view type, it might have been best to invest in improving, complementing, or innovating on the existing views.


Visual Design

- UI Improvements 🚧-

Before

After-ish

- Responsive Company Logo and Navigation Bar -

- Page Layouts: Form Fields -

- Password Generator -

- Style Guides -