Challenge Summary
Welcome to "TAP - Like and Share Widget Re-design Challenge". The goal of this challenge is to redesign our client's "like and share" widget. This widget will be used and embedded on multiple websites and applications. We are looking for your creativity to provide new widget design that able to meet our expectation based on the provided challenge brief.
Join us NOW!!
Round 1
All requirements as stated in challenge details for client review
Round 2
All requirements as stated in challege details + client feedback applied
TAP is IBM's internal app store for IBM employees to browse and download applications for early adoption and to pilot new applications. One of the features in TAP application is the ability to like another applications or website, this function is similar to the "like" functionality within Facebook. Another ability that available in TAP apps is a share capability, this ability is really useful for sharing the knowledge of some applications with other people via IBM connections, email or publicly giving thanks to the innovator that create apps. We syndicate that capability in a widget and allow developers to embed them within apps or websites.
In this challenge, we need your help to create visual look and feel for this widget "like and share". We want to create a new design for "Like and Share" widget that will incorporate the TAP logo's look and feel. The existing design of "Like and Share" widget can be found in attachment (existing-widget-design.png). You also can see how this widget being use and embedded to various applications and website in IBM network in "app-examples.ppt".
Widget Requirements :
Like & Share widget functionality
- Widget with like and share buttons can be available within any IBM app or website (embedded).
- The widget also can show whether you've already liked the application, along with how many people have liked it.
- Some examples of how it will appear:
- If no user has yet "liked" the application -> "Be the first to like this application"
- If this user has not yet "liked" the application but other IBM people already like the app -> "37 other IBMers like this app on TAP"
- If this user has already "liked" the application, along with other IBM people -> "You and 123 other IBMers like this app on TAP"
- The widget could possibly show only "Like", instead of both "Like and Share".
- If the user has "Liked" the application, the button changes from "Like" to "Liked" (and button state should be selected).
- User can undo the like by clicking the button again.
- Share gives the user various choices for how to share -- post on Connections, send email, send BlueThx, copy URL.
- The Share UI must be responsive.
Widget size / color requirements
- Multiple versions should be submitted, so that the client can choose the appropriate version of the widget for their app.
- Multiple layouts to fit with different application styles: horizontal, vertical, desktop, mobile.
- A few color variations, so that at least one will work with an app's color schemes (apps may use different color schemes).
Inspiration for widget style :
- http://www.designpromotivate.com/2013/10/blogger-widgets-social-buttons.html
Branding Guidelines :
- Color scheme (logo & buttons) -- might need more than our current widget design;
- Please incorporate colors and brand from the TAP application logo.
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.
Target User:
- IBM Innovators
- IBM Employees
Judging Criteria:
- How well you plan the user experience and capture your ideas visually
- Cleanliness of your graphics and design
- Design and User Experience.
Submission & Source Files:
Preview Image
Please create your preview image as one (1) 1024x768px 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.