Challenge Summary
Welcome to the "IBM - Catalyst Pattern Creation Design Challenge". In this challenge, we are asking for your help to create several "design pattern" screens using real life/business scenario examples to demonstrate iPhone native capabilities to our audience. We are looking for cool/real examples of "patterns" that users will understand and relate back to their mobile ideas and solutions.
Round 1
1. Design Pattern - Accelerometer
2. Design Pattern - Camera
3. Design Pattern - Complex Data Entry
4. Design Pattern - Orientation
Round 2
1. Design Pattern - Accelerometer
2. Design Pattern - Camera
3. Design Pattern - Complex Data Entry
4. Design Pattern - Orientation
5. Design Pattern - Events
6. Design Pattern - Connection
Challenge Details
Catalyst is a mobile app built on IBM enterprise standards, policies, and best practices. It provides completely reusable design patterns, enterprise API connectivity and seamless Bluemix integration. The Catalyst app is aimed at mobile developers to accelerate mobile app development, maximize code reuse, and simplify the use of company services and platforms.
For this challenge we already have the base design (do not redesign the application!) We are only focused on the the pattern examples and improving the quality of the examples and the user experience for interacting with them. In this challenge, we need your help to create several "design patterns" screens using real life/business scenario examples to demonstrate iphone native capabilities.
Challenge Goals
- Deliver enhanced versions of design patterns for native iOS Catalyst application (think great iOS patterns!)
- Highly engaging – Wow factor! We want a user that is looking for specific patterns to see some great examples!
- Demonstrate native iPhone capabilities related back to real-life business scenarios (cool iPhone features!)
File Downloadables:
- Design Pattern Wireframes
- Existing Catalyst Storyboard
Design Pattern Requirements :
- Create your design for iPhone 5 Portrait orientation (640 x 1136 resolution 326 ppi)
- Review the wireframes and storyboard - they are very detailed and will help, DO NOT COPY 100% the idea and layout, Be Creative!!
- Use "05_PatternApps_Details_demo_1.png" as base design/container to put your "design pattern" creation, feel free to create additional flow/new screen for the design pattern, but make sure it have appropriate navigation/flow.
- There are 6 design pattern needs to be create here, however each pattern should only require 1-2 pages/screens to explain.
1. Design Pattern - Accelerometer
Wireframes reference page 5.
- Demonstrate/Show us how iPhone accelerometer can be used within a mobile apps and useful for real life.
- Provide navigation so developer user can see the Raw Data that will be used in the code (sample of raw data can be found in wireframe page 4).
- Feel free to provide your ideas on what real life scenario can be used to simulate the accelerometer function and execute the design.
- Provide us with some great design concepts for the accelerometer function.
- Needs some ideas? Check this link http://www.creativeapplications.net/i-os/10-creative-ways-to-use-the-accelerometer-iphone/
2. Design Pattern - Camera
Wireframes reference page 6.
- Demonstrate/Show us how iPhone camera can be used within a mobile apps and utilized in the user interface.
- Feel free to provide your ideas on what real life scenario can be used to simulate the camera function and execute the UX design.
- Provide us with some great design concepts for the camera function.
- Some basic ideas like taking picture of near environment to get direction or tips for nearby place, taking picture of parts of a device to find specific damage of the parts, etc.
3. Design Pattern - Complex Data Entry
Wireframes reference page 7.
- Demonstrate/Show us how to enable user to enter complicated data into a mobile app using a wide variety of UI elements.
- Feel free to provide your ideas on what real life scenario can be used to simulate the complex data entry function and execute the UX design.
- Basically show us different variations of form design to enter a lot of data, can be limited the input via category, listing, etc for a better UX.
4. Design Pattern - Orientation
Wireframes reference page 8.
- Demonstrate/Show us how to detect and manage rotation of a mobile device to optimize presentation of the visual elements within a mobile apps.
- Feel free to provide your ideas on what real life scenario can be used to simulate the orientation function and execute the UX design.
- Sample of dashboard view in portrait and landscape version to show/presenting summary of information? Any better ideas? WOW us!!
- Provide navigation so developer user can see the Raw Data that will be used in the code (sample of raw data can be found in wireframe page 4).
5. Design Pattern - Events
Wireframes reference page 9.
- Demonstrate/Show us how to use Events to access the mobile devices network and battery state for use within the mobile apps
- Feel free to provide your ideas on what real life scenario can be used to simulate the Events function and execute the UX design.
- Present the information in an engaging ways, via chart maybe? enhance the UX.
- Provide navigation so developer user can see the Raw Data that will be used in the code (sample of raw data can be found in wireframe page 4).
6. Design Pattern - Connection
Wireframes reference page 10.
- Demonstrate/Show us how a mobile app can access the current network connection state of the mobile device and utilize it within the UX.
- Feel free to provide your ideas on what real life scenario can be used to simulate the Connection function and execute the UX design.
- Present the information in an engaging ways, via chart maybe? enhance the UX.
- Provide navigation so developer user can see the Raw Data that will be used in the code (sample of raw data can be found in wireframe page 4).
Branding Guidelines
Use the current designs as a guide. However, we want the new designs that you are creating to be impressive and eye catching.
We are excited to see what you create!
Target Audience
- internal and external software developers, by seeing the design pattern sample creation, they will easily understand what kind of perfect utilization can be used by using the iphone capabilities.
Judging Criteria
- How well you design the mobile application and interpret the provided wireframes
- Cleanliness of your graphics and design.
- Design and User Experience.
Submission & Source Files
Preview Image
Create your preview image as one (1) 1024x1024 JPG or PNG file in RGB color mode at 72dpi and place a screenshot of your submission within it.
Submission File
Please upload PNG images in a zip file with all requested contest requirements stated above. Number your files (01, 02, 03, etc) this will help review them in order.
Source Files
All original source files of the submitted design. Files should be created in Adobe Photoshop or Illustrator and saved as layered PSD/AI files.
Final Fixes
As part of the final fixes phase you may be asked to modify your graphics, images (sizes or colors) or modify overall colors
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.