Challenge Summary
Welcome to "IBM - SiBM Corporate Recognition Tool Design Challenge". In this challenge, we are looking for your help to create the best look and feel for our new web application which will be use to nominate employees to get recognition about their work and performance in the company.
At the end of this challenge, we are looking for the best possible UI/UX for this application!!
Round 1
01. Login Screen
02. Dashboard Screen
03. Nominee - Nomination Details (Draft and Gap) Screen
04. Nominee - Create New Nomination Screen
Round 2
01. Login Screen
02. Dashboard Screen
03. Nominee - Nomination Details (Draft and Gap) Screen
04. Nominee - Create New Nomination Screen
05. Multiple Roles - Nomination List Screen
06. BTL Partner - Gap Report Screen
07. Team - Nomination Details Screen
08. GUI KIT Scree
This application purpose is to give IBM employees access to nominate themselves or their co-worker to get recognition in their company.
Design Guidelines
All submission must follow the IBM Design Language. Make sure that all graphics, including buttons and icons, are in VECTOR format.
- 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
Accessibility
When you are planning your concepts, make sure you are also designing for accessibility. You can view the accessibility checklist here.
Screen Size
- Screen Resolution: Please use a minimum of 1280px for the width with height adjusting accordingly.
- Please make sure that you create graphical elements in VECTOR format so graphics retain quality when resized.
Screen Requirements :
01. Login Screen
- User will needs to login to the apps before able to use the application.
- Ordinary login form content such as username, password, remember me, forgot password and login button.
- User should be able to click to request access to the application.
- Simple logo for the apps to make it more engaging?
- Provide error condition if user enter wrong credential info in the login form.
02. Dashboard Screen
- After successfull login, user will be redirected to this page.
- Content of the dashboard will be different to each user roles, depending on their task in the apps.
- Dashboard should show summary information about each user work progress (pending/complete) and latest information that important to them.
- Each user roles have different dashboard content, please create these 3 dashboard version in your design :
- Notice the dashboard split into two section, left sidebar and main content area.
- In the left sidebar, there are calendar with some list below it.
- Each color in the calendar date represent some event and the event information can be found from the list below it.
* BTL Partner - Dashboard
-- In the main content area, the content split into nominee progress and nominee list.
-- Nominee progress information being presented using graph/chart that compares several nominees progress from year to year.
-- The nominee list will have 4 tabs to show the completeness of the nominee progress (draft, ready for submission, in evaluation, closed)
* Team - Dashboard
-- In the main content area, the content split into several graph/chart (Chart design can be placeholder) section that show summary of nominee progress around the globe along with show nominee status in user area responsibility.
-- The content will be split into 4 areas which are : Nomination Summary, Nomination By Business Unit, Nomination by Key Demographics, Nomination by Geo Location.
* Nominee - Dashboard
-- In the main content area, user will see summary information about his/her nomination.
-- There will be alert and notification below the summary information so user will aware of latest updates regarding their nomination
03. Nominee - Nomination Details (Draft and Gap) Screen
- User will be able to see employee details which being nominated in this screen.
- Notice that the left content area is clickable and each list will change the content on the right side (Create all contents for this one).
- We need two different content layout created for this screen which are "draft" and "gap" status.
04. Nominee - Create New Nomination Screen
- User can create new nomination if necessary.
- There will be several steps to fill in the nominee informations, Here are information that needs to fill in :
* Nominee info
* Nomination Details
* References
* Sharing Preferences
* Send for Review/Approval
- For this challenge, create only Nomination Details and References steps screen.
05. Multiple Roles - Nomination List Screen
- User can see all nominees in a table and tile view, please create these 2 view.
- Notice that the filter area is clickable and will expand filter section that needs to be created in this challenge
- Click Export button will show options to download files in different format, create the option files.
06. BTL Partner - Gap Report Screen
- In this screen, you just need to create the "Overall Gap Report" screen.
- This screen will show graph (summary information) and the gap content table (detail information).
07. Team - Nomination Details Screen
- This screen is quite similar with screen number 3.
- The right content will be different since this screen will have a purpose to give team user roles to see evaluator for readiness review in the apps.
- Notice that clicking "Add Evaluator" button will trigger popup to add new evaluator.
- Notice that clicking the left side will change content on the right side, you just need to create the content for "Access Management" area.
08. GUI KIT Screen
- Please create separate screen for all design elements used in your design
- Table, Form design elements, Icons needs to be put into this screen to simplify future development work.
- Make sure to create your icons as smart object so it can be editable and not broken in bigger devices.
Important:
- Keep things consistent. This means all graphic styles should work together and follow our best practice.
- All of the graphics should have a similar feel and general aesthetic appearance.
- Feel free to add new screen to explain your design interactions for the apps.
Documentation
- Wireframes
Target Audience
- The target audience for this application will be IBM employees split into different roles :
* Nominee
* Coach
* Manager
* Submitter
* Evaluator
* Executive
* Corporate Technology Program Team
Judging Criteria
- How well you plan the user experience and capture your ideas visually
- How well you design the application layout!
- Cleanliness of your graphics and design
- Creativity and ease-of-use is key to the success as it must be engaging to users.
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.