UX Case Study
The Leaf Configurator App
Estimated 20 min
A Native Android Application
Banyan Hills Technologies specializes in Internet of Things (IoT) support through their cloud platform, Canopy, a web-application that lets you centrally monitor, manage and control connected devices at scale. Their remote software agent, Leaf, lets customers connect their IoT devices like POS kiosks or smart refrigerators with the Canopy application. The Leaf Configurator allow users to easily configure the basic settings for Internet of Things devices with Canopy.
Problem
Technicians do not have an easy way to configure the basic settings for the Leaf application on each IoT device.
Process
3 Weeks
4 Stakeholders | Provided clarity around how the Leaf Configurator fit into larger ecosystem of Banyan products.
2 Users | Provided insight into how the application will be used and the most effective way to organize the features.
7 Original Requirements
Business Requirements
Android application
Used by technicians
Ability to create a unique Device ID (text)
Ability to select the Canopy Environment (UAT, Production, Demo)
Ability to set up Authorization Credentials (Username and Password)
Ability to turn on/off message queue
Ability to set the Queue size if Messages are “On”
Ideation
Card Sorting 1
I conducted a card sorting exercise with a user to clarify the information architecture of the functions in the application. The biggest challenge was assigning meaningful category names. The main functions were grouped under “settings” despite the fact that all of the functions were technically settings.
Initial Wireframes
Initial wireframes based on business requirements and insights from both stakeholder and user input through interviews and card sorting.
Iteration
New Requirements
Further conversation with stakeholders and users revealed new business requirements:
Turn Leaf Service On/Off
Configure Local Server Port
Turn Connections to External Devices On/Off
Test Connection between Canopy and Device
Indicate Message Success/Failure
Advanced User Ability to Send Name Value Pairs
High Fidelity Screens
High fidelity screens with the new requirements folded into the old structure.
Constrained by the old information architecture, the initial approach to incorporating these functions placed the majority of the new features under the settings tab. The Test Message feature awkwardly sat in both tabs.
Since any changes made to the Authorization Credentials or the Device ID would require the user to test the device’s connection with Canopy, those features were placed together in the “Settings” tab. The more complicated Send Message feature was placed in the “Messages” tab.
Card Sorting 2
Since the new requirements created some obvious problems in the information architecture, I conducted a second card sorting exercise with the same user to re-organize the functions in the application.
Instead of identifying the functions as they relate to the tasks the technician was completing, they were separated into settings for the local device and settings for the remote server Ultimately, the tab categories changed from Settings and Messages to Leaf Settings and Local Settings.
Iterations of the Settings Tab
Solution
High Fidelity Prototype
The final solution maintains a simple 2-tab structure with visual interest added by the icons associated with each feature.
The Information Architecture in the final result shows great improvement from Version 2 to Version 3, which required rethinking categorization with the help of a technician-user.
Results
The Leaf Configurator for Android has been developed and is currently in use by Banyan Hills technicians.