Challenge Summary
Welcome to "Catalyst Mobile Application Design Challenge". In this challenge, we are looking for [topcoder] community to help create set of interfaces for our new mobile application. We are providing wireframes to help get you going. Help us to create look and feel for our catalyst application. Join now!!
Round 1
00. Splash screen
01. Login page
03. Homepage Screen
04. Pattern/Apps Details Screen (info tab)
06. Pattern/Apps Details Screen (code tab)
12. Contribution Screen
Round 2
00. Splash screen
01. Login page
02. Connect Screen (GitHub and Bitbucket)
03. Homepage Screen
04. Pattern/Apps Details Screen (info tab)
05. Pattern/Apps Details Screen (Demo tab)
06. Pattern/Apps Details Screen (code tab)
07. Pattern/Apps Details Screen (Reviews tab)
08. Search Screens
09. Categories and All function Screens
10. Media/By functions Screen
11. Programming Language Screens
12. Contribution Screen
13. Favourites Screens (My Catalyst)
14. Menu Screen
15. Settings Screen
Catalyst is a serious, reliable, high-quality application to provide design patterns and links of example apps for both developers and designers. Users of Catalyst cannot upload their files directly. Files will be reviewed by an entity outside of Catalyst first, and then get approved to be published officially to Catalyst. Patterns and apps provided in Catalyst are therefore of high quality and relevant.
Before designing, please read the instructions carefully and go through all the wireframes. Choose the best design methods to realize those functions. Feel free to use colors, fonts, layouts, and interaction methods to improve the design. Read the details below for the screen we are looking to get designed in this challenge.
Design Consideration
- "Catalyst" is the application name. Create a serious and recognizable brand for this application.
- Provide your color schemes to us.
- Design the mobile experience for an HTML5 mobile application
- iPhone 5 Portrait orientation (640 x 1136 resolution 326 ppi)
- For icons size, make sure strictly follow this guidelines : https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/IconMatrix.html
- Review the wireframes - they are very detailed and will help, but do not copy 100% the layout, be creative!
Screen Requirements :
00. Splash screen
No wireframes reference.
- This page design needs to be clean and interesting
- Simple logo for "catalyst"? Big text headline? Any concept that will help with branding the application.
- By default, this screen will appear first when the application being launched.
01. Login page
wireframe references page 3 - middle
- user will needs to login first to use the application.
- Standard login features (email/password/sign in button/cancel button/forgot password link).
- Login page for users who just finished registration (or are already registered)
02. Connect Screen (GitHub and Bitbucket)
wireframe references page 3 - right
- This screen showing repository connectivity for users who just finished registration (only showed 1 time)
- users who have already registered in the past don’t see this page past the first time registering
- there are two repository options available, GitHub or BitBucket.
03. Homepage Screen
wireframe references page 4
- The top blue section is a carousel with images, captions, or both (preferred) that showcases design patterns that the current user might find interesting.
- The user can swipe to the sides to go the the next slide
- This screen will show list of "Popular design patterns", "apps from catalyst".
- Don't forget to create tab navigation "home, search, categories, contribute, my catalyst".
04. Pattern/Apps Details Screen (info tab)
wireframe references page 6 - left and right
- These two wireframes represent the same page, just at different sections which the user can get to by scrolling.
- First part are the screenshots of this pattern, by clicking these images, users can view larger images in another screen.
- Screenshots and related patterns can be scrolled.
05. Pattern/Apps Details Screen (Demo tab)
wireframe references page 7 - left, middle and right
- left, The demo page showcases a working version of the pattern within the app/mobile device. It is only functional for certain languages.
- middle and right, These are the demo pages for patterns that do not have the acceptable languages for the app to display. Screenshots are used instead of a live demo.
06. Pattern/Apps Details Screen (code tab)
wireframe references page 8 - left, middle and right
- left, Part of the code section of the pattern. Showcasing the HTML code.
- middle, Part of the code section of the pattern. Showcasing a user swiping to get to Javascript code.
- right, Part of the code section of the pattern. Showcasing the Javascript code.
- In both sections, the user can click the envelope to get a prompt for the user to obtain the code. PLEASE feel free to change the envelope :)
- the sample codes color must have different colors for syntax, attributes and content. just like a code editor.
07. Pattern/Apps Details Screen (Reviews tab)
wireframe references page 9 - left, middle and right
- left, Reviews page.
- middle, Same page with left wf. This shows how it works when scrolling. Users can filter reviews.
- right, Write a review. Comments are optional for users.
08. Search Screens
wireframe references page 11 - left, middle and right
- left, Just arrived at search page
- middle, Typing into search…auto suggestion
- right, Selected “capture video” and now have results
09. Categories and All function Screens
wireframe references page 12 - left and right
- left, Categories page. Users will be able to find patterns/apps by functions or by programming languages.
- right, All functions page. Media, notifications and mails are category names. Little red mobile phone means this is an app, not a pattern.
- provides us with icons creation for all items shown in the wireframes.
10. Media/By functions Screen
wireframe references page 13 - left and right
- left, Media page. Users get to this page when clicking “media” under “all functions”. Users should be able to view all, by latest, or popular.
- right, Pattern’s page under categories. In this WF, video pattern has three versions written by Java, JavaScript, and PHP.
- By clicking JavaScript, users can see the video pattern written by JavaScript.
11. Programming Language Screens
wireframe references page 14 - left, middle and right
- left, All programming languages page. There are limited programming languages for front-end development. Feel free to add more.
- middle, Categories by programming languages. This is an example of JavaScript.
- middle, Users should be able to view by index, popular, or new. Little red mobile phone icon means this is an app, not a pattern.
- right, Same page with middle. This WF shows how it works when scrolling up.
12. Contribution Screen
wireframe references page 15 - left, middle and right
- left, First screen of contribute page. Ideally users can either import the patterns/apps from Github/Bitbucket, or type into a url of their patterns/apps.
- middle, Same screen with left, when scrolling up, users can type into their comments for the patterns/apps they just contributed. Users will be directed to home page after submission.
- right, Second screen of contribute page. Users will be able to contribute their ideas, suggestions, questions, comments for Catalyst, or for any patterns/apps in Catalyst.
- Users will be directed to home page after submission.
13. Favourites Screens (My Catalyst)
wireframe references page 16 - left and middle
- left, Displaying “My favorites” within My Catalyst. Show’s design patterns or apps that I have favorited and any status updates for the patterns/apps.
- middle, Displaying “My contributions” within My Catalyst. Show’s patterns/apps that I’ve tried contributing to Catalyst showing status of approval/pending/rejection.
14. Menu Screen
wireframe references page 17 - left
- Hamburger menu. Please design the Catalyst Logo, together with those icons.
- about, catalyst guidebook, FAQ, Contact Us, Settings, Logout.
15. Settings Screen
wireframe references page 18 - right
- Settings page. Feel free to add other ideal settings.
Branding Guidelines
- No branding guidelines available, it is up to your creativity.
- We want to see some serious design styles, i.e. no naughty/cute colors/fonts.
- We are excited to see what you create!
Target Audience
- internal and external software developers
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.