Challenge Summary
Welcome to "AppXpress - Marketplace Sub Pages Responsive Design Challenge". In this challenge we need your help to create responsive storyboard for several sub pages in our AppXpress site. We already have the desktop version for this apps and now need topcoder community help to create the mobile and tablet parts. Join this fun and cool challenge NOW!!
Round 1
01. How It Works Screens
02. Stories Screens
03. About Screen
Round 2
01. How It Works Screens
02. Stories Screens
03. About Screen
04. FAQs Screen
05. Get Started Screen
AppXpress Marketplace is an Appirio newest approach to bring structured approach in developing responsive or mobile application. This is a Appirio service that allows new clients to quickly and easily design and build an application. This service is asking simple questions and is very focused on how a customer interacts with the TopCoder Community.
In this challenge we need your help to create responsive assets for several of our Sub Pages in AppXpress site. We already have the desktop version designed and now need you to help create the mobile and tablet versions of the design. Focus in on the break points in the design and how content and imagery shifts when viewed in tablet and mobile views. See more details below for the complete requirements!!
Branding Guidelines
- Use existing desktop design for branding guidelines.
- You can navigate the whole apps flow from this link (clickable path) : http://invis.io/RV2ADQB68
Screen Sizes
- Mobile: 750px x 1334px.
- Tablet: 1024px width and height as required.
- Portrait orientation.
Design Consideration
- Design must make sense for Mobile and Tablet.
- Key emphasis on what the mobile nav looks like.
- User Experience is very important.
Screen Requirements
01. How It Works Screens
- Make a mobile and tablet version for these screens.
- Focus on making the navigation match for mobile and tablet.
- Here are the screens needs to be create :
* 02A-hiw-overview.jpg
* 02B-hiw-our-process.jpg
* 02C-hiw-what-can-you-build.jpg
* 02C-1-sample-stories-responsive.jpg
* 02C-2-sample-stories-ios.jpg
* 02C-3-sample-stories-android.jpg
- Think about the best approach to display and present all those content in mobile and tablet.
02. Stories Screens
- Make a mobile and tablet version for these screens.
- Focus on making the navigation match for mobile and tablet.
- Here are the screens needs to be create :
* 03-stories.jpg
* 03-stories-detail.jpg
- Think about the best approach to display and present all those content in mobile and tablet.
03. About Screen
- Reference screen 04-about.jpg
- Make a mobile and tablet version for these screens.
- Focus on making the navigation match for mobile and tablet.
- Think about the best approach to display and present all those content in mobile and tablet.
04. FAQs Screen
- Reference Screen 05-faqs.jpg
- Make a mobile and tablet version for these screens.
- Focus on making the navigation match for mobile and tablet.
- Think about the best approach to display and present all those content in mobile and tablet.
05. Get Started Screens
- Make a mobile and tablet version for these screens.
- Focus on making the navigation match for mobile and tablet.
- Here are the screens needs to be create :
* 06A-get-started.jpg
* 06B-get-started-email.jpg
* 06C-shopping-cart-empty.jpg
- Think about the best approach to display and present all those content in mobile and tablet.
Important:
- Keep things consistent. This means all graphic styles should work together.
- Make sure you design the mobile and tablets using Grid system.
- All of the graphics should have a similar feel and general aesthetic appearance.
Documentation
- Desktop storyboard : https://drive.google.com/folderview?id=0B5pMhoyHTg-IfjFCRXVIWGFmZWFLY1cyc3B3YVY2YmVJMFh3UVRhT0VmdkhMZnUtV19TSjg&usp=sharing
Target Audience
- Users/clients looking to have apps designed and developed.
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 must make sense as Responsive 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.