Challenge Summary
Welcome to IBM – Watson AlchemyVision Face Tagging Service Mobile Demo Design Concepts Challenge!
AlchemyVision Face Tagging Service automatically detects faces and identify people within images, and write their names, it also can identify the gender and age range for each face.
We currently have the client website. This is to show you what the AlchemyVision Face Detection application is and what it does. We need you to redesign the online demo for a better UX and the user scenario below and a specifically mobile experience.
Also in this demo we want to simulate a security facial recognition application, where the user will use his picture to login.
In this contest we are looking for DESIGN CONCEPTS on how this Demo Application could work. What should the user see and experience when using the application?
Round 1
Submit your design for a Checkpoint feedback:
0. Choosing an image
1. Face-tagging output
- 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 Checkpoint feedback:
0. Choosing an image
1. Face-tagging output
2. User Login
- 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 Description:
AlchemyVision Face Service automatically detects faces and identify people within images, and write their names, it also can identify the gender and age range for each face.
The goal of this challenge is to have improved designs for the AlchemyVision Demo. The client website, so we are looking for design concepts, so you need to explore the website and understand how it works and provide us with new design concepts for the demo as based on the user scenario below.
We are looking for the [topcoder] design Community to help us with planning our new "user experience" (UX).
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.
Design Goals:
- How should this application be designed?
- How quickly the user can find what he wants? What should the priority features be?
- Read the user story and decide what should the priority features be?
- How quickly can the user understand and interact with the app?
- The application should be easy to use.
- Think simple but effective solutions! Have fun creating this - let us know how you think it should work!
- We want this to be MODERN application design!
Target devices:
- Mobile Resolution: Design for iPhone 6 Retina Display 750px x 1334px.
Make sure you create graphical elements in “vector” format, so when resize for retina versions, graphic still look sharp! It will be great if you can also provide the landscape version.
IMPORTANT! - User Scenario:
The sample scenario for the demo is simulating a security facial recognition application.
- The user takes or uploads a picture of themselves to use as the “pass” picture”
- The user later comes back to the application and takes a new picture of themselves.
- The app scans both pictures and compares them. If the pictures are close enough in appearance, the user “passes”. If the pictures are not close enough in appearance, the user “fails.”
Suggested Screens/Features:
The following screens are suggested screens from us, please feel free to add other screens and features that work fine with what we are trying to accomplish here. It will currently go within the layout of the current AlchemyVision page the demo is on right now.
0) Choosing an Image
- How would a user select a picture in the demo from the established application library gallery?
- How would a user use an image from elsewhere online or from their own computer?
- The current demo has the basic functions - how can you improve or change the UX so it provides a better demonstration of AlchemyVision’s capabilities for new users?
- How can this be used to help inspire users to use the AlchemyVision API in their own applications?
- How can a camera be used for the user to take their picture for the app?
1) Face-tagging output
- On a basic level, this should show the image chosen by the user, show an overlay tagging the recognized people in the image. It’s very basic - how can we make it both look cooler and be more useful to the users?
- There should also be available information from the tagged faces - it’s displayed in the table below in the current demo, but is there a better way to handle this?
- If the demo cannot determine the exact identity of the person being tagged, it should display basic information such as assumed gender, age and other relevant attributes.
- Would it work well for this scenario for the user to edit attributes or tags for the uploaded or taken picture or would this complicate the flow too much?
2) User login:
- How would you depict a user trying to log in to the application using their camera?
- How would the system compare the photos using the Facetagging tech shown in the current demo?
- How would the app display “Pass”?
- How would the app display “Fail”?
Important:
- Keep things consistent. This means all graphic styles should work together.
- All of the graphics should have a similar feel and general aesthetic appearance.
- The application should be designed for iOS and use the IBM design language!
Target audience:
- Anyone who wants to tag faces in given images.
Judging Criteria:
- How well you plan the user experience and capture your ideas visually.
- Cleanliness of your graphics and design.
- Creativity and ease-of-use is key to the success as it must be engaging to users.
- Your design should possible to build and make sense as a mobile application.
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.