IoT Data Connectivity Monitoring Platform

The main use case of the platform was to manage mobile data connectivity for IoT or ISP businesses, control data usage and cost, and enable customers to service as resellers.

I was responsible for the end-to-end design process planning and executing every step as the sole designer from research, ideation, prototyping, testing to delivery while significantly contributing to the front-end development.

Heuristic analysis

• The platform had numerous usability issues and long winded task completion flows. Some functionalities were causing cognitive load especially filter mechanism.
• Recognition rather than recall: Main menu and side menu had mixed specificity levels and were not categorised, Making it hard to find relationships and learn for fast action
• Error prevention: I was suspicious of the correct use of filter mechanism as it was relying on cognitive memory and was prone to making errors. After investigating the database, found out that users were creating saved filters which were not returning any value. The filter and data table were disjointed.
• Flexibility and efficiency of use:There was a need for space saving in data-grid while making it still eligible and flexible.
• Consistency and standards: Other improvements needed to align with interaction principles, web accessibility rules, proven design patterns.
• Flexibility and efficiency of use: Great amount of the requirements for the new design was coming from the desire for responsive design, enabling the application to be used in mobile devices and touch screens alike. The legacy design had numerous disadvantages on mobile devices and it was not fit for touch screens.

Research

I have used various qualitative and quantitative methods for researching customer use cases, pain points, user behaviour, device adoption and technical requirements including:

• Survey
• Aimed to collect quantitative data on data caps and notification preferences
• Resulted in customers wanting most flexible options and choosing when and how to limit data
• Interviews
• Understanding customers' need of sub accounts, tiered managed accounts and data usage
• Acquired better understanding of why customers need managed accounts, how they want to be seen by their own customers, white-labelling needs and what kind of permissions and limitations they will need for their users with various level of engagement
• Card sorting
• Studies on labelling and SIM states, navigation structure helped optimising SIM state labels and navigation reducing main navigation options and creating contextual menus
• Resulted in coming to consensus with the development team and optimising labelling, even to the point that the state machine programming need to consider new labelling and states
• Analytics with GA and Mixpanel
• Continuous monitoring of main user actions, helping to prioritise features by usage
• Design reviews
• IoT connectivity technology studies
• Understanding IoT scene and the need for undisrupted connection with various levels of data transmission
• Expert reviews

Analytics

Integrated Google Analytics to the code to collect information about user behaviour, most used functions, the browser versions, screen size and operating system information to make informed decisions during re-design

As we added new features while redesign was going on, I integrated Mixpanel analytics to better match the user with the use cases, and get insights categorised by industry and customer type. We learned more about which functions used more by what type of customers

Some findings were:

• Mobile phone login attempts were minimal strengthening the decision to not to start mobile first design which was not appropriate for SaaS platform increasing development effort hugely while having little benefits
• Some users had smaller screens and responsive layout design would help them to have better usability and experience
• Categories were not being used which helped us to drop the feature which was used as a hack to restrict view which we handled by account management feature
• Chrome and Internet explorer by far the most used browsers so we included test for IE browsers while eliminating legacy versions

Jobs to be done

• Customers want complete control over the data usage and cost. They want to set limits for their customers if they are leasing or reselling data
• Customers want control over the assets of their customers while empowering them for self management. They want a tiered account management function, where they can allocate SIMs with certain properties to their customers, and have access management services.
• White labelling to obscure Arkessa as service provider and have their own brand name and customer service links
• Customers would like to have ease of use since their engineers do field work and they sometimes use tablets or smaller rugged laptops with touch screens
• One of the design aims was to reduce task completion times, de-clutter the platform and re-think some of its features.
• Business need new features to be built to stay at the top of the market and there were some business requirements to be integrated.

Changing front-end code

I have worked extensively on the front-end development during re-design of the application and I was interested in developer experience as well as the user.

The front end was written in Dojo Toolkit, JavaScript mixed with HTML, abundant with in-line styles. I suggested moving to a modern one page JavaScript framework like Angular and using Bootstrap and SaSS for the front end layout.

I wrote all the HTML and SaSS code including creating icon fonts with Icomoon and Linearicons adding some custom icons to the set.

Two of the backend developers became full-stack developers gaining expertise in Angular and we have developed our first HTML prototype with this technology stack