System One | R&D Project 2017-18

Business Case

Platform solution to manage internal tools for supporting our external customer software environments. Intention was to modernize the framework from legacy C++ to a micro service container-based architecture. Features included data service management, software licensing, system agents, reporting, logging and alerts. The key users included service teams who spent hours painfully upgrading servers and licensing, migrating database schemas, while supporting test software load at customer sites.

  • Design product that can support a new platform, with all actions customer’s currently use in their existing tools and environment

  • Slowly migrate from legacy product, while adopting new framework and training other teammates


  • Interviewed all support team members and manager, understand their current pain points and perspective of customers/users of the systems

  • Created a journey map of current legacy application


  • Extra work load caused by poorly planned software/hardware architecture, lack of team education in technical support (database, linux, scripting, customizations)

  • Each team member often solved their problems in a silo / without checking in code to a shared repository

  • The original software was created by external contractors, then maintained by a team in Europe

  • The team was not prepared for transitioning to new platform


  • After a deep review of their workflows, architecture solution and database schema and practices, I collaborated with the head of US-based development on our team to voice our concerns and share feedback.

  • We could not build a tool that solved their problem in the same way it had been solved in the past. We proposed organizing the features by category

  • I also proposed a new way for filling out form details and workflow items using paged-views rather than tabs (which often hid features)

  • We also proposed more default configurations to prevent the user from having to make so many customization each time, or having to interpret for such a varied user base all the different ways they wanted to leverage their own custom data.

  • Proposed a lint-ing step earlier in the workflow to prevent the root cause of all alerts/messages/failures in the system due to poorly formed documents that are manually manipulated or customized further, outside of a standard process at the customer site.

Info Architecture & Design

We began with an iterative approach while the business continued to iron out priorities around our suggestions. We knew our application would need to:

  • Connect to data sources

  • Connect to authentication services (Internal LDAP/Active Directory)

  • Enable a user login and allow admins to add/remove and enable powers for users

Step 1: Requirements / Info Architecture

  • Based on requirements, and the user experience of the current application, we designed System One to be brilliant, intuitive and cleanly designed.

  • I based my visual design of our app on the company color palette, but leveraged negative space to make important items stand out, while keeping other items (Logo) as more subtle member of the collection. I also used flat design and strong contrasting colors.

  • My goal in this design was to guide a user through any process. I wanted to alleviate any apprehension or fear when setting up their system/services for the first time. Today, the setup is done by a support engineer, using CLI based scripts provided by the legacy team, without an installer GUI.

  • Also, as this tool would be the first web based application, we also wanted it to feel as immersive as possible to help them acclimate to the new way of working.

#1 - Proposed System Architecture & User Map

#2 - Feature Areas

#3 - User FloW


Step 3: Prototypes & Design System 


Sample Guided Setup Page (Visual Design)

View more