Improving the Trade App
A collection of targeted UX enhancements to improve usability, reduce install friction, and increase the electrician's confidence in installing a Basis Smart Panel.
Lead Product Designer · 2024 - 2025
How might we reduce friction and increase confidence for electricians configuring Smart Panels in the field using the Trade App?
Overview
I led the design of the Basis Trade App, the sole product for configuring and installing our Smart Panel in the field. As the only Product Designer on the Trade App team, I shaped the MVP and evolving vision, working closely with engineers, product, and embedded electricians to enable sparkies (electricians) to complete installs confidently and independently.
Context
The Trade App is the only tool sparkies use to install and configure our Smart Panel. As our product reached more testing, we saw recurring pain points: confusing flows, unclear feedback, and inconsistent patterns that slowed installs or triggered support. We set out to reduce complexity, support sparkies of different training levels, and improve success rates by making the app more intuitive, trustworthy, and scalable.
Solution
Leading series of UX improvements across key workflows — from secure panel access to better feedback for disabled features — each focused on building clarity, predictability, and confidence. These changes were designed and shipped incrementally, but unified by a core goal: to help sparkies complete installs smoothly with less friction and more trust in our product and their new workflow.
Roles &
Field of Practice
I led the end-to-end design process from user research and feature prioritisation to prototyping, testing, and handoff.
My work spanned UX strategy, interaction and interface design, information architecture, and design systems.
I also shaped the app’s long-term vision by mapping future-state flows and collaborating closely with product, engineering, and hardware teams to ensure solutions met panel and installation needs and feasibility.
The project is currently in development, and some details have been removed intentionally.
Smarter, simpler configuration controls
The toggles were inconsistently placed, lacked clear descriptions, introduced cognitive overload, didn’t align with best practice and were sometimes unintuitive for sparkies to understand or use confidently. With technical constraints, these are the iterations of improvements made.
Improvements made
Refined toggle layout and grouping based on best practices
Added inline explanations
Improved toggle defaults to reduce setup errors
Created a consistent interaction pattern for all control toggles
Impact
Clearer affordances and reduced setup time
Improved confidence for sparkies
Fewer questions to customer support (internal metric)
Set a scalable pattern used in future toggle-based controls
Easier dev implementation
Improved Panel reconnection
When connection to a panel was lost, the recovery flow was overly complex and not scalable. Users faced multiple confusing UI states, and reconnection required extensive back-end UI locking.
Connection can be lost if out of range from the Smart Panel, so it was critical to ensure a seamless reconnection and be able to pick up where they left off.
Previous Flow Issues
Hard to maintain
UI had to disable functionality manually
No clear recovery feedback
Solution
I redesigned the reconnection pattern to be more visible, intuitive, and scalable, adapting to any screen without deep conditional logic.
Key Improvements
Clear “Move closer” prompt with visual emphasis
One-tap reconnection flow
Feedback throughout the process
Impact
Reduced dev effort to implement across screens, flows and edge cases
Increased success rate in user reconnections
More awareness and user control during recovery
Faster reconnection time and get back to task
Securing Panel Access
Previously, any user could connect to any nearby panel with no additional verification, posing a risk for unauthorised or accidental configuration access.
Old Flow Summary
Tap to connect > direct access to Site Dashboard
No confirmation or physical presence check
Solution
We introduced a secure connection flow that ensures proximity-based validation by requiring a Basis Button press. This design ensures users are physically near the device, providing both security and intentionality. While working closely with devs to align access control with permissions logic and technical feasibility.
Key Changes
Flow includes a physical interaction with the Smart Panel
Step-by-step gated connection experience
Visual and interaction design aligned with system-level feedback
Constraints
First iteration to be designed within components and the flow currently implemented.
Impact
Reduced accidental or mistaken access
Higher confidence among users that their connections are intentional and accurate
Increased user success rate in connecting to a panel for the first time without support
Aligned with hardware and backend expectations and technical constraints
Refocusing the Home Screen
The home screen had a weak visual hierarchy, making it hard for users to focus on their primary job-to-be-done: connecting to and configuring a panel. Important actions were buried or visually indistinct, slowing users down.
Solution
We redesigned the UI with strict layout constraints — all existing features and functionality had to remain unchanged. The improvements focused entirely on visual clarity and task prioritisation:
Reordered cards based on real-world task frequency
Refined spacing, grouping, and headings for scannability
Made targeted copy changes for better clarity and tone (e.g. action-focused labels, simplified descriptions)
Used typographic styling (weight, size, spacing) to establish visual priority without altering tokens
Constraints
Visual-only changes, no functionality or new logic added or removed
All updates had to be deployed without disrupting feature parity
Faster orientation and decision-making on app open
Clearer visual flow and emphasis on primary actions
Increased engagement with key quick actions (as seen in internal metrics)
Impact
Clarity around disabled options
Users were often confused when certain configuration settings appeared disabled with no feedback. This led to guesswork, incorrect assumptions, and delays in completing configurations.
Solution
We introduced a new UX pattern: a contextual overlay modal that appears when users tap a disabled feature. The modal includes clear microcopy (e.g. “Requires Phase Setup” or “Available with Feature Package X”) to explain the restriction. Where applicable, users are prompted to upgrade their feature package, creating a clear path to resolution and opening up new upsell opportunities.
Key Changes
Tapping a disabled feature now triggers a modal explaining the context
Upgrade prompts for features gated behind specific packages
Pattern applied consistently across key UI areas
Impact
Reduced user frustration and guesswork
Boosted clarity and transparency in app interactions
Created new opportunities for upselling through contextual prompts
Increased configuration success rates for sparkies on site
Reflections and impact
By taking a systems-minded, user-first approach, I helped evolve the Basis Trade experience without requiring a full redesign. Each improvement was small, intentional, and test-driven—making the product more intuitive, supportive, and resilient in the hands of sparkies.