HOME

M Portal

is a centralized web platform designed to help users manage multiple security sites, systems, and user accounts from one workspace. The platform simplifies administration by providing tools for user management, access permissions, site monitoring, and system status tracking.


Users can quickly search and navigate between sites, assign roles, manage requests, and monitor online or offline system states in real time. The experience was designed for scalability, allowing installers, administrators, and businesses to efficiently handle large amounts of information without relying on multiple disconnected tools.

Platform

Desktop

Year

2024

Collaborators

Development, QA, Brand Design

The Challenge

How might we design a tool that simplifies site and user management for installers, while remaining scalable and clear?


We were given the following goals and constraints:

  • Enable installers to manage users and sites from a centralized desktop platform

  • Make common tasks—like assigning roles or editing site settings—fast and intuitive

  • Keep the UI flexible for future features, without complicating the current experience

Information Architecture

of M Portal was designed to simplify the management of multiple sites, users, and security systems within a single scalable platform. Content and actions were organized around core administrative tasks, including user permissions, site monitoring, service management, and system status visibility. Clear hierarchy, filtering, and search capabilities helped users quickly navigate large amounts of data without losing context. The structure prioritized efficiency and scalability, allowing administrators and installers to manage complex environments while maintaining fast access to critical information and daily operational tools.

Early Feedback

Feedback from early users of the Site List screen revealed that, while the data was comprehensive, the layout felt dense and overwhelming—especially for installers managing dozens of active sites. Many were unsure how to quickly interpret service states or locate actions like code requests and payment renewal.


UX Breakdown

Installation: Sites still in setup phase, with status cues like “Training in progress” and countdowns for remaining setup time.


  • In Service: Actively running sites, showing service time left, issued users, and live controls.

  • All Sites: A full overview with service history and Swan subscription status.

Billing Flow

1. Site Selection
Users can select multiple sites with expiring service and see pricing breakdowns—including discounts and expiration dates before checkout.


2. Billing & Payment
A clean two-step form collects billing info and lets users choose between credit card or PayPal. The right panel keeps total cost and VAT visible at all times for clarity.

3. Confirmation
After payment, users receive a confirmation screen with invoice download, renewal date, and email receipt—providing immediate closure and trust.

Takeaway & Reflection

It also taught me that clean design isn’t just about aesthetics—it’s about reducing friction in high-stakes workflows. Clear roles, scalable structure, and surfacing the right actions at the right time made all the difference.

A final note: The best tools feel invisible. They get out of the way and let people do their job. That’s what we aimed for with M Portal—and it’s something I’ll carry forward.