MSI - Mission Critical Edge
Designing a multi-tenant SaaS platform that allows organizations to securely manage and control IoT devices through MC-Edge. The application provides a centralized way to monitor device status, set up real-time event triggers, and connect with Orchestrate to automate actions.
Project type: Internship
My role: User Experience Designer
Team: 4 engineers, 1 product manager, 1 designer
Tools: Adobe illustrator, Figma
Skills: User testing, user behavior spec, wireframing, prototyping, design systems
Imagine a water leak, fire alarm, or security camera detecting movement. Each alert comes from a different system, and without a centralized platform, teams waste time switching between interfaces and responding manually.
Problem
MC-Edge unifies IoT device management by sending water leak alerts to maintenance staff, fire alarms to safety teams, and security camera detections to trigger sirens or notifications, all from one secure platform. This reduces response time and streamlines operations in mission-critical environments.
Solution
Understanding the System
Simplified system diagram I created to make complex device interactions easier to understand
The Final Application
High fidelity prototypes
After logging in, users arrive at a dashboard listing all connected MC-Edge devices with their status and serial ID
Pagination makes it easy to navigate across many devices in one account
A global search bar streamlines finding a specific device instantly
Clicking an MC-Edge device opens a new page with two tabs: LoRaWAN devices (IoT) and Local I/O devices
Selecting a LoRaWAN device (wireless IoT) shows its connected sensors and actuators
Selecting a Local I/O device (wired DI/DO/AI/AO) shows its connected sensors and actuators
Events automate monitoring, trigger alerts or actions when thresholds are met, help prioritize responses, and reduce manual oversight
Selecting a sensor’s three dots opens a pop-up with existing events and options to add, edit, or delete
Adding an event requires a name and condition, and lets users set priority and description
If a user chooses to edit an event, they’ll be led to a pop-up for modifying event details
Typing or searching the event name shows all previously defined events
Selecting a previous event automatically pre-populates all other fields in the form
Clicking Delete on a previously defined event prompts a confirmation warning
Confirming the deletion removes the event from the list
UNDERSTANDING CONTEXT
User Profile
What Are Users Looking For?
DESIGNING
Ideation & Early Sketches
A user flow was important in order to visualize how users would navigate through the system
Lo-fi sketches of dashboard and editing sensor details
First Design Round
Command Central login for MC-Edge application
Dashboard view with devices and their status
Connected sensors
Sensor details
Dashboard: Remove side menu bar for a cleaner layout
Dashboard: Hide IMEI number to avoid unnecessary technical details
Revise Device Flow: Add a separate pages for LoRaWAN and Local IO devices under MC Edge
Sensor Details: Avoid creating a separate page due to technical feasibility concerns
Sensor Details: Simplify navigation for editing sensor details within the existing flow
*This feedback guided me to simplify the overall structure and prioritize technical feasibility, which I incorporated into the second round of designs
Feedback From Stakeholders:
Second Design Round
Revised dashboard by removing sidebar and IMEI number, and added global search for easier device discovery
Local IO list with digital inputs, digital outputs, analog inputs, and analog outputs
Revised device flow by adding separate pages for LoRaWAN Devices and Local IO
Sensors and actuators connected to LoRaWan Devices
Define a new sensor event or edit a previous one
Adding a new sensor event
View all previously defined events and edit/delete them
Once the engineers implemented the backend, I facilitated user testing with both a site director familiar with the application and a Motorola employee new to IoT
Third Design Round + User Testing
The original Local I/O layout didn’t align with the overall application design, leading me to revise it into a format where users select a device and view its connected sensors and actuators in a pop-up
The original LoRaWAN device flow required separate steps to define an event or edit sensor details, but user testing revealed this was confusing, leading me to consolidate these actions into a single ‘View All Events’ pop-up where users can add, edit, or delete events
User Behavior Spec
BRINGING IT ALL TOGETHER
I created the user behavior spec as a handoff document in Figma, capturing the designs, interactions, and rationale so stakeholders could continue refining and finalizing the application after my internship
REFLECTION
This internship was my first time working with a design system, which meant I had to quickly learn how to balance structure with creativity. While there were clear patterns and guidelines to follow, I found opportunities to bring in creative problem-solving within those boundaries. This helped me better understand how design systems not only ensure consistency but also allow for out-of-the-box thinking when applied well.
I also gained a deeper appreciation for the importance of communication with stakeholders, especially as their priorities shifted throughout the process. Staying flexible allowed me to adjust my designs while still moving the project forward. At the same time, I became more mindful of technical feasibility, learning how to make design choices that simplified the work for engineers without compromising user experience.
Overall, this experience taught me how to create solutions that are user-centered, practical, and collaborative, skills I will carry forward into future projects.