Challenge Summary
Welcome to "IBM - SiBM Corporate Recognition Tool Wireframes Challenge". This application purpose is to give IBM employees access to nominate themselves or their co-worker to get recognition in their company.
At the end of this challenge, we are looking to see intuitive and easy to use (requiring no training) "wireframe concepts" that will help us design and build UI/UX in the next phase of this project!
This challenge is focused on "wireframe" output and results. Be creative in your wireframes!
Round 1
01. Homepage
02. Nomination form Page
Round 2
01. Homepage
02. Nomination form Page
03. Add Evaluation Form Page
04. Settings Page
This application purpose is to give IBM employees access to nominate themselves or their co-worker to get recognition in their company.
Notes:
- This application will be developed under web platform and will be create as responsive apps.
- Your wireframe submission needs the ability to drill down through all the page flow
- Suggest best practice User Experience solution that capture all required functionality as stated below.
- The more details your incorporate in the wireframe will greatly help us to understand the application flow
Design Guidelines
All submission must follow the IBM Design Language. Make sure that all graphics, including buttons and icons, are in VECTOR format.
- Layout
- Typography
- Iconography
- Color
- Interaction
- App Inspiration
Although the design language has less of a direct impact on Wireframes, it should be kept in mind for how it will translate into Visual Design.
Accessibility
When you are planning your concepts, make sure you are also designing for accessibility. You can view the accessibility checklist here.
Screen Size
Resolution: Please use a minimum of 1024x768 px.
Learn Axure:
New to Axure? Here are some quick tutorials to help you get started.
http://www.axure.com/learn
Suggested Screens
The following are only suggested screens. We highly recommend that you add other screens and features that you believe will work best with the main goal of the web application.
01. Homepage
- This screen by default will be appear to user.
- This screen will show different contents, based on user roles.
- There are various of user roles and each of them will show the following informations :
Home page: Nominee
- This page contains:
-- A button for creating a new nomination form
-- A list of important dates
-- A link to an existing form, if it already exists
-- For each form, an indication of:
** its current state (e.g., being edited by whom, being evaluated, etc)
** Type of review: Readiness review, Business unit review, Final corporate review
- When editing an existing nomination form or creating a new one, the user will need:
-- A way to saving the form as a draft
-- A way to select the name of the person to send the form to, and then to send it
-- A way to view the comments made by the nominee’s coach
Home page: Coach
- This page contains:
-- A list of important dates
-- A link to an existing form, if it already exists
-- For each form, an indication of:
* It's current state (e.g., being edited by whom, being evaluated, etc)
* Type of review: Readiness review, Business unit review, Final corporate review
- When opening a form, the user will need:
-- The ability to add comments to the sections of the form (but not edit the form)
-- The ability to see any previous comments
-- A button to send the form back to the nominee or to send it to someone else
Home page: Manager
- This page contains:
-- A button for creating a new form
-- A list of important dates
-- A link to any forms this person has access to (maybe shown in some sort of dashboard?)
-- For each form, an indication of:
* its current state (e.g., being edited by whom, being evaluated, etc)
* Type of review: Readiness review, Business unit review, Final corporate review
- When opening a form, the user will need buttons for:
-- Saving the form as a draft
-- Selecting the name of the person to send the form to, and sending it
-- Submitting the form (if the form is complete and this person is listed as the final submitter)
-- Submitting the form to someone who is the final submitter
Home page: Submitter
- This page contains:
-- A list of important dates
-- A link to any forms this person has access to (maybe shown in some sort of dashboard?)
-- For each form, an indication of:
* its current state (e.g., being edited by whom, being evaluated, etc)
* Type of review: Readiness review, Business unit review, Final corporate review
- When opening a form, the user will need buttons for:
-- Saving the form as a draft
-- Selecting the name of the person to send the form to, and sending it
-- Submitting the form (if the form is complete and this person is listed as the final submitter)
Home page: Evaluator
- This page contains:
-- A list of important dates
-- A link to any forms this person has access to
-- For each form, an indication of:
* its current state: In Evaluation
* who the current reviewer is
* the type of review: “readiness review”, “business unit review”, and “final corporate review”
- When opening a nominee’s form, the evaluator can only view it, not edit it.
- This user can add their evaluation to the form. Buttons available:
-- Cancel
-- Save comments as draft
-- Submit form to indicate evaluation is complete
-- For certain types of reviews :
* Readiness – Ready, Almost Ready, Not Ready
* Corp – Recommend Approve, Defer or Close”, for the evaluation
- The evaluation form should have fields that the evaluator needs to fill in, probably also with some guidance about what type of information to add. Here are the fields:
-- Strengths
-- Gaps
-- Assessment of Readiness
-- Recommendations
-- Additional comments
-- Who they spoke to / sources of key information
- They can choose whether the nominee can see their comments or not
Home page: Executive
- This page contains:
-- A list of important dates
-- A dashboard of all nomination forms, showing:
-- Type of nomination
-- Nominee name
-- Nominee Business unit
-- Nominee Geography (Country)
-- Nominee Key Demographic(s)
-- Evaluator name
-- Number of previous submissions (and in which program)
-- Status of nomination
-- Specific Program (Readiness Review, Corporate)
- When opening a nominee’s form, this user can only view it, not edit it, and can probably only see some of the sections of the form.
Home page: Corporate technology program team
- This page contains:
-- A list of important dates
-- A button to edit the calendar, to add the important dates
-- A button to see who has access to what role, and a way to edit that access
-- As with the executive dashboard, a list of all forms, plus their status and other information
-- A way to filter the data in the dashboard (by business unit, demographics)
-- A button to generate a PDF of the dashboard
-- A button to Export to Excel compatible file or PPT key data points (names, b/u, country, gender, etc.)
-- A way to archive existing documents
- A way to assign the evaluator and nominee demographics for a particular nominee's form
- The ability to edit forms.
- A button to forward the form to someone : A way to select the name of the person to send the form to, and then to send it
02. Nomination form Page
- This page will be created by nominee, and manager to nominate themselves or their co-worker to get recognition in the company.
- Check "Corporate Technical Recognition Form-v2.doc" for the nomination form.
- Note that we're gonna need sections that have both read & edit versions, depending on the state of the form & the role of the person viewing it.
03. Add Evaluation Form Page
- UI for adding an evaluation to a nomination form
- This page will be use by coach, manager, final submitter and evaluator.
- Comment section to each specific form in the nomination form by user.
04. Settings Page
- UI for the program office to specify the important dates and the people who have access to the application (and their roles)
- See Corporate technology program team access for any settings recommendation in this page.
Background information (for use on multiple pages) :
- Sample form states settings : Draft, Ready for review, In evaluation, Closed
- Sample milestones to use for upcoming dates (consider showing this as a calendar): Nominations open, Nominations due, Evaluations begin, Evaluations end, Selections finalized
Important!: Make sure your wireframe solution capture all User Case Information, User Flow and User Case explained above
Documentation
- Corporate Technical Recognition Form-v2.doc
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
- Carefully thought-out user experience and interface.
- Did you use the IBM design language?
- Completeness and accuracy of the wireframe as defined in the spec requirements
- How well your wireframes provide a consistent user flow.
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
Generated HTML files with all the requested contest requirements stated above.
Source Files
Wireframes should be built in Axure. The resulting files should have generated HTML files. Also, all the content must be listed and the pages are linked together to show page flow.
Final Fixes
As part of the Final Fix phase, you may be asked to remove, update, or change some features of the wireframe.
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.