Software-Defined Networking Application

tl;dr

Client

A stealth-mode startup in the Software-Defined Networking (SDN) space (name confidential).

Role

Senior UX Design Consultant (Globant, India). Leading a team with Chinmay Hulyalkar, a UX Design Consultant, and Kamlesh Munot, a Visual Design Consultant.

Ecosystem Mapping • Workshops • Information Architecture • Design Concept & Interaction Strategy • Detailed Wireframe Design Storyboard

Timeframe

August 2014 – December 2014

Brief

To design a turn-key solution for network management and monitoring, from the ground-up, for a stealth-mode startup in the Software-Defined Networking (SDN) space. 

Outcome

I mapped the planned product ecosystem and defined an information architecture that could grow and evolve with the product, working closely with the client-side product leadership and management. 

I also defined an interaction strategy that drew from design patterns commonly found in popular consumer applications to make the application seem approachable and usable from the get-go. 

Finally, I created detailed wireframe mockups and a design storyboard outlining the key screens and interactions across all modules. 

Brief

Designing a turnkey software defined network management solution for both small and large scale enterprises.

A stealth-mode startup developing cutting edge software-defined networking (SDN) solutions approached Globant to create the version 1.0 of their integrated network management and monitoring application. Broadly speaking, the application was meant to help users configure a virtualised network, monitor and troubleshoot its performance and health data, and manage different kinds of user access controls. 

What I did

Project Management

Leadership
Milestone Planning 
Collaboration
Communication
Consistent Handoffs (for UI/backend development)

Strategy

Product Ecosystem 
Product Concept

Design

Information Architecture
User Flows
Interaction strategy 
Detailed wireframes 
Prototypes

Role: Senior UX Design Consultant (Globant, india)

I led a team consisting of Chinmay Hulyalkar, a UX Design Consultant, and Kamlesh Munot, a Visual Design Consultant. I was the primary contact point for the client and development team on the project. 

Core Challenge

Managing evolving requirements, understanding, and product scope 

Being a 1.0 product, the requirements and product backend were not fully defined at the time of the project kickoff. So, the challenge was to develop a scalable and modular design language and framework that could adapt as the product scope changed and new services were implemented. This challenge directly informed the approach we adopted for the project.  

&

Designing for consumerized user expectations and mental models

The design strategy also needed to keep in mind the growth of dual-use devices and services, like tablet and smartphone devices, that are used both at the workplace and in everyday lives. This trend has been called consumerization. As a result, the mental models and interface expectations of the present-day enterprise users stem from the easy to use and refined interfaces of consumer applications rather than legacy CLI interfaces. Modern enterprise interfaces and interactions need to be designed to strike a careful balance between ease of use, cursory engagement and on-demand expert usage and deep-dive into systems and data. 

Approach

Collaborative and adaptive design

Ecosystem mapping: Data-Object-User model

Due to the flexible and evolving scope and requirements, closely understanding the overarching product vision and value proposition was crucial to the information and interaction design in this project. 

I collaborated closely with the development team, product management, and leadership in workshops to discover, understand, and map the planned product ecosystem. I clustered and organised the input from the workshops to create a specialised product ecosystem model.

Data-Object-User ecosystem map for the software defined networking application

I called it the Data-Object-User model. It mapped –

• the various user roles and usage contexts
• the primary objects that the product is going to be built around
• the product’s information and datasets (and their subsets) 

During the discussions, the objects’ parent-child relationships and ideas for data and information flow were also identified.

The Data-Object-User model became the reference point for discussions with the product team about planned services, product features, and use cases. It helped shape the information architecture of the product by mapping key user roles and data access relationships, along with data dependencies and relationships at a very early stage. The map was a live document that was revisited often in meetings and discussions. It represented a point of consensus between all the stakeholders in the design and development process. The user roles were further elaborated and described through different personas. 

Personas – using the micropersonas template

Synthesis: Information Architecture, Navigation System, Task flows

Based on the data and object relations and key user tasks identified in the Data-Object-User ecosystem model, I could identify possible navigation strategies. Broadly speaking, I could structure the navigation around the user’s key tasks or the objects identified in the ecosystem. For example, in a system with a few main objects, the user’s journey could start with the object that she is most interested in and progress to the tasks that need to be performed. In the end, I needed to identify a logical information architecture for the objects and actions that would closely map to the users mental model, tasks, and habits.

Core objects that the information architecture and navigation system was structured around

Block level information architecture screens

I also arranged key user tasks into descriptive screen flows. The flows gave an in-depth representation of the relationship between data sets and objects while also presenting the user journey through the product. I also incorporated the possible actions on the data sets within the screen flows. This formed the basis for the next steps of identifying the interaction strategy and creating detailed wireframes. 

Screen flow diagrams – using an adapted version of the visual vocabulary by Jesse James Garrett

The information architecture and task flows were the foundation for the interaction strategy. The interaction strategy highlighted different considerations and interactions guiding the detailed design of the different product modules while still ensuring that the product as a whole had a consistent design language.

The strategy also acted as a collection of tactics that could help users interact with the system and carry out their tasks effectively and seamlessly.

Four main elements of the strategy are presented below: 

Interaction strategy and design arguments

Detailed design

Next, I translated the information architecture and task flows into detailed screens. I worked closely with the backend developers and product management to gather data points directly from the command line implementation of the product. The wireframes for each module went through three to four iterations before being finalised.

Wireframe mockups

I assembled the final screens into a storyboard for the UI development team and worked together with the visual designer to ensure that the visual language aligned with the interaction strategy and the (page and system-wide) information hierarchy. 

Click through mockups (originally created in Adobe Fireworks, recreated in Adobe XD)

Visual design

The visual design language and the pixel-perfect screens were created by my colleague Kamlesh Munot. Since the UI layer for the product was also developed at Globant, both of us were also responsible for working with and supporting the development team. We provided (interaction and visual) design specs and reviewed the UI prototypes and screens as they were developed to identify and resolve issues as early as possible in the process. 

Visual Mockups (created by Kamlesh Munot)

Publication/Research

The approach and Data-Object-User model became the basis of a peer-reviewed research paper that I wrote together with my colleague at Globant, Swati Srivastava. It was presented at the Human-Computer Interaction International conference (2014) in Crete, Greece, and was published by Springer International Publishing.

The model also became standard practice within Globant for working with complex data-driven enterprise UX projects, as a way of aligning product expectations and requirements with the design team’s understanding. 

Research Paper

Pandey, S., & Srivastava, S. (2014). Data Driven Enterprise UX: A Case Study of Enterprise Management Systems. In S. Yamamoto (Ed.), Human Interface and the Management of Information. Information and Knowledge in Applications and Services (pp. 205–216). Springer International Publishing.

“[Designing enterprise systems] requires the effective combination of the understanding of human behavior, technology, and processes for the creation of a system that adheres to the workflows and expectations of the target users, works within the technological constraints of legacy systems, as well as one which analyses and provides quick and easy access to data that leads to intelligent business decisions.”

– Pandey, S., & Srivastava, S. (2014). Data Driven Enterprise UX: A Case Study of Enterprise Management Systems (pp. 205–216). Springer International Publishing.