• About Company

    Candi Controls helps IoT- enabled buildings manage and track smart devices.

  • Design Goal

    Candi Controls' developers built a Chart Generator. The purpose of the generator is to help Users chart data types for usage management. The developers requested UX help with the page layout and flow.

  • My Role

    I worked with one developer to scope and collaborate on the project. I performed a competitive analysis and rapidly prototyped.


Brief Summary

We started with a kickoff meeting discussing the needs of the Users and the steps to generating a chart. I performed a competitive analysis to see how others solve similar problems. After analyzing, I created a low fidelity wireframe of the page layout and flow. The final medium fidelity wireframe was partially implemented by the Development team.


Discovery

Competitive Analysis

Common patterns identified:

  • Left to right flow when building a chart
  • Thumbnail view of chart types
  • Clear iconography with labeling
  • Easy to modify chart layers
  • Effective visual design

Strategy

My approach for this project was to focus on making the UI usable, useful, and findable. To achieve this the UI must have:

  • A purposeful page layout
  • Simplified process of generating charts
  • Visual consistency

Design

Hand Sketches

I had freedom to play around with different layouts. I started with pen and paper vs. using a tool. This afforded me rapid prototyping at the start.

Low Fidelity Wireframe

I created a rough wireframe in Balsamiq. I wanted to focus on the placement of the configuration panel and the preview pane.

Medium Fidelity Wireframe with Annotations

Continuing in Balsamiq, I focused on the finer details. The steps to generating a chart were preset. I focused on using the appropriate components. I also referenced Google’s Material Design (Chips, Panels).


Outcome

This is an ongoing project. The design is partially implemented.