Challenge Summary
Welcome to the Hercules NEW MyMedia Application Wireframe Challenge.
The objective of this Challenge is to create the HTML wireframes for Hercules NEW MyMedia Application based on guidelines stated on challenge details.
MyMedia is an app that enables customers to access cloud-based storage system that will let them upload personal videos and photos from their mobile devices and play them back across a variety of platforms.
MyMedia Application will be developed under desktop/tablet and mobile platform.
You need focus on delivering top notch features, Ease to Use application also present best practice File Management application.
Checkpoint Deadline is FAST!! on Tuesday Morning, submit your initial wireframe for our review
Round 1
Initial MyMedia Application Wireframe
Note: Submit as much Application Features as you can for our review.
Round 2
Final MyMedia Application Wireframe with updated Checkpoint Submission Feedback.
MyMedia application will provide graphical representation of cloud-based storage system that will let them upload personal videos and photos from their mobile devices and play them back across a variety of platforms.
I. MyMedia Application Submission Requirements:
IMPORTANT!
- Your solution need easy to convert into mobile version using Responsive Design Solution
- New MyMedia Application should represent existing pages but follow best practice functionality of Google Drive application. Make sure the features possible and fits to use for New MyMedia application.
- Refer attached current-MyMedia-App.zip to get familiar how current MyMedia application look, think and research how to improve the User Experience. DO NOT just copy paste existing application look.
- Your wireframe need able to drill down all pages flow.
- For your submission you need merge required features for New MyMedia application
1. Navigation
- Think about how navigation should works for New MyMedia application
- Required navigations for MyMedia application are:
-- For You
-- Albums
-- Library
-- Favorites
-- Trash
-- Upload
- Is navigation possible and look consistent to convert for mobile version?
2. For You
- This Landing Page of MyMedia app, this page contains should lists of all albums and recent uploads.
- We need this page to look more personal
3. Albums
- This page contains all albums
- Need ability to create/add new album
- How details album look?
- What option when user see the image or video details?
- Ability to edit a file - both renaming, and editing it in an editor with filter.
- Need ability to move a file from one album to another
3. Library
- Library will allow app to access your devices photo/videos gallery
- How to select images/videos?
- How to start upload?
- Think about Create New Album flow
- Ability to edit a file - both renaming, and editing it in an editor with filter.
4. Favorites
- This page will gather all favorite image or video
- How the favorites selection works in another pages?
5. Trash
- We need to be able view the "Deleted Items"
- Tags the asset as “Deleted” and removes all other tags.
- Hides the asset from search results and displays not related to the Delete tag.
- After X days, the asset is automatically removed from the server.
- We need restore features added. Removes the “Deleted” tag and restores the last known tags to an asset.
- Restore an album that has been deleted
- Restore a file that has been deleted to a specific album
6. Upload
- Upload via BROWSE allows the user to browse their computer for a file or files to be uploaded.
- Upload via DRAG & DROP allows the user to drag a file, files, or a folder onto a specific area of the UI which will allow them to upload their file(s). Folder names will be turned into tags (see below).
- If the file type is not on the approved file type list, alert the user before the asset begins uploading.
- View uploading progress and queued uploads
II. Features Requirements:
These features are High Priority and Required for the your Wireframe Demo.
Login & Logout
Sorting and collecting assets based on tags
- All assets will automatically have a “date” tag of the day the file was created.
- All assets will automatically have a “filetype” tag so we can sort the photos (JPG, GIF, PNG, etc.) from the videos (MP4, WEBM, OGG, M4V, etc.)
- Tags can be stacked, meaning a single asset can appear in multiple “collections.” A collection is a search function defined by a specific tag (e.g. “photos” or “summertime 2014”).
-- Tags can be used to create nested collections by separating the tag name with a delimiter such as a pipe or a slash (e.g. “Silly|Cat photos” would create a collection named “Silly” with a sub-collection of “Cat photos” inside of it.)
- “Favorite” is a generic tag and functions the same as other tags.
Play/Pause/Stop
- For video assets, allow the user the ability to scrub through the video.
Playlist
- The ability to automatically play all assets in a collection one after another.
Share
- Opens the permissions for the asset so it can be viewed on the public internet outside of MyMedia.
- Generates a unique URL for the asset that the user can copy and paste into an email or onto their social networks.
Download
- Opens the default browser dialog for downloading the file to the user’s computer.
Display photos as thumbnails in the asset view UI
Display videos as animated “live tiles” in the asset view UI
Keyboard navigation for accessibility
Terms of service
Privacy policy
Help
- FAQ
- Contact information for support
III. Best Practice Functionality And User Experience Google Drive Application
1. First time user tutorial
2. Multiple file/folder selection with standard mouse gestures (e.g. Dragging a box around the files the user wants to select) and keyboard commands (e.g. CTRL+A selects all files and folders currently on screen)
3. Drag and Drop upload
4. Keyboard navigation
5. Fully accessible via keyboard
6. Fully compatible with ARIA for people who are browser via screen readers
7. Download button
8. UI features
List view
- Filetype Icon | File name | Owner | Last modified
Grid view
- Thumbnail | File type Icon | File name
Sorting
- Last modified
- Last edited by me
- Last opened by me
- Name
c. Main Sorting Categories
- My Drive
-- Folder 1
-- Folder 2
-- Folder 3
-- etc.
Incoming
- Assets that have been shared to the user
Recent
- A list of assets that have been uploaded or altered in the past 30 days
Starred
- Assets marked as “starred”
Trash
- Items that have been deleted, but not “permanently deleted” yet.
Disk space usage
- "xGB (x%) of yGB used"
- Manage disk space (takes the user to a new page with the following information)
-- A pie chart of usage (Used/Unused)
-- Details of current storage plan
- Size
- Cost
- Next billing date
- Payment settings
- Cancel plan
- Up Sell to larger storage plans
- Verbiage
- "Store files up to 1TB each. Anything you create with Docs, Sheets, or Slides won't use up any of your storage."
- "Attachments sent and received in Gmail as well as your email messages use your storage."
- "Photos bigger than 2048x2048 pixels use your storage. Everything smaller than that is free."
9. Usability features
a. Right click on "desktop" (any space on the UI in the assets area that isn’t a thumbnail)
- Create a new folder
- Upload files
- Upload folder
b. Right click on a JPG, PNG, or GIF
- Preview
- Open With
- Share
- Show link
- Move to
- Add Star
- Rename
- Make a copy
- Download
- Remove
c. Right click on a FOLDER
- New Folder
- Share
- Show link
- Move to
- Add Star
- Change Color
- Rename
- Download
- Remove
- Right click on item in the TRASH
- Restore
- Delete Forever
Preview image
- Displays the asset in a full screen overlay (right click disabled)
- On hover, the user is presented with these UI options
a. File Name
b. Open with Pixlr (Google’s online image editing software)
c. Open With... (allows the user to open the image in apps that are connected to Google Drive)
d. More Actions
i. Print
ii. Rename
iii. Report Abuse
iv. Download
v. Share
vi. List of users with access to this asset
vii. Invite people to share this with
e. Zoom In
- Triggers a new UI overlay where the user can zoom in/out via a slider and scroll around the image via a thumbnail
f. Details Information
i. General Info
ii. Description (plain text)
iii. Sharing
iv. Download Permission
v. Pop-out
vi. Close
vii. Previous image
viii. Next Image
ix. Display: X of X in the gallery
Target Audience
Hercules Customers
Judging Criteria
- User Experience of Hercules NEW MyMedia application
- Completeness and accuracy of the wireframe as defined in the spec requirements.
- How well your wireframes provide a consistent user flow.
- Effortless build mobile version based on your Tablet version wireframe?
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
Wireframes should be built in HTML or Axure. The resulting files are not critical in this Challenge. The most important point is that all the content is listed and the pages are linked together to show page flow.
Keep your source files out from this submission folder.
Source Files
All original source files of the submitted ideas. If you would like to submit notes please include notes.txt file.
Final Fixes
As part of the final fixes phase you may be asked to modify content or user click paths.
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.