Candi Controls helps IoT- enabled buildings manage and track smart devices.
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.
I worked with one developer to scope and collaborate on the project. I performed a competitive analysis and rapidly prototyped.
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.
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
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
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).
This is an ongoing project. The design is partially implemented.