Challenge: Identify Usability problems in four Configuring Applications and propose UI Patterns which can be used across applications to improve ease of Use of Apps.

Applications in scope for configuring CDN for:

• On Demand Video
• Live Streaming
• Cloud Storage
• Media Security

Problems Identified:

• Intended “Use Cases” is unclear
• “Workflows” to achieve a task is not conveyed well
• Overload of Information + Options
• Poor Navigation Scheme
• Grouping of Properties not intuitive
• Finding a property not easy
• Lack of Visual hierarchy
• Terminology too complex
• Lack of visual cues and help
• UI behavior same for Normal and Power user
• Same mechanism for first time user and repeated user
• The Use Cases could be broken into Creation, Management and Monitoring.
• Lengthy Forms.
• Very tough for Users to understand Hierarchy of Entities & Properties of a Product.

Driving Principles:

• Users are “In Control” to perform tasks
  (More choices = More anxiety | Less choices = More control)
• Users to “Freely Explore” (Allow the users to make mistakes by providing failsafes)
• Keep Users “Informed” (of consequences and outcomes)
• User understands our “intended” workflow

Proposed Improvements:

• Identifying a proper structure for all available information of Products
  • Product > Entities > Properties > Sub Properties
  
• A 3 Pane Layout: User will be able to View or Switch between all Entities of a Product and also Drill down into an Entity and its Properties without changing the overall view of the Application. This helps User understand the Hierarchy of Information visually and also helps in finding what is required in a logical way.
• Smart Filters and Search: Helps user filter or find information in a much easier way.
• Clearly distinguish between all CRUD tasks.
• Meaningful wizards for Creation of configurations.
• Efficient Error Handling which guides Users.

Why Entities

• One approach to all products
• Logical grouping of most features & properties of Products
• Helps identify common Usage Patterns for
  • Configuring an Entity
  • Managing Entities
• Helps identify common UI Patterns (few Examples below)
  • Data Grid
  • Detail View
  • Modal Window
  • Left Navigation and more

Entity - Thumb Rules

• Easier flow: Parent entity to Child entity & vice versa
• Independent Entities should be accessible via Parent Entities or Independently
• Properties (composite or aggregate) can be accessed via parent

Entities in UI

• Left Navigation: between Entities
• List (Data-grid): Groups of Entities
• Manage Entities: bulk / independent
• Wizard: Creating an Entity
• 3 Pane layout
• Modal

Note: I am unable to share any UI screens here because of NDA. I will be able to explain more about this task in person.