IBM - SiBM CredentialME Mobile Screen Design Challenge

Welcome to the IBM - SiBM CredentialME Mobile Screen Design Challenge!  In this challenge, we are looking for you to design the screens for a new mobile application called CredentialME.  The CredentialME App will allow you to earn, manage, share, build and consume digital badges and credentials for skills and achievements.

For this challenge, we need you to create screen designs for the new CredentialME application based on the wireframes from our last challenge.

We look forward to seeing your creative screen designs!

Round 1

Round 1 will focus on the following screens for the new application:

1) Login
2) Stream
3) My Badges
4) Badge Details
5) User Profile

NOTE: If anything is unclear, please ask for clarification on the forum and we will be happy to help!

Round 2

In Round 2, you will need to include all Round 1 screens (updated based on checkpoint feedback).  For Round 2, you must also include all the remaining functionality described in the project documentation, including the following screens:

1) Login
2) Stream
3) My Badges
4) Badge Details
5) User Profile
6) Favorited Badges
7) Share Badge / App
8) Send Feedback
9) Search Results
10) Splash Screen / Launch Icon

NOTE: If anything is unclear, please ask for clarification on the forum and we will be happy to help!

Challenge Description:
The purpose of this challenge is to design the screens for a new mobile application called CredentialME.  The CredentialME App will allow you to earn, manage, share, build and consume digital badges and credentials for skills and achievements.  In other words, CredentialME is a badge wallet, where you can see and manage your badges.  For this first release, we will accept badges from Mozilla and Pearson (badge providers), and allow people to publish badges they've earned to IBM social channels.

Project Background Information:
What is a Credential? A credential is proof of a person’s capability, skill or achievement. It’s used to indicate your suitability for a role or task. Credentials are aligned to independent standards and are verified and validated. We are focused on credentials for “resume-worthy” achievements and use badges as a visual representation.

Mozilla and Pearson are badge providers (see http://openbadges.org/ and http://www.pearsonvue.co.uk/About-Pearson-VUE/Discover-Pearson-VUE/Additional-Pearson-VUE-offerings/Acclaim.aspx for more details).

Note: For this first release, we will allow badge publishing to external environments (e.g., Facebook, LinkedIn) as well as several IBM internal environments (e.g., IBM Expertise, IBM Connections or BluePages).

Design Guidelines:
- The screens designs will be for a new mobile app: CredentialME.
- Screen size: This app will designed for the native mobile environment and this challenge focuses on iOS: 750 x 1334 px (iPhone 6 Portrait)
- All screens and functionality described in this challenge spec and the wireframes must be included in your submission.  

User Flow:
1. User logs in -- first time, they give credentials for Mozilla and Pearson

2. Once logged in, they can see a stream of activity in the app -- possibly indicating people in your Connections network

3. They can see all of their own badges on the main page

4. They can find out how to earn other badges -- by searching / filtering (happens on Mozilla & Pearson), then can read descriptions of how to earn those badges

5. Search for another person who uses the app, and see their published badges

6. Select any badge, and choose to publish it (i.e., make it visible) -- makes it visible in IBM Expertise, and also within the app

7. Alert when you have a new badge that can be published

8. Unpublish a badge

9. Manage your profile -- credentials for Mozilla and Pearson

10. Share with others -- tell other people (e.g., via email) about your badge -- maybe needs to be published first

11. Share the app with others -- just to alert them to the existence of the app

12. Send feedback -- will go to the team (they'll provide a task ID)

Required Screens:
We are looking for the following screens to be designed:

0) Splash Screen / Launch Icon:
- Come up with a splash screen (this will be shown in the initial launch of the app).
- Also, please make sure to design a simple app launch icon for this new application 

1) Login
- Login screen for users to sign in using their IBM credentials
- We are looking for something new for the CredentialME logo and would like to see your ideas
- Ability to login / connect to Mozilla and Pearson accounts (first time users may not yet have an account set up with Mozilla/Pearson, so we should give them the option to skip this step if they want)
- Wireframes: login.html

2) Stream
- Stream of items that are related the user (someone published a new badge, there’s a new badge available  that you can earn, etc)
- Wireframes: streams.html

3) My Badges
- List of badges earned
- Includes the ability to share (notify someone by email) and publish badges (make them visible to others in the app); users can also “unpublish” a published badge, to hide it again
- Wireframes: my_badges.html

4) Badge Details
- Display details about a badge (such as how to earn it).
- In the wireframes there is currently only one indicator that says "IBM Channels". We have at least two - IBM Connections and IBM Expertise. Please make sure your design includes a way to select / display each of these individually.
- Wireframes: my_badge_detail.html

5) User Profile
- The user can view their own profile or profiles of other users
- Wireframes: user_profile.html

6) Favorited Badges
- A list of badges the user has favorited
- Wireframes: favorited_badges.html

7) Share Badge / App
- Ability to share badges, or the app, with others (both internally and externally).
- Allows the user to tell other people (e.g., via email) about their badges
- In the wireframes there is currently only one indicator that says "IBM Channels". We have at least two - IBM Connections and IBM Expertise. Please make sure your designs include a way to select each of these two.
- In the wireframes the "share badges" page only has external sharing - this is where the internal sharing (IBM Connections and IBM Expertise) should also be indicated / selected.
- Wireframes: share_badge.html, share_app.html

8) Send Feedback
- Ability to send a message to the app admin
- Wireframes: send_feedback.html

9) Search Results
- Display search results
- Wireframes: search_results.html

NOTE: The Notifications page from the wireframes is out of scope for this first release, so there is no need to create a screen design for this page.

Branding Guidelines:
All submission MUST follow IBM Design Language (if you haven't learned it yet - now is a great time!): 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.

Accessibility:
- Make sure when you are planning your concepts you are also designing for accessibility.
- Since this application will be very visual (colors) - think about color blindness and the need for contrast/labels.
- You will notice the color accessibility suggestions within the IBM Design Language.
- Accessibility checklist.

Documentation Provided
- Wireframes: Contains the basic ideas for screens, content, and the flow of the application
- Badge examples (you may either design some sample badges yourself or you can just use the sample badges on badges-CredentialME.png)

Target Audience
- IBM employees (users will need to log in using their IBM Intranet credentials)

Judging Criteria
- Overall Design and User Experience (UX)
- How well you plan the user experience and capture your ideas visually.
- Cleanliness of your graphics and design
- How well you capture the requirements in this challenge spec and from the wireframes.

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.
-  See more information about Final Fixes.