Thread Group
Thread Group · Client via Intrepid / Product design
I designed Thread Group’s device setup and debugging app, helping developers add devices to a network and diagnose connection problems as the technology developed.
THE PROBLEM
Debugging without guesswork
Developers used Thread’s commissioning app to test devices as the networking technology developed. The app needed to explain the setup process and match Thread Group’s visual identity.
IN STRUCTURE
Spot the errors
Developers needed to see each device’s status and spot errors that required debugging.
IN BRANDING
Match the Thread brand
The commissioning app looked different from Thread Group’s marketing materials. It needed to be recognizable as part of the same organization.
The design question
How could we explain the setup process while keeping detailed debugging information within reach?
Process
Understand the technology
I worked with Thread’s technical leads to understand the technology and the tasks in the existing app. Together, we prioritized features around the debugging workflow.
INITIAL USER STORIES
INITIAL FLOW SKETCH
App flow
I designed the flow so developers could move between setup steps and open advanced debugging and configuration options with a tap.
Sketches
I explored ways to show the current setup step and what to do next. I used the network hierarchy to organize the flow: Wi-Fi network, border router, then device.
Product deck
We reviewed product decks with the client throughout the design process to agree on interactions before development.
Check the implementation
I also checked the implementation with the development team to make sure it matched the designs.
Solution
Add a device
Setup has three steps: select a network, connect a border router, and scan a device. Users can return to any step and add devices by scanning a QR code or entering a connection code.
See device status
The device list shows previously added devices and their current status, with errors at the top. Monospaced IDs make individual devices easier to identify.
A branded loading state
A custom loading animation uses Thread’s branding while users wait for network operations.