CANDI connects IoT devices and data to the services that create smart buildings.
Identify and provide design solutions within the PowerTools web application.
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.
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.
Creating a policy requires a lot of information and decision making from user. This could be an unpleasant experience for users.
Make the form look manageable and not overwhelming to the user.
Choosing the Best Design Solution:
- PRO - Good for grouping and keeping content clear
- 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)
- 👍🏾 Group together related fields
- 👍🏾 Save and Come Back - Save the form part way through and come back later (pattern already used in application)
- 👍🏾 Conditional Fields - Show only the fields that are relevant to the user (result: short form)
- Wireframes with conditional fields outlined in dotted red rectangles
- Callouts (numerical circles)
Overall Style Improvements
- Consolidated color usage
- Boosted contrast to separate background and foreground
- Realigned design structure of cards (updated style and introduced new icons)
- 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