Challenge Summary
Welcome to ECI Mapping Web Tool Storyboards contest. We are looking for the look and feel of this web application, a design that follows the IBM design patterns and standards. It’s quite simple, just a few screens so jump in now!!
Round 1
For your R1 deliverables please submit following screen for client review:
1) Regular User Landing
2) New Mapping
3) Manage Mapping
4) Manage WSDL
5) Admin User Landing
6) Manage Mapping Form
7) Manage User Access
8) Manage Profiles
Feel free to add some notes (jpg or text file) to comment your design features for the client.
Number your screens (01, 02, 03 etc.) – it’s easier to review.
Round 2
Final design will contain all the requred screens plus any updates from client feedback.
Feel free to add some notes (jpg or text file) to comment your design features for the client.
Number your screens (01, 02, 03 etc.) – it’s easier to review.
The primary goal of this contest is to design the look and feel of a short web application. This application is a tool that a customer can use to map data fields between entities. The tool should have a page with some info where the customer can easily find a mapping process and fill out a form that generates a XML file. It has to be very intuitive and informative (hints, tooltips, explanations, etc).
The users of this application will be IBM employees, which makes very important to follow IBM web standards (see “About IBM W3 Standards” below).
Branding and Guidelines
- FOLLOW IBM W3 STANDARDS for your design (layout, colors, form elements, etc).
- The design should be simple and easy to understand. Avoid over populating spaces with too many form elements.
- Your design must fit 1024 pixels wide screen resolution.
- Use web-safe fonts for the pages content.
Storyboard Design Requirements
Overall:
- In your submission, you need to create the necessary pages to show workflows for regular and admin user
- Show how internal forms interact with the user.
- Show all the popups.
- Show possible error or success messages.
1) Regular User Landing (aka Regular User on wireframes)
- See the wireframe page, we need to add space somewhere for text/area and place "Welcome to ECI Webservices Mapping Web Tool”.
- There should be a prominent “Start Mapping” button which will take through few steps, the first one being the questioner which will help the tool to define the customer’s profile. Based on this profile the tool will logically choose the correct form. After the customer is done mapping he should be able to export the data to an XML file.
2) New Mapping (Regular User)
- Show all the progress steps/pages.
3) Manage Mapping (Regular User)
- Show Edition and Details workflow.
4) Manage WSDL (Regular User)
- Show the upload workflow.
5) Admin User Landing (aka Admin User on wireframes)
- Admin features are basically the same than Regular User BUT some of them have different edition options.
6) Manage Mapping Form (Admin User)
7) Manage User Access (Admin User)
- Show Details, Edition and Upload.
8) Manage Profiles (Admin User)
- Show Details, Edition and Access Management.
9) Help
About IBM web standards
- IBM provides these standard guidelines for web purposes. You can access this documentation here: http://www.topcoder.com/ibm/v17-A-v1t/pokgsa.ibm.com/~uxguy/public/standards/site/v17_cov_draft_ws/index_list.htm. If you can’t access the provided link follow the instructions below.
- CCA (Competition Confidentiality Agreement) is required. If you have a signed CCA on file, send the access request to: support@topcoder.com.
- If you don’t have a signed CCA on file you need to follow these instructions and then request for the access: http://apps.topcoder.com/wiki/display/tc/Competition+Confidentiality+Agreement+%28CCA%29
- Keep your attention at “Page elements” on the left menu of the documentation. Those are the ones you should pay more attention (page layout samples, forms, tabs, etc). You’re free to explore the whole documentation anyway.
- Use the IBM w3 default masthead in your design.
- Use the IBM w3 footer bar in your design.
- There is a defined color palette in the docs.
- There are guidelines for basic page elements, such as: pagination, tables, message formats (error, warnings, etc), breadcrumbs, and icons. Take advantage of those elements.
- Limited use colors are to be used sparingly to identify errors, required form label asterisks, call attention to "new" or important content items or to call out important data.
- Accent colors are to be used only when necessary to differentiate between the contents of various table cells.
Target Audience
Clients, vendors and internal teams.
Judging Criteria
- Follow the IBM W3 web design patterns and standards.
- Quality of design.
- User Experience.
Submission File
All requested contest requirements/screens as JPG or PNG files at 72dpi.
Source Files
All original source files of the submitted design. Files should be created in Adobe Photoshop and saved as layered PSD files.
Preview Image
Create a 1024x1024 JPG or PNG file in RGB color mode and place a screenshot from your submission within it.
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.