Challenge Summary
Welcome to the IBM - Career Point Project Assessment App Screen Design Challenge!
We just completed wireframe in previous IBM Challenge. Right now we need your help create the storyboard design to leverage User Interface of Career Point Project Assessment Mobile Application. In the end of this Challenge, we're looking for clean, professional, and great User Experience.
In this challenge you are provided with wireframes to get insights into this mobile app and start working from.
Round 1
Submit your design for a checkpoint review
1. Login page
2.a Home page (Practitioner Information hidden)
3.a Draft PA page (Document Information Tab)
4. Submitted PA (Practitioner Information Tab)
5.a Completed PA (Sign-off Details Tab)
Notes : Any comments about your solutions, make sure you capture correct flow for every page!
Round 2
Submit your final design plus any client checkpoint updates
1. Login page
2.a Home page (Practitioner Information hidden)
3.a Draft PA page (Document Information Tab)
4. Submitted PA (Practitioner Information Tab)
5.a Completed PA (Sign-off Details Tab)
2.b Home page (Practitioner Information shown)
3.b Draft PA page (Project Assessment Tab with the item "Objective" expanded)
5.b Completed PA (Project Assessment Tab with the second Sub-Tab "Results" open)
Notes : Any comments about your solutions, make sure you capture correct flow for every page!
Challenge Details:
Every six months, IBM employees are required to create a project assessment (called a "PA"), indicating how their work has gone. The PA is then read by their manager, who enters review information, indicating how the employee has done. This app will provide IBMers an easy way to create and submit their project assessments, as well as read submitted assessments -- all from their mobile device.
This application must be intuitive and easy to use -- Requiring No Training.
Supporting Documents:
- Wireframes (pa_wireframes.zip)
- CIO Lab Logo image (pic12789.gif)
- AI file of IBM Logo (IBM_logo.ai)
Screen Size:
- Show your solution in Portrait View. Use this screen size (480px x 800px)
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!
Use Case Scenario:
- John is an IBM employee.
- John logs in to the application using his Intranet ID and password.
- John can see his existing PAs
- John can open a new PA, and save it as a draft, or submit it.
- John can edit a PA that is in draft mode.
- John can submit PA.
- Please refer to Support Document "pa_wireframes.zip" for details
Design Requirements:
0. 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
1. Login
Refer to Login screen in the wireframe
- User logs in to the application using his Intranet ID and password, the fields to use are "Intranet ID" and "password".
- Please include a logo placeholder.
- Note that we do not support "forgot my password", "remember me", or "sign up" actions, so do not put those on your login screen.
- How validation error look?
2. Home page
Refer to Home-draft screen in the wireframe
- User can see his existing PAs. Each PA will have an associated date, plus a status (Draft, Submitted, Closed).
2.a Home page (Practitioner Information hidden)
- Initial layout
2.b Home page (Practitioner Information shown)
- The layout of Practitioner Information shown (by tapping User name/image section to show practitioner information).
3. Draft PA
Refer to DraftPA screen in the wireframe
- User can edit a draft PA
- User can save a PA as a draft
3.a Draft PA page (Document Information Tab)
- Initial layout
3.b Draft PA page (Project Assessment Tab with the item "Objective" expanded)
- The layout of Project Assessment Tab (the second tab) with the first item "Objective" expanded.
4. Submitted PA (Practitioner Information Tab)
Refer to SubmittedPA screen in the wireframe. PA in Submitted state, nothing is editable.
- The layout of Practitioner Information Tab (The 3rd tab, NOT the initial layout).
5. Completed PA
Refer to CompletedPA screen in the wireframe. PA in Completed state.
5.a Completed PA (Sign-off Details Tab)
- Initial layout
5.b Completed PA (Project Assessment Tab with the second Sub-Tab "Results" open)
- The layout of Project Assessment Tab (the second tab) with the second Sub-Tab "Results" open.
Notes:
- Target Platform: Android 4.4 (KitKat) + and higher
- Your solution needs to be a Responsive Design Solution when viewed on Portrait and Landscape view of mobile device
- Feel free to suggest any tools/function that can bring good User Experience for this Mobile Application.
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.
- Think simple but effective solutions! Have fun creating this.
- We want this to be MODERN UI & UX application, yet appropriate for a professional, corporate environment.
- DO NOT just color existing wireframe, we need you suggest ideas on layout and functionality within the application.
- Stock Arts Declaration: We don't prefer to have stock arts in this contest. You can use stock arts ONLY IF you get stuck - for example, you have to use a stock photo to support your ideas. YOU MUST declare any stock item used in your solution with details in submitting process. Or your submission will fail in screening.
Target User:
- The target audience for this application will be IBM employees that need to create and submit PAs.
Judging Criteria:
- Cleanliness of your graphics and design.
- User Experience of Career Point Porject Assessment Mobile Application.
- 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.
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.