Challenge Summary
Welcome back to the "IBM Catalyst Pattern Creation Design Challenge - Part 2". In this challenge, we are asking for your "design ideas" in creating new and exciting mobile iOS "design patterns" using real life/business scenario examples. We are looking for COOL and REAL examples of "patterns" that any user could understand and relate back mobile solutions.
This is the second challenge designing these mobile patterns. We are providing the BASE UI design and would like you to focus on creating "non-technical" mobile design patterns.
You do not need experience in the previous challenge to join!
Do your research! Check out "Mobile Design Patterns" and "iOS Design Patterns"!
Round 1
5 Initial design pattern creation for client checkpoint review:
Select 5 of your choice OR the patterns listed here (your choice)
* Capture
* Compass (include raw data screen )
* Contacts
* Device (include raw data screen )
* Disable cut and copy
Round 2
All design pattern creation with feedback applied:
* Capture
* Compass (include raw data screen )
* Contacts
* Device (include raw data screen )
* Disable cut and copy
* Globalization
* In-app browser
* Multimedia display
* Storage
* Database Access
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 are providing 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 cool and engaging "design patterns" screens using real life/business scenario examples to demonstrate iphone native capabilities.
What does "Design Pattern" mean?
A design pattern is a repeatable solution to a software engineering problem. Design patterns can be used in many programs. Design patterns are not considered finished product; rather, they are templates that can be applied to multiple situations and can be improved over time, making a very robust software engineering tool. Developers use design pattern templates to improve coding efficiency and final product readability.
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 (wireframes.zip)
- Existing Catalyst Storyboard (catalyst.zip)
- Design Pattern Sample From our Part 1 challenge for your references (design-pattern-sample.zip)
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" from Existing Catalyst Storyboard (catalyst.zip) 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.
- In each wireframes pages that we provide in this challenge, you can find our current design sample for particular design pattern on the left side and what we're expecting on the right side, feel free to use your creativity to create the new design pattern sample. Your design MUST give us a WOW factor when we see it for the first time.
- There are 10 design pattern needs to be create here, however each pattern should only require 1-2 pages/screens to explain.
01. Design Pattern - Capture
Wireframes reference page 5.
- The "capture" design pattern records audio or video or takes a picture (based on the W3C Capture API).
- Demonstrate to us how the device audio, photo and video capabilities can be accessed in a mobile application and utilized in the user interface.
- What kind of example fit the "Capture" design pattern? screenshot feature? Record a song? etc?
- Provide us with design concepts for the "Capture" function.
02. Design Pattern - Compass
Wireframes reference page 6.
- The Compass design pattern shows the directions the mobile device is pointing.
- Demonstrates how this capability can be accessed in a mobile application and utilized in the user interface.
- What kind of example fit the "Compass" design pattern? a GPS? Road direction? etc?
- Provide us with design concepts for the "Compass" function.
03. Design Pattern - Contacts
Wireframes reference page 7.
- Demonstrate how to read and write to the device contacts database within a mobile app
- What kind of example fit the "Contacts" design pattern? simplify navigation to find a contact? Listing all contact information for all communication features like chat, email apps, WhatsApp, FB, twitter, etc?
- Provide us with design concepts for the "Contacts" function.
04. Design Pattern - Device
Wireframes reference page 8.
- Demonstrates how to access and use information about the device, such as device name, device platform, device UUDID, device model, and OS version within a mobile app.
- What kind of example fit the "Device" design pattern? more detailed information for each component? infographic or beatiful visualization for the device information? etc?
- Provide us with design concepts for the "Device" function.
05. Design Pattern - Disable cut and copy
Wireframes reference page 9.
- Demonstrates how to disable the cut and copy function for html presented within a mobile app
- What kind of example fit the "Disable cut and copy" design pattern? sample of other apps that cannot be cut/copy? etc?
- Provide us with design concepts for the "Disable cut and copy" function.
06. Design Pattern - Globalization
Wireframes reference page 10.
- Demonstrates how to obtain information and perform operations specific to the user's locale and time zone within a mobile app.
- What kind of example fit the "Globalization" design pattern? dictionary for local languange? timezone comparison? etc?
- Provide us with design concepts for the "Globalization" function.
07. Design Pattern - In-app browser
Wireframes reference page 11.
- Demonstrates how to embed a secure browser into a mobile app to surface web content to the user.
- What kind of example fit the "In-app browser" design pattern? list of secure browsers? layout of each browser? etc?
- Provide us with design concepts for the "In-app browser" function.
08. Design Pattern - Multimedia display
Wireframes reference page 12.
- Demonstrates how multimedia, such as video, can be displayed from a mobile app.
- What kind of example fit the "Multimedia" design pattern? beautiful list of videos? video details with all comments and information? etc?
- Provide us with design concepts for the "Multimedia display" function.
09. Design Pattern - Storage
Wireframes reference page 13.
- Demonstrates how a mobile app can access and use storage options on a mobile device
- What kind of example fit the "Storage" design pattern? file repository? document viewer? etc?
- Provide us with design concepts for the "Storage" function.
10. Design Pattern - Database Access
Wireframes reference page 14.
- Demonstrates how to access a DB2 database within a mobile app.
- What kind of example fit the "Database Access" design pattern? sample of data in database and then simulation of the apps in mobile apps? etc?
- Provide us with design concepts for the "Database Access" function.
Branding Guidelines
- Use the current designs as a guide. However, we want the new patterns 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.