FROM CLUTTER TO CLARITY:
A UX Redesign of a B2B Elevator Service Management Software
About Site Service Software Inc.
Site Service Software delivers a comprehensive and scalable suite of solutions tailored for the elevator service industry. From maintenance and repairs to modernization, inspections, and violations tracking, the platform streamlines operations and enhances efficiency. With seamless ERP integration and adaptability for businesses of any size, Site Service Software revolutionizes the industry by centralizing all aspects of elevator service management.
The original Maintenance Contracts module was cluttered, text-heavy, and lacked visual hierarchy, making it difficult for users to locate, interpret, and act on key contract data. From a UX standpoint, the biggest challenges were high cognitive load, inefficient workflows, and unclear interactions.
My role:
-
Conducting a UX audit of the existing interface to identify usability issues.
-
Interviewing stakeholders, software developers, and clients to understand workflows and user pain points.
-
Redefining the information architecture to improve clarity and reduce cognitive load.
-
Creating wireframes and high-fidelity mockups using Figma to explore and validate layout solutions.
-
Create detailed page layouts, component states, iconography, visual hierarchies, and micro-interactions that bring designs to life.
-
Applying UX best practices such as visual hierarchy, error prevention, and interaction design to enhance usability.
-
Collaborating with developers to ensure design feasibility and smooth implementation.
-
Running usability tests to validate improvements and guide design iterations.
Challenges
Solutions
Add details about why this project was created and what makes it significant. Explain how the business handled challenges and overcame obstacles to make this undertaking a success. Consider adding images or videos to showcase the project and engage viewers.
Project Goals
Solutions
Add details about why this project was created and what makes it significant. Explain how the business handled challenges and overcame obstacles to make this undertaking a success. Consider adding images or videos to showcase the project and engage viewers.
Overcoming challenges
The interface was overwhelming users with fragmented sections, repetitive layouts, and poor organization.
The old dashboard was cluttered and hard to navigate, making it difficult for users to find information and complete tasks efficiently.
Based on stakeholder interviews and usability testing, I identified key pain points: disorganized content, inefficient workflows, and hard-to-find features.
My UX Approach
✅ Information Architecture:
Organized the dashboard into clear sections main actions on top, filters/search in the middle, and contract data below—for intuitive navigation.
✅ Visual Hierarchy:
Prioritized important elements using button size, color, and positioning (e.g., “New Entry,” “Invoicing,” and “Holds” are more prominent).
✅ Cognitive Load Reduction:
Used collapsible menus, grouped controls, and consistent layouts to make the interface less overwhelming.
🔍 Recognition Over Recall:
Included icon-labeled buttons (e.g., Filters, Export, Refresh) and column headers with sorting/filtering tools to reduce the need to memorize actions.
✅ Error Prevention & Recovery:
Added clear action buttons (e.g., “STOP,” “Export”) with adequate spacing to prevent misclicks and support user control.
✅Modular Design:
Broke down functionality into reusable modules (e.g., tabs for Route Management, summary panels for contract data), supporting scalability.
The contracts list was dense, unorganized, and difficult to use. With no search, filtering, or visual cues, users were forced to scroll through hundreds of records with little guidance or control.
My goal was to transform it into a clean, efficient, and intuitive interface that supports faster task execution and better decision-making.
My UX Approach
✅ Findability
Integrated search, filters, and sorting in table headers for quick access to specific contracts.
Column filters provide precise control over data views.
✅ Cognitive Load Reduction
Users can hide unnecessary columns to simplify the interface.
Grouped headers chunk related information, reducing mental effort.
✅ Visual Hierarchy
Consistent fonts, spacing, and colors highlight key info like contract number and status.
Clear section headers guide the eye naturally.
✅ Progressive Disclosure
Collapsible filters and expandable data show only what’s needed, when needed.
✅ Flexibility & Efficiency
Power users customize views with Show/Hide Columns and Export.
Default views offer clarity with minimal setup for casual users.
The forms were cluttered, hard to scan, and lacked spacing, interactivity, and visual guidance.
Users struggled to complete tasks due to poor layout, difficulty locating key fields, the absence of filters or sorting tools, and the need to constantly switch between multiple windows.
I aimed to reduce visual clutter, minimize the need to switch between windows, and make key tasks—like data entry and contract updates—faster and more intuitive through better layout, interactivity, and filtering tools.
My UX Approach
✅ Modular Layout – Progressive Disclosure
Information is grouped into collapsible sections, reducing cognitive overload. Users control what they see, improving focus and supporting progressive disclosure.
✅ Interactive Elements – Recognition Over Recall
Dropdowns, date pickers, and checkboxes minimize typing and eliminate the need to remember values. This supports recognition over recall and reduces input errors.
✅ Clear Structure & Spacing – Visual Hierarchy
Consistent alignment, generous spacing, and clearly labeled fields improve scannability and guide the user’s eye to key inputs, following visual hierarchy principles.
✅ Intuitive Icons & Tooltips – Learnability & Efficiency
Icons are used to reinforce meaning and are supported by tooltips to increase understanding without overwhelming the user. This enhances usability and shortens learning curves.
✅ Filterable & Sortable Tables – User Control & Efficiency
Data tables support inline filtering and sorting, allowing users to manage large data sets efficiently.
Project Research
STAKEHOLDERS INTERVIEWS
To ensure the redesign truly addressed user needs, I conducted targeted stakeholder interviews with three core user groups: Elevator Service Companies, Technicians, and Building Owners/Managers.
This research was essential to uncover both high-level operational goals and everyday usability pain points.
“Managing contracts and tracking service history is confusing and slow.”
Their input revealed:
-
Hard to organize and sort large amounts of data
-
Time-consuming to find key service details
-
Inefficient manual processes for updating records
“As daily users in the field, we need quick access to real-time data, fast report generation, and seamless task execution to keep operations running smoothly.”
Their Input Revealed:
-
The importance of simplified forms that minimize time spent on data entry.
-
A demand for intuitive workflows to reduce friction and errors during high-pressure tasks.
“We need clear, up-to-date information on maintenance schedules and contract terms to plan and budget effectively.”
Their Input Revealed:
-
The need for transparent, real-time updates on maintenance progress.
-
A desire for simplified dashboards that clearly display contract details and upcoming service dates.
BENHCMARKING COMPETITOR PLATFORMS
I conducted a competitive benchmarking analysis of similar platforms used in field service management, maintenance scheduling, and contract tracking. This process helped identify best practices, usability gaps, and innovation opportunities.
✅ Clear side navigation: Modules like Contracts, Jobs, and Billing are well-separated.
✅ Tabbed layout: Keeps related info grouped and easy to switch between.
✅ Form controls: Uses dropdowns and date pickers to reduce input errors.
⚠️ Poor visual hierarchy: Hard to tell what’s important or where to focus.
⚠️ Text-heavy forms: Fields and labels are tightly packed and tiring to scan.
✅ Organized layout: Content is grouped into clear sections (jobs, notes, invoices).
✅ Top navigation: Dropdown menus make it easy to find key features.
✅At-a-glance metrics: Key info is easy to spot.
⚠️ Too much on screen: The dashboard feels crowded and hard to scan.
⚠️ Inconsistent text styles: Fonts and sizes vary, making it look messy.
⚠️ No hover cues: It’s not always clear what you can click..
✅ Modular Layout: Billing, customer, and contract data are split into cards and charts, making large amounts of data digestible.
✅ Filter Options: Users can filter by division, contract type, customer, and building — helpful for narrowing views.
⚠️ Limited Scannability: Tabs, filters, and lists use similar styles, which slows down scanning and recognition.
⚠️ Context Switching: Users need to open multiple panels and workflows for related actions — breaking flow and increasing cognitive effort.
✅ Visual Hierarchy: Key data is prioritized using size, color, and placement.
✅ Dashboard Clarity: Summary widgets, graphs, and filters provide a clear system overview at a glance.
✅ Search & Filters: Input fields at the top help users quickly narrow down data.
✅ Progressive Disclosure: Only essential data is shown initially.
⚠️ No Sorting Indicators: Column headers don’t show active sorting or grouping states clearly.
⚠️ No Inline Editing: Users must click “View” for each row instead of editing directly within the list.
Design Process Highlights
PROTOTYPE & TESTING
I conducted guided usability testing sessions with key stakeholders to observe how users interact with the platform in real time.
Initial Usability Testing:
⚠️Users felt overwhelmed by visual clutter and a dense layout.
⚠️Navigation was inefficient due to too many visible options at once.
⚠️ Key tasks required excessive toggling between tabs and screens.
Design Improvements Implemented:
✅ Introduced collapsible side panels to reduce clutter and simplify navigation.
✅Grouped related information into organized tabs, allowing users to focus on specific data sets.
✅Used icons and visual cues to support quicker recognition and guide users intuitively.
✅ Redesigned filters (e.g., status dropdown) for faster access and clearer interaction.
Initial Usability Testing:
✅ Quick-view mode: Users can expand or collapse sections to see only the details they need.
✅ Interactive form fields: Dropdowns and date pickers replaced plain text fields, making data entry faster and reducing mistakes.
⚠️ No in-context help: Users didn’t get guidance inside the form and had to look for help elsewhere.
⚠️ Confusing eye icon: Users didn’t know they could click the eye icon to hide or show sections. It only highlighted on hover, which wasn’t clear enough.
Design Improvements Implemented:
✅Tooltips and inline guidance: Added contextual hints directly in the interface, helping users understand field purposes without external documentation.
✅Clear section hierarchy: Reorganized content by functional areas (e.g., Billing, Service Details, Device Info), improving visual clarity and supporting task-specific focus.
Initial Usability Testing:
✅ Added select/deselect all options in filter dropdowns for quicker adjustments.
⚠️ Users had to click small filter icons hidden in column headers, which were easy to miss.
⚠️ Filtering was isolated to one column at a time, slowing down workflows.
⚠️ No clear feedback on active filters—users couldn’t see which filters were applied at a glance.
⚠️ Filter controls were inconsistent and didn’t guide users on how to use them.
Design Improvements Implemented:
✅ Introduced a collapsible filter sidebar showing all active filters in one place, improving visibility and discoverability.
✅ Enabled multi-column filtering, letting users combine filters (e.g., contract type + status) for faster, more precise results.
✅ Provided clear, persistent display of active filters so users always know what’s applied.
✅ Added a RESET FILTERS option for quicker adjustments.
✅ Streamlined workflow by allowing users to adjust multiple filters without jumping between columns.
Expected Outcome
Solutions
Add details about why this project was created and what makes it significant. Explain how the business handled challenges and overcame obstacles to make this undertaking a success. Consider adding images or videos to showcase the project and engage viewers.
Next Steps
Solutions
Add details about why this project was created and what makes it significant. Explain how the business handled challenges and overcame obstacles to make this undertaking a success. Consider adding images or videos to showcase the project and engage viewers.
Reflection
Leading this redesign taught me the value of simplifying complex workflows with clear hierarchy and progressive disclosure, which significantly reduced cognitive load and improved task efficiency. Collaborating closely with developers and stakeholders was essential to align design solutions with technical constraints, ensuring feasible and impactful outcomes.
A key takeaway was the importance of involving end users earlier in low-fidelity prototyping to validate ideas before refinement. Moving forward, I’d also set up regular post-launch usability reviews to adapt the design as user needs evolve and maintain thorough documentation for smoother collaboration.
This project reinforced that effective enterprise UX relies on balancing user-centered thinking with practical collaboration—and that intuitive design can transform overwhelming systems into confident, efficient experiences.