Challenge Summary
Cisco ServiceGrid is a cloud based integration platform that provides a scalable and fast way to connect organizations for seamless multi-party service collaboration. It automates service processes across multiple sources and enables immediate, accurate, and highly secure information exchanges. Organizations are able to share data and govern processes end-to-end across the entire multisourced environment.
We are seeking an innovative and intuitive User Interface design for our next generation IT Service Integration product. This challenge focuses on the part of the application which will be used by Cisco-trained Advanced Services professionals. The UI will aid them in their task to create a Message Flow in an intuitive and easy-to-use manner.
A Message Flow consists of several steps (receiving, transforming, persisting, calculating, etc), which are modeled as components, and each component has specific configurable properties. The goal of this challenge is to come up with a design concept for three core functions of the desktop application:
- Message Flow Designer
- Transformation View (Data Mapper)
- Component Configuration
We look forward to seeing your designs for this challenge.
Competitive participants will likely have strong skills in enterprise application interface design, graphic design experience and design tool capabilities (i.e. PSD files, Adobe Illustrator, Photoshop, or comparable).
Round 1
Submit your initial screen for Checkpoint Feedback
1. Dashboard
2. My Message Flows
3. Message Flow Designer
4. Component Configuration
5. Transformation View (Data Mapper)
Feel free to add any other additional screens which are necessary to explain your concept.
Notes.jpg: Please note any comments about your design for the Client and make sure all pages have the correct flow using file numbering (00, 01, 02, 03).
Round 2
Your Final designs for all the required screens with all Checkpoint Feedback implemented.
1. Dashboard
2. My Message Flows
3. Message Flow Designer
4. Component Configuration
5. Transformation View (Data Mapper)
Feel free to add any other additional screens which are necessary to explain your concept.
Notes.jpg: Please note any comments about your design for the Client and make sure all pages have the correct flow using file numbering (00, 01, 02, 03).
Please consider these while creating your designs.
- We are looking for fresh, innovative, and modern design concepts.
- Give importance to the overall layout and think about how a user would interact with the content on the page.
- Feel free to use the Cisco logo.
- While stock photos are allowed for this challenge, please use imagery that is relevant to this application concept.
- Sample views are provided, however please ensure that you DO NOT COPY these. Reference examples only for functionality – these should not constrain your design, but rather used as basic functional reference.
- Think simple and responsive designs for this challenge, for desktop screens of 1024px width and height, adaptable to various sizes.
Required Screens:
Please include designs for the following use cases
1) Dashboard:
The ServiceGrid dashboard should contain the high level content that a user needs quick access to. A user may see recent activity, metrics, access to applications, message flows, templates, components, exceptions, open issues, closed issues and alerts.
2) My Message Flows:
- A list view of all Message Flows that a user may be working on.
- The list view should contain a high level description of the Message Flow and a Status indicator.
- A user should be able to click into a Message Flow to access the Message Flow Editor and Edit an Existing Message Flow, or Create a New Message Flow from a template or Create a Custom Message Flow.
This is the Central Dashboard for Message Flow creation and manipulation where the user can create Message Flow in an intuitive manner by combining components within a ‘working space’. All available workflows are visible upon page entry. To ease navigation, a side panel with all workflows may help. This should also have a UI element containing all available components to allow the user to drag and drop them to enhance/create new workflows. A base workflow unit for Message Flow creation would be:
A component can be seen as a small logical unit in a Message Flow. There are a wide range of components with different semantics, ranging from flow control and scoping to endpoint components. Each component has configurable properties which may vary from component to component.
- A configuration is basically a set of properties, which are grouped semantically (the maximum depth of grouping is TWO).
- Properties may depend on other properties, e.g. a checkbox must be checked to proceed.
- Assume a user can click on a component in the workflow to view or edit the component configuration.
5) Transformation View (Data Mapper):
Allow a user to transform a message with some properties into another message format with different properties. This may happen in a variety of ways, from complex calculations or multi-mapping of properties to simple property matching.
- During a Message Flow implementation, the input and output may be in various message formats.
- The Transformation View is not a "stand-alone screen", but rather it will be part of a "component configuration".
- The Transformation View should provide a visually aided interface to specify a message format transformation into another.
- A message format can be abstracted to a list of properties and type of property. A simple transformation may be seen as a mapping of properties. The UI needs to allow users to map Input properties with the output.
You may find these optional resources of interest. They are not required for the challenge.
- Cisco ServiceGrid Overview
- Social Media regarding Cisco ServiceGrid:
- Cisco ServiceGrid Product Videos:
- Overview Brochure: Cisco ServiceGrid Customer Brochure
- ServiceGrid Case Studies
- Success Videos: NextiraOne, ShoreGroup, Partner – Born Green, Kapsch TrafficCom
- IDC Analyst Paper: Transformation of Collaborative Support
Judging Criteria:
- Cleanliness of graphics and design.
- How well you plan the user experience and visually convey your ideas.
- Designs should differ from the sample wireframes.
- Application of the Design Direction and innovative user experience.
Preview Image
Please create your preview image as one (1) 1024x1024px JPG or PNG file in RGB color mode at 72dpi and place a screenshot of your submission within it.
Submission File
Submit JPG/PNG for proposed screens.
Source Files
All original source files are required for the submitted design. Files may be created in any software of your choice, such as Adobe Photoshop, and saved as layered PSD file, or Adobe Illustrator as a layered AI file, or comparable, as long as end-product can be saved as a layered file.
Final Fixes
As part of the final fixes phase, you may be asked to modify your graphics (sizes or colors) or modify overall colors. We may ask you to update your design or graphics based on checkpoint feedback.
Please read the challenge specification carefully and watch the forums for any questions or feedback concerning this challenge. It is important that you monitor any updates provided by the client or Studio Admins in the forums. Please post any questions you might have for the client in the forums.