Lead UX/UI Designer
Heuristic analysis, sitemapping, lofi wireframing, hifi mockups
Mar - Jul 2023
Adobe XD, Miro
ANTlabs is a company that provides technology solutions for businesses to manage their network infrastructure and provide internet access to their customers and guests. They focus on providing solutions for the hospitality industry, which includes hotels, resorts, and other hospitality businesses. Their product, ANTlabs Service Platform (ASP), a WiFi-as-a-Service platform, allows these businesses to take control of their WiFi service offerings across multiple organisations and sites with a centralised dashboard.
The client was introducing a new screen casting offering to the existing interface of ASP. I was given the opportunity to propose and design the new pages of this screen casting service management. The design should:
With the addition of a new casting service, it was expected that there would be at least 8 new pages to create. These relate to the casting functionality itself, and its corresponding reports. I studied the existing product and spent some time understanding the information under each menu, before deciding to reorganise it.
The first change I made was to separate the "Sites" and "Services" pages by introducing a new category called “Service Management” to the primary navigation. Previously, content such as "Bandwidth" and "VLAN," which pertained to the other High Speed Internet and Web Filtering services, was grouped together with the remaining site management pages, all labeled under "Site Management." This arrangement not only caused confusion for users but also threatened to overcrowd and burden the menu if we were to include the "Casting" pages within the same category.
Next, I discussed with ANTlabs on the type of reporting content they needed me to design. The content ranged from tables, charts, and logs. In their existing product, all such content fell under one label “Reports & Analytics”. It was already a very long menu, so I decided to break it up into subcategories according to the type of service to make it easier for the user to find what they need. I also separated these reports by content type - detailed records (logs) and overview pages (charts), so that different types of users can quickly access the different types of information they need. For example, an IT manager would likely need to see the raw data in the logs, while a General Manager may prefer to get a quick overview by reviewing data in charts.
As I moved into the design stage, I made changes to fix usability issues I found while studying their existing product. I focused on making user interactions smoother, navigation easier, and the overall interface more intuitive.
I designed a column sector to allow users to customise the data they view, focusing on the specific metrics or information that are most relevant to their tasks or objectives. This flexibility enhances user experience by tailoring the dashboard to individual needs.
I enhanced the breadcrumb design by giving the current page greater prominence through the use of a heavier font weight. I also made sure that each page had their individual titles.
Considering the users' goals and context of the content they are engaging with, I relocated the primary CTAs to the page's upper section. This adjustment ensures that users can promptly understand the required action.
Following the sitemap I created earlier, I worked on designing the new pages that would be needed for the new screen casting feature. Here are some of the lofi wireframes.
I developed a customisable welcome screen page for administrators to tailor the user experience of the screen casting feature.
I incorporated components like headings, images, and videos. Additionally, I added a feature enabling administrators to save different page designs for different sites.
I designed a log to provide visibility into system behavior, help diagnose issues, monitor performance, ensure compliance, and support security efforts. This includes detailed information such as timestamp, user and room details, session duration, device information, etc.
I created some charts to provide a visual representation of data. This would help management to understand and analyse complex information.
I identified two main areas of focus for stakeholders regarding the casting function: usage and device health. Usage data included casting sessions over time and number of user sessions, while device health data included number of devices and which were most active. I organised these into separate tabs for easy access.
I also introduced new functionalities to enhance the usability of the new casting pages. These included dropdown menus to categorise menu items and allow users to access specific information quickly, sidebars to offer an accessible navigation hub for configuration of casting devices, prominent alert notifications to ensure administrators are promptly informed of any issues that require attention and charts to visually represent complex data trends and patterns and help administrators quickly grasp network performance metrics, user activity, and other analytics.
I reviewed the hifi mockups with the client and participated in a session to observe the product in a demo stage. After a couple of final adjustments, we obtained the client's approval and signed off on the project! Here's what they had to say.
