At the beginning of 2024, the 1oT Terminal team shipped completed updates to the SIMs and SIM detail view.
I designed both interfaces end-to-end. Below is a walkthrough of my thought processes and unscientific methods for designing those interfaces.
Background
SIMs view is the central page of 1oT Terminal, the connectivity management platform. This is where the bulk of SIM management takes place.
It lists all the company's SIMs and their details, including aggregated data consumption. Additionally, a customer can manage SIMs directly from the table.
SIMs view includes a SIM detail view, which is a deep dive into a single SIM card.
It's the go-to destination when a customer needs to check SIM's data usage or take any actions with the SIM.
Problem
When I joined 1oT five years ago, SIMs view was one of first projects I worked on with the product team. Since then, we've added new features and receive more information about each SIM from telecom partners whose APIs have improved over time.
The need for a redesign gradually became apparent as we launched new features and struggled to fit them in without making the experience feel disjointed.
The incremental way of building a product is hugely beneficial and necessary for a small team, but it unbalances the overall design. Each new capability adds stress to the existing surface for which it was designed.
It's a good challenge because it shows we've created a successful product that has evolved with the market and customers.
The redesign goal was to reset and rebalance the SIMs view interface, improve navigation and consider all visual needs holistically.
How might we...
-
Improve navigation to save time on SIM management?
-
Accommodate product evolution with growing amount of information?
-
Enhance the visual design for a more user-friendly experience?
The process and the redesign
Quick filtering
When I started the redesign, I first delved into the filtering puzzle and all of the data points that could be made visible.
The existing version had some shortcut filters at the top of the page, but the rest were hidden. Once opened, the filters consumed a significant amount of screen space.
A particularly annoying issue was the lack of support for filtering the increasing data points in the SIMs view. This led to instances where the data was present in the table, yet customers couldn't filter it.
We opted for a filter button that filters step by step. Since we introduced so many new filters, I went through each data point in a Google Sheets file to identify filterable data, sorting options, and visibility of info in client and admin portal.
This minor design adjustment required extensive database work, which helped the engineers understand the tasks without miscommunication.
The second filter adjustment resulted from several prototypes.
I noticed it took a lot of clicks to select all options except one. To streamline this and reduce the number of clicks, we introduced a 'is/is not' selection for quicker filtering, enhancing the system's efficiency.
One last improvement in the third or fourth iteration was filtering from the table's header. This is beneficial because of the fixed row in the scroll, with hundreds (if not thousands) of SIMs to manage. Filtering directly from the header saves time for power users.
Saved views
One of my favourite handy new features in the redesign project is related to filtering.
We received similar customer feedback many times in which people expressed the need to access the same group of SIMs quickly, whether it was during a troubleshooting case or a new deployment.
The problem of seeing the same SIMs the next day or after closing the tab is tedious and time-consuming because you always have to filter them.
We fixed it by introducing "saved views," which you can create based on filters. After filtering SIMs that interest you, you can save the table's state for quick access next time you log into 1oT Terminal.
When you don't need the view, you can delete it.
To see saved views in action, check out this narrated demo.
Context menu
Before my time at 1oT, introducing operations directly into the SIMs view table was a significant improvement compared to existing connectivity management platforms.
These operations included changing the SIM status, sending an SMS, triggering a SIM reset, or changing the maximum allowed data consumption per month.
Over time, the range of possible actions, similar to filters, has expanded. This has led to an unhealthy balance between information about the SIMs and actions. Plus, the repetitive action columns cluttered the SIMs table visually.
Even though customers can customize the table's look and prioritize information, the left-to-right scroll didn't feel natural when all of the columns didn't fit the viewport.
Yet it was clear from conversations with customers that having those actions nearby is of significant value.
A small revelation came when I remembered a blog post from Height about context menus. So, I designed a menu for 1oT Terminal.
I aimed to improve the user experience by providing quick access to critical SIM management operations for each SIM without compromising the table space. I removed all action columns in one prototype to test the interest in a different approach.
The user feedback indicated that the context menu is less familiar to some of our customer base. We also recognized that teaching this new pattern is a challenge on which we didn't want to spend time.
Therefore, we decided on a compromise. Different actions can be visible in the SIMs view table if the customer prefers. Power users can trigger a SIM reset directly from the table with the newly added context menu if they want to see information about the SIMs.
One place for all SIM information
1oT's guiding principle for its connectivity management platform is the availability of real-time data so that customers can manage their connectivity without any help.
One pain point we identified was that the SIM detail view only showed current SIM activity, omitting other details like manufacturer, form factor, and configurations related to the SIM. However, this information was available elsewhere.
This fragmentation made managing SIM cards and their connectivity cumbersome and time-consuming.
To solve it, we consolidated all SIM information into one place, with tabs for different types of data and improved the layout of how it was presented.
-
The first tab contains the latest network event and static information about the SIM.
-
The Usage inspection tab provides comprehensive information on each network event, including location, telecom network, session size, and duration. This view is crucial for troubleshooting because it allows users to pinpoint and resolve issues.
-
The Data package and eSIM tab is for managing eSIM profiles on the SIM.
-
The SIM configuration tab brings together settings for customers to minimize the risk of SIM misbehaviour.
However, having all this information in one place was not enough.
We recognized the need for a holistic experience, allowing users to monitor SIM activity at a glance. This prompted us to expand the alerts in 1oT Terminal.
After our ideation sessions, we introduced an icon-based system for a quick overview of each SIM's current status.
These icons improve customers' ability to monitor SIMs:
-
Red X: This indicates that the SIM card is offline because an SMS or data limit was reached or because it's in a different device.
-
Orange exclamation mark: This indicates an ongoing API request to a partner to resolve any uncertainty about the SIM card's current state.
-
Green dot: Indicates that the SIMs are actively consuming data in a session.
-
Blue exclamation point: This indicates that the Intelligent Connectivity feature detected an anomaly in the SIM card's usage pattern.
These indicators play a crucial role in customers' daily operations. They help customers identify problems or explain unexpected SIM behavior quickly.
We increased daily work efficiency and reduced support requests by simplifying the monitoring fleet of SIMs.
TL;DR: Why we redesigned the SIMs view
The SIMs view in the 1oT Terminal has evolved considerably over time and has become increasingly complex as we have added new features and information. With our redesign, we wanted to simplify SIM management and improve the overall user experience. We have also created a consistent foundation for existing and future features.
This new design:
-
Provides more control over the interface, with improved filters and saved views.
-
Consolidates all SIM information in one place and makes features more intuitive by how they are placed, grouped, and adapted to different contexts.
-
Optimizes SIM management through improved monitoring and response capabilities.
-
Ensures more consistency with the rest of the 1oT Terminal.
After the release in January 2024, the feedback from customers has been positive. Additionally, the sales and support team at 1oT is happy because the number of support tickets has been reduced.