ProComSol — Smart Communicator Redesign
Redesigning a legacy HART / Foundation Fieldbus communicator experience into a clearer, more modern, user-centered interface — improving navigation, hierarchy, consistency, and overall usability while supporting business requirements.
01 Project Overview
Designed an improved version of an existing communicator application. The work focused on evolving the legacy interface into a more modern, understandable product experience for connecting, configuring, and documenting plant instrumentation.
02 Business / Product Context
ProComSol designs and manufactures HART and Foundation Fieldbus communicators for the process control marketplace. Their products help customers connect, configure, and document plant instrumentation, including DD-based mobile applications across Android, Windows, and iOS.
03 The Design Challenge
Legacy experience issues
- Existing application felt dated and harder to navigate
- Technical information could feel dense and ambiguous
- Inconsistent patterns reduced confidence during complex tasks
- Needed modernization without losing required industrial capability
Design objectives
- Improve clarity, ease of use, and engagement
- Strengthen navigation and information hierarchy
- Deliver a more modern visual design
- Support business requirements and overall product experience
04 Understanding the Workflow & Requirements
The design approach reviewed the existing communicator experience and product needs around connect, configure, and document workflows. Requirements balanced technical depth (instrumentation / DD-based workflows) with clearer structure for cross-platform mobile use.
05 UX / Problem-Solving Approach
06 User Roles / System Actors
Field / plant technician
Connects to instrumentation, configures parameters, and documents device activity.
Communicator operator
Works within HART / Foundation Fieldbus communicator apps on mobile platforms.
Product stakeholders
Need a clearer, more modern experience that still supports required technical workflows.
07 Information Architecture / Workflow Diagram
Product capability framed as a clearer operational path rather than legacy menu sprawl.
08 Key User or Task Flows
Enter the modernized app shell
Clearer landing hierarchy helps users find connect/configure/document paths faster.
Navigate technical information
Improved grouping and labels reduce ambiguity when scanning dense instrumentation content.
Complete configuration actions
Consistent components and interaction patterns support safer, clearer task completion.
Document and move on
Documentation steps are framed as part of the same experience, not an afterthought screen.
09 Ideation & Wireframing Approach
Wireframes explored simplified navigation, stronger section hierarchy, and cleaner task groupings before visual modernization. The goal was to solve structure first, then apply a more contemporary UI language.
10 UI Design & Design Decisions
Simplify dense technical info
Grouped related parameters and used clearer visual hierarchy so complex content is easier to scan.
Modern, predictable paths
Reorganized navigation to reduce ambiguity and make primary communicator tasks easier to reach.
Cross-platform thinking
Layouts and components considered Android, Windows, and iOS usage for more consistent behavior.
11 Design System / Components / Auto Layout
Built reusable controls, list rows, status indicators, navigation elements, and content blocks with Figma Auto Layout to keep the modernized UI consistent across key screens and platforms.
12 Interaction Design & Prototyping
Important workflows were prototyped in Figma so stakeholders could experience the redesigned navigation and interaction patterns beyond static screens.
Open Figma Prototype
Explore the modernized Smart Communicator experience. Client branding removed for confidentiality.
13 Key Design Considerations
14 Reflection / What I Learned
Modernizing industrial software is primarily a clarity problem: hierarchy, navigation, and consistent interaction patterns matter as much as visual style. For ProComSol, the design approach focused on making complex technical workflows easier to understand while keeping the product capable and business-aligned.