Challenge Summary
Welcome to IBM - Dimond Find Your Sales Mobile App Redesign Challenge! The goal of this challenge is to redesign the Dimond App and giving it a refreshing look while making sure it follows IBM Design language.
Round 1
Submit your design for a Checkpoint feedback:
1. Navigation.
2. Login.
3. Home page (Search Page).
4. Search Results Page.
- 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. Home page (Search Page).
4. Search Results Page.
5. New App Icon.
- 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:
Dimond is a mobile application built to help users find the Subscription and Support (S&S) Renewal Representative or New License Rep for a customer based on a search criteria. The supported search criteria is for Customer Name, DSW Site Number, S&S Rep Name, IBM Contract Number, Acquisition, IBM Customer Number (ICN), and IBM Enterprise Number.
For this challenge you are provided with current app screens to explain what we are looking for.
Supporting Documents:
- Current App Screens (mobile-screenshots.zip).
- Logos (Logos.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.
- Orientation : Portrait.
- Make sure create all your graphic in 'vector' format (buttons, icons, etc), so when resize for bigger versions, graphic still look sharp!
Design Considerations:
- Your solution needs to be a Responsive Design Solution.
- Your design submission need able to drill down for all page flow.
- Show your design solution for Mobile view. Design for iPhone 6 Retina Display 750px x 1334px.
- Feel free to suggest any tools/function that can bring good User Experience for this Application.
Use Case Scenario:
- John is an IBM customer.
- John logs in to the application using his name and ID number.
- John can see a search box and can change his preferred searching menu by tapping on the drop-down box that's pre-populated with the most popular search choice, Customer Name.
- Once John chosen his search criteria, he starts typing in the search box. He will notice that the application will try to anticipate what he is trying to type, and might help him with his search effort.
- The results page will display John results in a card format. He can swipe up on his mobile device to page through his results. If he clicks on a card, it will provide him with additional information on that specific record he have chosen.
Required Features:
1. Navigation
- 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 login page.png
- User should be able to see App logo and name.
- User should be able to enter his Intranet ID and password.
- Please include validation error design for login.
- We need “Remember Me” checkbox and a login button.
3. Home page (Search Page)
Please refer search page.png & search choices.png
- The user should be able to have a quick search by one of one of Rep Serial Number, Site Number, Acquisition, Customer Name, Contract Number, IBM Customer Number, Enterprise Number, IBM Client ID.
- When the user wants to search by customer name, there should be “Type Ahead” in the search box, recommending customer names with what user is typing. User can select from list to search by that name.
- The user should be able to execute an exact search by more filters in advance search; so show us Advanced Search Options/Filters.
4. Search Results Page
Please refer results page with results page with cards.png, card details.png & no results found.png.
- We need “no results” found view.
- Since the result table is too wide for mobile devices, the user should be able to view the result list view and detail view.
- The information that should be displayed in list view is, site number, customer name, acquisition and rep name.
- When you click on a result from list view you will be redirected to detailed view.
5. New App Icon
Please refer dimond_logo_color.png
- We would like to see a new app icon created from Diamond logo.
Important:
- Keep things consistent; all graphic styles should work together.
- The winner of the challenge will have to pre-slice (the source PSD or AI) with icons, backgrounds, headers, UI elements, avatars, images, buttons, etc. to make it easy to split up for use by IBM developers.
- The winner will also need to provide a description file, showing all colors (RGB values) & fonts used.
Target Users:
- The target audience for this application will be IBM customers who want to find the Subscription and Support (S&S) Renewal Representative or New License Rep.
Judging Criteria:
- Cleanliness of your graphics and design.
- User Experience of the Dimond Mobile App.
- Creativity and ease-of-use is key to the success as it must be engaging to the employee.
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.