• 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.

  • Roles

    I worked alongside a Project Manager, Field Engineer, and 2 Front-end Developers. I led usability and visual improvement work.


What is PowerTools?

PowerTools handles the protocol and networking problems required to integrate and manage edge device communications. We support Building Services Engineers, System Integrators, and Solution Providers.


Interaction Design

PowerTools: Alerts

I worked with the team in creating a new feature called Alerts.
Here, users can create policies to check against devices. If the device fails, the system logs an incident and sends an alert.

Problem:

Creating a policy requires a lot of information and decision making from user. This could be an unpleasant experience for users.

Goal:

Make the form look manageable and not overwhelming to the user.

Choosing the Best Design Solution:

  1. ๐Ÿ‘Ž๐Ÿพ Wizard
    • PRO - Good for grouping and keeping content clear
    • CONS
      • A hassle to go through a wizard for each policy creation
      • Would require introducing a new pattern to dev team
      • Audience is too advanced (no bandwidth to test assumption)
  2. ๐Ÿ‘๐Ÿพ Group together related fields
  3. ๐Ÿ‘๐Ÿพ Save and Come Back - Save the form part way through and come back later (pattern already used in application)
  4. ๐Ÿ‘๐Ÿพ Conditional Fields - Show only the fields that are relevant to the user (result: short form)

UX Deliverables:

  • Wireframes with conditional fields outlined in dotted red rectangles
  • Callouts (numerical circles)
  • Explanations

Visual Design

Overall Style Improvements

  • Consolidated color usage
  • Boosted contrast to separate background and foreground
  • Realigned design structure of cards (updated style and introduced new icons)

Before

After-ish ๐Ÿšง

Navigation Solutions

  • Material Design Iconography
  • Responsive company logo for collapsed view
  • Material Design Menu behavior

Form Layout and Component Improvements

  • Structured the order, appearance, and logical connections between many fields
  • Grouped form fields within expansion panels
  • Clear form validation and messaging

Before

After

Password Generator Interaction

Style Guides and Specs