UX Research, UI Design, Software Architecture and Development
Strategy | Research | UI Design | Development
Problem-Opportunity
Global Linux Systems was seeking a partner to help them develop a server monitoring tool for them and their customers. This was their first foray into productizing their services and they wanted to find an agency to work with that could understand their needs and improve the product-concept into something that would be even more valuable and user friendly for their end-customers [other SysAdmins and SysOps customers].
Solution
We worked over several sessions to review and then develop an improved UI / UX experience for their tool. This involved solving several key usability issues that didn’t naturally translate from desktop to mobile devices. Once sufficient UI / UX analysis and planning was done, we moved into their art direction, product-service design and development.
UX Research
Being a software tool targeted at other developers and sysadmins, we wanted what we created to be simple, clear and clean in nature without a lot of fancy graphics and colors that could distract and lack appeal for the end-customer group we were targeting.
Product Usage
We also took strongly into consideration the actual real-life situations this tool would be used in, which is on the go, in your pocket, and late at night when you are getting one of those calls that your precious server is down and you might need to log in from home and try to fix something before rolling back into bed.
GLS provided us with desktop concepts, scanned with pencil into a computer for us to review. These were not adapted yet to the actual use-case most people would be using the tool in, which was mobile. So this was our first and primary focus with our study.
Mind / Site Mapping
GLS provided us with desktop concepts, scanned with pencil into a computer for us to review. From this we could review their proposed site topology. We mapped this out (above left) and then reviewed the actual use cases for the application.
After reviewing in depth how people would use it and common uses of the tool, we came back with a more developed site / mind map (above right). given the site size, we also numbered everything to make sure we had clear control of scope.
We also noted that their rough page sketches were not at all adapted yet to the actual use-case most people would be using the tool in, which was mobile. So this was our first and primary focus with our study.
Flow optimization
Developing the desktop solution for this took a few iterations to get normalized. We focused our attention on desktop to ensure we were eliminating unnecessary steps, screens and information – to consolidate and present everything people needed to see to set up, manage and monitor their servers. We understood through interviews that the main use case for the desktop was to set systems up, and do configurations.
Mobile UI Challenges
Moving over mobile, we learned that here Admins would mainly be using it to monitor alerts, see which triggers are happening and take action to address server issues. So while a tech might need to do configuration of their server-monitors on mobile, it wasn’t the primary focus. This helped us to streamline the site UI to focus primarily on monitoring.
Tables are a pretty logical way to organize a lot of data into rows and columns so you can get overviews and do filtering and sorting. Unfortunately though, tables are a real pain on a mobile device – which is where a lot of this data needed to be visible and interactive.
Above image shows same page viewed on mobile (left) and desktop (right).
What we did after research was complete was to isolate which table properties were essential to see at a glance, and which actions and further data could be hidden behind a tap to activate that element and reveal only once selected.
The result is a dynamic selection tool on mobile that shows you everything you need to see at a glance, and then which expands vertically to show you secondary information and the related actions related to that element.
Development
With UX and UI design complete, we shifted over to development in combination with the client’s internal development team. The monitoring system uses alerts aggregated from any customized server-source the customer wants to configure.
We have developed the entire system in React with iterative dev-test cycles against the back-end API validation.
Technically we are connecting through the use of an SSH tunnel to the end API, where we store the data on our customer’s IT platform. Their platform is a secured backend system that we read from into our React front end. We make use of Ant Design library to speed up the atomic design process and for the end view displays.
Notable Success
GLS Monitoring tool has been an ongoing project now for several years. In that time we’ve built a long standing trust and ongoing familiarity with their organization. GLS has been exceptionally happy with our work and has referred several clients to our care since we started working together.
Once the GLS Monitoring Tool is released we will be working next with them to validate the value of the product, collect user feedback and determine what the best new features and changes will be to the application for further ongoing refinement and improvements to the application.
