Making end-to-end network and security orchestration intuitive for a wide range of customer’s needs.
The nature of networking and security is complex, requiring strong development resources to execute on feature and device configurations in partnership with IT support to run necessary services, generate reports, and debug devices.
Our challenge was to understand the nature of the business and complexity of execution across a wide range of UBiqube customers (differing in size, structure) in creation of a versatile design that met all differing needs and use cases in an intuitive way.
We held an in-person project kickoff meeting with the UBiqube team, wherein we were given a crash course in the networking and security industry. Our team learned the history of the industry, the pain points of IT users needing to know how to use each vendor’s devices, and the opportunity for UBiqube to unify different devices under their platform.
Our team’s first mission was to learn more about the MSActivator (MSA) through user research. We conducted user interviews with UBiqube customers and gained valuable insight into how MSA was currently being used, what strengths it possessed, and how it could be improved upon. All customers recognized the technical power of MSA in providing great automation and device integration, but all said that navigation and finding actions was difficult, and expressed displeasure in workflow given a need to switch between programs.
Using insights derived from our user interviews, we went on to create personas for each of UBiqube’s user types. These personas are critical in driving design decisions, such as having different views for administrative vs. developer personas, as well as serving up the right content, for the right user type at the right times.
Our approach to information architecture combined each persona with areas of improvement as defined during user interviews. We found that the existing IA buckets information into a series of ‘folders’ within the system, which created frustration with the navigation and a user’s ability to find content and perform actions. We reorganized the IA to reduce the navigation so that content would be easy to find and paired that with clear user actions.
Our team applied two methods of navigation. The first was standard navigation, which was reworked to surface content efficiently, allowing users to arrive to the content they need quickly. As an even faster means of locating content, we provided a second means of navigation in the form of a universal search, which allowed users to find important information (device, customer, or tenant) with a single click.
Using the IA as a base for our work, we created high fidelity wireframes to conceptualize various screens, and ensure that the layout supported different amounts of information to meet the needs of our personas.
Through our creation of clickable prototypes, we were able to showcase interactions that would be intuitive and make workflows more clear and efficient.
A Wireframe Workshop
During our wireframe phase, we held a 3-day workshop with the UBiqube client team to validate assumptions and gather feedback from interdepartmental stakeholders. Through the workshop, we also partnered with the team in creating consistent naming conventions and a modularized, card-based visual direction.
Designed for Flexibility and Modularity
In order to achieve the flexibility required by the needs of many user types, we chose to leverage a ‘card’ layout.
Cards can be customized, resized and rearranged within the build of the product to suit the users’ needs, dynamically showing/hiding cards and/or actions to meet customer needs and/or permission levels.
Creating Clear User Actions
Next, we went about creating clear user actions, and secondary/subsequent actions. For example, common actions were made available in the side navigation, buttons and actions were clearly labeled and positioned with prominence, and sorting mechanisms were applied; all of this according to the actions available for each user type.
Visual Design Concepts
Being that MSA usage differs between customers, and further differs between user types, our visual design concepts needed to be clean, modular and universal. To accomplish this, we created two concepts, with the final visual design being an amalgamation of the two conceptual directions.
Being that MSA usage differs between customers, and further differs between user types, our visual design While a card-based (modular) design helps to ensure consistency and unity, another benefit is that it also helped us to expedite the delivery of visual design.
We were able to become more efficient in visual design because it was unnecessary to design every screen. Instead, we focused on visual design of unique screens, and components that could be leveraged in many ways to compose a given screen.
Before and After
UBiqube came to us for help in redesigning their MSActivator product. Through user interviews, we learned about different needs that MSA was meeting for customers, and the differing needs of their users, which allowed us to restructure the information architecture to meet the needs presented in our findings. The result is a streamlined user interface with workflows optimized for efficient navigation, content location and performing of user actions within a flexible system designed to adapt to UBiqube’s customer needs. We are honored to have partnered with UBiqube on improvements of their innovative MSA platform.