Challenge Summary
Welcome to IBM - Client Maintenance Support Map Mobile Design Challenge! IBM customers often have Service Level Agreements (SLAs) for their hardware maintenance. In order to fulfill those agreements, IBM must be certain that we have the parts and service engineers available to fix hardware within the time frame specified in the SLA. This application will visualize the data for the user and supports the decision making.
In this challenge you are provided with click thru prototype (wireframe) to show the workflow of the application, and we need your help give the app the right look and feel using IBM design language.
Round 1
Submit your wireframe for a Checkpoint feedback:
1. Navigation
2. Login
3. User Profile Page.
4. Map View.
5. List View.
- If you have time - please provide us with a click map for your design.
- Readme.jpg : Provide notes about your submission.
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)
Round 2
Final design plus any Checkpoint feedback:
1. Navigation.
2. Login.
3. User Profile Page.
4. Map View.
5. List View.
6. Search Result View.
7. Service Provider Details.
8. Manage Service Consumer and Manage Service Provider.
- If you have time - please provide us with a click map for your design.
- Readme.jpg : Provide notes about your submission.
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)
Challenge Details:
This application will show a map with service consumer locations (customers) and service provider locations (service engineers and hardware warehouses). The user can use the map to determine the service options for a particular customer based on their SLA, and to make sure that IBM has the appropriate resources within range for each customer's SLA.
We are looking for the [topcoder] design Community to help us with planning our new "user experience" (UX).
Design Guidelines:
- Your solution need use Responsive Design Solution when viewed on Portrait and Landscape view of Mobile device.
- Show your design solution on Portrait View. Use this screen size (768px x 1024px).
- Feel free to suggest any tools/function that can bring good User Experience for this Mobile Application.
Supporting Documents:
- IBM logo (IBM_logo.ai).
- Wireframe (wireframe.zip).
Design Guidelines:
- All submission MUST follow IBM Design Language, refer client website:
http://www.ibm.com/design/language/index.shtml
-- Layout: http://www.ibm.com/design/language/framework/visual/layout.shtml
-- Typography: http://www.ibm.com/design/language/framework/visual/typography.shtml
-- Iconography: http://www.ibm.com/design/language/framework/visual/iconography.shtml
-- Color: http://www.ibm.com/design/language/framework/visual/color.shtml
-- Interaction: http://www.ibm.com/design/language/framework/interaction/introduction.shtml
-- App Inspiration: http://www.ibm.com/design/language/inspiration.shtml
- Click around Client Design Brand site to get familiar with more client design brand that not stated on this challenge
spec.
- Make sure create all your graphic in 'vector' format (buttons, icons, etc), so when resize for bigger versions, graphic still look sharp!
User story:
- Bob is visiting a customer site, and wants to sell the customer an SLA along with the hardware the customer is purchasing.
- Bob opens the app to see what level of SLA might be within range.
- Bob inputs the customer's location (service consumer), and can see, by his default service level, whether it is within the 2 hours radius of the warehouses and service engineer base stations (service providers). He can switch to see what is available within 4 hours or 8 hours. This switch adjusts the service providers’ radius. The customer location is highlighted when it is within range of one or more service providers..
- Bob sees what capabilities are available, and can confidently tell the customer what levels of service are available for his location.
Start-up experience:
- The first time the user comes into the application, they will need to do two things:
-- Confirm their role (Service Engineer or Manager, Seller, or Business Manager (i.e., warehouse manager))
-- Enter some initial data; uploading it from a pre-created document that has information about the locations the user already knows about.
- Once the user has entered that data, the next time they come into the application, they will see the information they have entered plotted on a map. Future logins will bring the user directly to the map, not the start-up experience.
Required Features:
1. Navigation
Please refer to map_view.html (Click Main Menu icon)
- How does the user navigate this application?
- Include navigation that you think fits with this application
- Focus on the priority items and how things should be sized
2. Login
Please refer to login.html
- User logs in to the application using his "Intranet ID" and "Password".
- Please include the IBM logo on this page, as well.
3. User Profile Page/Settings View:
Please refer to user_profile__first_time_login_.html & settings.html
- This is only for first time users.
- User enters his name.
- User should select his role:
-- Service Engineer or Manager.
-- Seller.
-- Business Manager.
- User selects Default Service Level Range.
- In this view the user can upload a pre-created document that has information about the locations they already know about.
4. Map View:
Please refer to map_view.html
- The map should be the focus of the UI once past the profile page.
- User can see 2 different elements on the map:
-- Service Providers.
-- Service Consumers.
- The service consumers are items plotted on the map.
- The service providers are plotted on the map as well, but with a radius (which is expected to be a polygon shape). The range is based on the selected service level by service provider type: 2 hours, 4 hours, 8 hours, etc.
- If the "service consumer" is within at least one radius of a "service provider" it can be highlighted:
-- green, service consumer is covered by at least one of each service provider types (i.e. one CE base station and one warehouse)
-- yellow, covered by at least one service provider type (i.e. one CE base station or one warehouse)
-- red, means this consumer is NOT covered by any service provider
- User will be able to view what is available within 2 hours, 4 hours or 8 hours using a filter.
- When one of map elements is selected show basic information about the element.
- List view icon.
- Add to map icon and cross ponding modal view.
- Search location icon and cross ponding modal view.
- Filter icon and cross ponding modal view.
5. List View:
Please refer to list_view.html
- Here we list the service consumers (Customers) in combination with the service provider types that are in range (i.e. showing (first) nearest Warehouse and (first) nearest CS Base Station). The similar color coding for service consumers as already used on the map view.
6. Search Result View:
Please refer to search_result.html
- In this view we need to show location search result, from which the user could decide to save it to a service consumer or provider collection.
7. Service Provider Details:
Please refer to service_provider_details.html
- In this view we need to show service provider details.
8. Manage Service Consumer and Manage Service Provider:
Please refer to manage_service_consumer.html & manage_service_provider.html
- User can create an empty collection.
- User can upload consumer data/provider data.
- User can add consumer data/provider data manually.
- User can filter consumer/provider list.
- User can edit consumer/provider data.
Target Users:
- Sales people and service engineers, who interact with customers. In addition, people who manage service engineers, and people who run warehouses may also use this application.
Judging Criteria:
- How well you plan the user experience and capture your ideas visually.
- Cleanliness of your graphics and design.
- Your design should possible to build and make sense as an iPad application.
Submission & Source Files:
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 your submission files.
Source Files
All original source files of the submitted design. Files should be created in Adobe Photoshop and saved as layered PSD file, or Adobe Illustrator as a layered AI 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.