Challenge Summary
Welcome to Hercules – Gofoto iOS 7 Application Design Concepts Challenge. In this challenge, we are looking for your creative help in coming up with iOS 7 designs for an interesting Application which allows the user to instantly send web content, pictures, and video content to their TV for a second screen experience.
Please reference the design direction document and basic application flow to help you get started with your designs. Please DO NOT copy exactly what we have provided. We are looking for you to expand on this and think of ways to make the UX/UI better.
Round 1
Your initial designs for the required screens in 320 X 480 px (Standard iPhone Portrait)
1) Splash Screen
2) Login Screen
4) My Devices (Default)
5) Choose Media
8) Media Details (Video/Photo) Details
9) Controller Screen
Feel free to add any other additional screens which are necessary to explain the flow of Application
Notes.jpg: Any comments about your design for the Client
We also encourage any video demo's of transitions or other interactions that help demonstrate your concept.
NUMBER YOUR SCREENS (01, 02, 03 etc.) - it’s easier to review with the client.
Round 2
Your Final designs for all the required screens with all checkpoint feedback implemented.
- - 320 X 480 px (Standard iPhone Portrait)
- - 640 X 960 px (Retina iPhone Portrait)
Feel free to add any other additional screens which are necessary to explain the flow of Application
Notes.jpg: Any comments about your design for the Client
We also encourage any video demo's of transitions or other interactions that help demonstrate your concept.
NUMBER YOUR SCREENS (01, 02, 03 etc.) - it’s easier to review with the client.
Client of this project is working on an interesting Application that is currently in beta stage. This Application allows a user to instantly send content you're watching on your smartphone, tablet or PC right to your TV with a click of a button like “Send to TV”.
Challenge Downloads:
- Please note, other files for this challenge are available in Google Drive. Once you register - please request access to the Google Drive Folder by sending a request mail to csystic"at"gmail.com and bwalles"at"appirio.com.
IMPORTANT!!
- We are looking for you follow the iOS 7 design standards.
- Please go through the references links below which could give you inspiration for your designs but please do not copy from them.
- This Application will be built using HTML 5 and then converted to a native app using the frameworks like Phonegap etc…
- We are looking forward to create this application in the below mentioned iOS device sizes:
- - 320 X 480 px (Standard iPhone Portrait)
- - 640 X 960 px (Retina iPhone Portrait)
- Please make sure to create all the UI elements as scalable vectors.
- Use image placeholder for any Logo and Video/Photo thumbnails of this challenge submission
Application Flow:
Below is the overall flow of the application, we have also attached the design-direction.pdf to help you get started…
- A user opens the Application and sees a Splash Screen. User will then see a login screen if they are not already logged in.
- Login Screen will be displayed to allow a user to enter their credentials and login.
- If the entered credentials were wrong then a user will be presented with the error screen.
- If the login is successful, then we show a pre-loader and then show a list of devices.
- If there are devices to be shown then we show “No Devices found in the Account”
- From the list of devices, a user selects a device to which the media need to be shared.
- User will then be provided options to select a media type “Video/Photo/URL (type an URL)” to choose from.
- Users will also have the options to upload media (videos/photos) and be able to view them.
- After the user chooses a media (Video/Photo/URL) and clicks “Send to TV”
- User will have basic controls to mange the media, which was shared to the device.
- When a user selects “Cancel”, then the device stops displaying the media and takes the user back to type of media screen to choose from.
Required Screens:
Below are the required screens in this application…
1) Splash Screen:
- This is the initial screen of the application, a user will see a splash screen..
- Please use a placeholder for the logo and icon. (Feel free to develop an icon that can represent the basic concept of this share to TV APP)
2) Login Screen:
- Enter in account information to gain access to user account
- Successful log in will show account details and list of available devices with that account
- User will have the ability to add or edit devices associated with their account
3) Login Error:
- We also need to show an error screen if the login credentails are wrong.
- we need to show a message like "Your Login Failed, Try Again"
4) My Devices (Default):
- Once the user logs in, we show this main screen with list of all devices registered with this account.
- If there are no devices then we show a message “No Devices found in the Account”
- The devices here refers to the TV to which the Photo, Video or a URL to be shared.
- Think on how to display the list of devices, should we display any icons for that purpose?
- What are the other options that can be given here?
- Should a user be allowed to delete a device from this list?
- We also need a button for the user to add a new device
- From the main screen, user selects a device from the list of devices.
- Note that at the bottom, we need to have a navigation as shown in the wireframe, these are "Upload Media, My Devices, My Account, About the Application, Settings", how should the navigation be planned, we are looking for your ideas here.
5) Choose Media:
- In this screen, user will have the ability to select a Video, Photo or a URL
- How do you think a user should be presented with this screen?
- What icons do we need use that will help enhance the UI and make it clear to a user what they can do on this screen?
- Can we show a textbox to enter URL directly? Or show them as a pop-up?
- User will also have options to upload the media by clicking a button like "Upload Media"
6) Upload Media:
- When a user selects either “Upload Video or Upload Photos”, they will have options to select the file (Video or Photo) - see next screen..
- After selecting a video or image, a user can then click on “Send to TV” button to view this selected Video/Photo/URL in TV.
7) My Videos/Photos:
- Once the user selects Upload Video/Photos, then we will show this screen.
- In this screen, we show the list of videos or photos a user has in their phone.
- User can click on video or photo to view their details.
8) Media (Video/Photo) Details:
- When a user selects to view more details of the Video or Photo, then we show this screen.
- In this screen, user will options to select a button like "Send to TV" to send the Video/Photo being viewed to the selected connected device (TV)..
9) Controller Screen:
- Once the user clicks on a button like “Send to TV”, then we need to show a basic control screen that allows the user to “Cancel” the currently shown Photo/Video/URL in TV.
- Imagine this to be kind of remote control for the corresponding media shown on TV.
- If the selected media is video, what are the controls that need to be shown?
- If the selected media is Image, what controls can we show here?
- If the URL is being viewed, what controls can be shown?
- When the user selects the “Cancel” button, then the corresponding device (TV etc…) stops playing the media and takes the user back to “Choose Media”
References:
- Reference 1
- Reference 2
Target Audience:
- Anyone with a smartphone or tablet who wants to have a second screen experience and show content from their smart device on their TV
Judging Criteria:
- How well you capture all the above requirements
- Have your followed iOS 7 Design Schemes for your designs
- Overall User Experience of the Application
- How well you have designed the Elemenets
- Cleanliness of your graphics and design.
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.
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.