Challenge Summary
Welcome to "FORTUNA - Application Store Tablet Wireframes Design Challenge". The challenge goal is to produce tablet wireframes for our Application Store. Using our existing mobile phone wireframes, we would like to see your creativity and convert the design to fit for larger screen size (total layout redesign that fit for tablet devices, not just enlarging icon and images). Join now!
Let us know what questions you have in the forums.
Round 1
Pages we would like to see for the checkpoint review
1. Featured Application Screens
2. Application Bundles Screens
3. Search Features
4. Application List
5. My Application List
6. Filter Features
7. Application Details : Overview
Round 2
Final Designs with any additional checkpoint feedback
1. Featured Application Screens
2. Application Bundles Screens
3. Search Features
4. Application List
5. My Application List
6. Filter Features
7. Application Details : Overview
8. Application Details : Action Menu
9. Application Details : Comments
10. Application Details : More Info
11. My Rating
12. Add Tags
13. Menu
14. About
15. Settings
Challenge Details
We currently have mobile wireframes for "Application Store" we are looking for the [topcoder] community UX skills to help design and create tablet wireframes for our "Application Store". We need you to review the current mobile wireframes (see downloads) and decide what is the best layout for tablet devices that still provides all elements and functionality like what our mobile wireframes have.
Read the details below for screen requirements needed in this challenge!
General Requirements :
- Please check Mobile App Wireframes.zip page 2.
- Please make sure all user stories interaction listed in page 2 are included in your wireframes.
- Mostly all interactions will be covered in screen requirements below.
Screen Requirements :
1. Featured Application Screens
Wireframe references page 3.
- 4 sub tabs needed in this screen : Featured (by default), Apps, Website, and My Apps.
- This screen will show list of features application.
- There will be one highlighted application along with several features apps categories (Application Bundle) below it.
- If the user touches the highlighted application, it will bring the user to details application.
- Please make sure not missed any elements information from mobile wireframes.
2. Application Bundles Screens
Wireframe references page 4.
- User can interact with this screen by touch/tap apps bundle categories from features screen.
- Once user touch/tap apps in apps bundle categories, it will shown the application details with related application connected to the apps.
- User will see information if they install one particular apps bundle, it will also installed several related application (user can choose to install the related apps or not)
- Please make sure not missed any elements information from mobile wireframes.
3. Search Features
Wireframe references page 5.
- User can search any applications from search section by touch/tap search icon in the header.
- Once user put their search query, it will show the result in 3 different sub-tabs result : All, Apps, and Website.
- Search features should be available anywhere in the applications.
- Please make sure not missed any elements information from mobile wireframes.
4. Application List
Wireframe references page 6.
- If user touch/tap "Apps" sub-tabs in features screen, it will show all applications list in the store.
- If user touch/tap "Websites" sub-tabs in features screen, it will show link only.
- If user touch/tap "My Apps" sub-tabs in features screen, it will show all applications that user got and user will be able to open/updates their apps.
- Please make sure not missed any elements information from mobile wireframes.
5. My Application List
- wireframe references page 7.
- user can access this screen by touch/tap "My Apps" nav in features screen.
- There will be 2 condition in this screens that needs to be simulated :
* first one is list of apps that needs updates. User can choose to updates one by one or updates all apps in one step (one updates all button).
* Other condition that should be simulate is no apps that needs updates (all apps is up to date).
- Please make sure not missed any elements information from mobile wireframes.
6. Filter Features
Wireframe references page 8.
- User can filter what kind of application they want to see in the application store.
- Please notice there will be multiple options in some category.
- Please make sure not missed any elements information from mobile wireframes.
7. Application Details : Overview
Wireframe references page 9.
- User can see details of one particular application in this screen.
- Please make sure not missed any elements information from mobile wireframes.
8. Application Details : Action Menu
Wireframe references page 10.
- In application details screen, there should be some navigation in this screen for doing some activities (Action Menu).
- For Apps, Action menu that should be available are : Share via email, Copy Link, Post to Connections, Add Tags, Cancel.
- For Websites, Action menu that should be available are : Add to home screen, Add to secure browser, Share via Email, Copy Link, Post to Connections, Add Tags, Cancel.
- Please make sure not missed any elements information from mobile wireframes.
9. Application Details : Comments
Wireframe references page 11 and 12.
- User can see all comments regarding the applications from this screen.
- User can also post a new comment and rate his/her comments regarding the application.
- Please make sure not missed any elements information from mobile wireframes.
10. Application Details : More Info
Wireframe references page 13.
- User can see more information regarding the application from this screen.
- Please make sure not missed any elements information from mobile wireframes.
11. My Rating
Wireframe references page 14.
- User can rates the application from this screen.
- There is a differences between rating here and rating comments in requirements 9.
- Please make sure not missed any elements information from mobile wireframes.
12. Add Tags
Wireframe references page 15.
- User can add tags to the application.
- If tags already exist, it will be shown in auto complete features.
- If tags not exist, user can add new one.
- Please make sure not missed any elements information from mobile wireframes.
13. Menu
Wireframe references page 16.
- Menu should be available accross the application. User should be able easily access menu.
- There are 4 menus needed, Home, About, Help, Settings.
- Please make sure not missed any elements information from mobile wireframes.
14. About
Wireframe references page 17.
- Information regarding stakeholder that own the application.
- Needs 3 sub menu (Contact us, Version, and Terms of Use).
- Touch/Tap any of the sub menu will show details information screen.
- Please make sure not missed any elements information from mobile wireframes.
15. Settings
Wireframe references page 18.
- Standard Application Settings (follow mobile wireframes for any elements).
- Please make sure not missed any elements information from mobile wireframes.
Design Consideration :
- Please use iPad ratio when create the tablet wireframes (3:4)
- Please create it for portrait orientation.
Supporting Documents
- Mobile Wireframes for input
Target Audience
- Application Store Customer
Judging criteria
Your submission will be judge using the following criteria:
- User experience
- Completeness and accuracy of the areas of functionality and content as described in challenge details
- How well your wireframes provide a consistent user flow and clear information architecture for the application
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
Generated HTML files with all the requested contest requirements stated above.
Source Files
Wireframes should be built in Axure. The resulting files should have generated HTML files. Also, all the content must be listed and the pages are linked together to show page flow.
Final Fixes
As part of the Final Fix phase, you may be asked to remove, update, or change some features of the wireframe.
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.