Challenge Summary
Welcome to "Showpa - Digital TV Guide - Mobile App Design Concepts Challenge". In this challenge, we need your creative skills to create a modern and intuitive user interfaces for our new Showpa mobile application that will help our user to find all available methods of watching a particular TV program/movie. This also includes content recommendations / review / etc about new tv programs/movies available to stream.
Read the challenge specification carefully and watch the forums for any questions or feedback concerning this challenge. Let us know if you have any questions in the challenge forum!
01) Login/Start Screen
02) Dashboard Screen
03) Search and Search Result Screens
04) TV Program Details Screen
05) Discovery Details Screen
- As part of your checkpoint submission, you must upload your submission to MarvelApp so we can provide direct feedback on your designs. Please include the MarvelApp URL in your notes.txt.
- Make sure all pages have correct flow. Use the proper file numbers, (1, 2, 3, etc.)
01) Login/Start Screen
02) Dashboard Screen
03) Search and Search Result Screens
04) TV Program Details Screen
05) Discovery Details Screen
06) Recommendation Screen
07) Account Setting Screen
08) Help Screen?
- As part of your Final submission, you must replace your checkpoint submission with the final submission into MarvelApp so we can provide direct feedback on your designs. Please include the MarvelApp URL in your notes.txt.
- Make sure all pages have correct flow. Use the proper file numbers, (1, 2, 3, etc.)
How To Compete In This Challenge
Competing in Topcoder design challenges are easy.
- First, register for the challenge by selecting the "Register" button in the top right.
- Second, review this challenge spec which provides details on what you'll need to design.
- Third, please review this step-by-step guide on competing.
Challenge Objectives
Create User Interface design for our new Showpa Mobile Application
- 8 Mobile Screens
- Hybrid App (Mobile)
Project Background
- Showpa is a mobile application that provides a service which intends to act as a "TV Guide 2.0" for the digital content age (think Netflix/Hulu/HBO/Amazon Video/etc.).
- While content recommendations/reviews/etc will exist to promote stickiness, the primary use is a search function where a user can input any particular show/movie/etc and be taken to that content's page that details all available methods of watching said content (renting/streaming services/linear TV/etc). The home page would thus focus on encouraging users to search for their desired programming with the following page clearly showcasing all available methods for viewing (similar in how IMdB shows all available theater times & locations).
- The purpose of this project is to create the best UI/UX Design that allows us to showcase our POC (proof of concept) for full development
Design Consideration
- New, Professional, and Modern look and feel.
- Simplicity to do the searching for a particular TV Programs
- View any necessary information
- Mobile Hybrid Approach - Targeting Android and iOS Devices (Follow Hybrid Design Best Practice)
- Easy to understand flow from page to page
- Intuitive for the user; should never be left asking "what do I do next?"
- Simple, clean, modern.
- Easy viewing for pages that may be over overcrowded with information (eg. when hovering over an item will enlarge for easy viewing or similar)
- Looking forward to seeing some ideas beyond our concepts (Feel free to add more screen ideas related to our product!)
- Storing personal data would allow users to include their subscribed content services as provided by their optional account (if they choose to have tailored recommendations)
Users/Roles
Please make sure your design supports the following roles:
- Everyday digital content streamers: their need is derived from the growing content marketplace and accompanied growing confusion of where content is hosted. They want to quickly understand how to access their favorite shows and movies
- The high-level target user is anyone who has asked: "How can I watch _____"
- Only accessible in US Market only (for now)
Challenge Forum
If you have any doubts or questions regarding challenge requirements, please ask in our challenge forum:
https://apps.topcoder.com/forums/?module=ThreadList&forumID=629537
Screens/Features
Please make sure your design includes the following screens:
01) Login/Start Screen
- This should be an optional user process and not required to access the dashboard. The user can skip log-in and go straight to dashboard
- Needs to be able to prominently present app brand (logo, look and feel,etc. See specifications for symbol and type face)
- Ordinary login form (username/password login)
- Social Media Login (Facebook, Google, Twitter, LinkedIn, etc)
- Forgot password, Register, Remember me Feature?
- Error login scenario
02) Dashboard Screen
- Allows for access to the below screens:
-- Search area (see screen 3): most important section, leads to tv program detail screen (screen 4)
-- "Discovery" Area - List of TV Programs (see screen 5): Articles/content around new show launches/list this week/month, Popular searches by other users, Etc
-- Recommendation Area: Shows TV programs specific to the user’s subscribed services (see screen 6): This section provides recommended content based on the user’s specific services that they have subscribed to, For example: If the user (in their account settings) list that they only have Netflix and HBO, then this section would only provide recommended shows that are hosted on those platforms
-- Notification/account settings area (see slide 7)
-- User log history (recent open, popular searches, etc)
-- Onboarding Process about the app benefit and surrounding of the app environment
03) Search and Search Result Screens
- The most important/prominent part of the app, the user can access this from the dashboard
- The user can enter any keywords for particular show/movie/tv program title and see automatic search result suggestion that contains the keyword. Use any show as the example
- The automatic search result screen should be fast, while user enter the keywords, it should already show the result
- If user tap/click the search result, it will take the user to that content's page that details all available methods of watching said content (renting/streaming services/linear TV/etc). See screen 04
04) TV Program Details Screen
- The search results will take the user to the individual show’s details page, showing information on how the TV program can be found.
- Show detail information of the TV Program (program description, rating, etc)
- Most important piece (and trickiest) is to clearly & cleanly show all the services that offer the program and where it can be found. These are the primary services we want to include as options. If it’s possible to list their costs (or placeholders) after hovering over one that is a bonus but understood if that may be too cluttered to do:
-- Streaming Services: Netflix, Hulu, Amazon Prime Video, HBO Go, Showtime, Crackle
-- Rental Services: Roku, Amazon Prime, YouTube, Apple TV, Google Play, iTunes, Vudu
-- Live TV and Digital Live TV Replacements: Traditional Cable, Sling TV, YouTube TV, Hulu Live, PlayStation Vue, WatchESPN, fuboTV - What is the easiest way to detail when that show will be played next on regular cable TV without taking up too much space?
- Allow for users to click on services and be taken to the appropriate sites.
05) Discovery Details Screen
- This can be accessed from the homepage and takes users to a section that provides a variety of content opportunities (also see dashboard screen above for reference)
-- New launches/lists this week/month
-- Recommendation based on latest user activity
-- Popular searches by other users
-- Etc
- Showing notification, updates, information about the TV Program and app
06) Recommendation Screen
- This can be accessed from the homepage and takes users to a section that provides specific recommendations based on the services that the user has stated they own in their account settings
-- If the user has confirmed they are a Hulu and Netflix subscriber, the recommendation section would only recommend Hulu and Netflix content
-- This is similar to standard recommendation sections of these services, but just aggregate all services a user owns
07) Account Setting Screen
- Updates profile
- Customize the app, allows the user to list which services they subscribe to/are interested in so recommendations are customized to them
08) Help Screen
- FAQ
- Contact Us
- About
Important:
- Keep things consistent. This means all graphics styles should work together.
- All of the graphics should have a similar feel and general aesthetic appearance
Form Factors
Please make sure your design supports these form factors:
- Mobile portrait
- iPhone: 750px x 1334px
Operating Systems
- Hybrid (both iOS and Android, but focus on iOS only for this challenge)
Design Assets
Make sure to include both in the login screen and try to use the symbol on the home page if possible:
- Showpa Symbol
- Showpa typeface
Branding Guidelines
Branding guidelines can be viewed below:
- Our logo attached for color palette usage
- Color Schemes: #9013fe, #15d6fb, #000000, #ffffff
- Font: Sans Serif family
- Icon style: Flat Color, Playful
Screening Scorecard Review
- This submission will use the new iOS design scorecard.
- Please review the scorecard carefully.
- Your submission will be reviewed on these requirements:
-- Organisation & App Architecture
-- User Interaction
-- Visual Design
Judging Criteria
Your submission will be judged on the following criteria:
- Overall idea and execution of concepts
- How well does your design align with the objectives of the challenge
- Execution and thoughtfulness put into the solving the problem
- The overall design and user experience
- Cleanliness of screen design and user flow
- Ease of use
Final Deliverables
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 image files based on Challenge submission requirements stated above
Source Files
All source files of all graphics created in either Adobe Photoshop, Illustrator (might need to convert it to photoshop later), XD or Sketch and saved as an editable layer
Marvel Prototype
- We need you to upload your screens to Marvel App.
- Please send your marvel app request to fajar.mln@gmail.com (Challenge Copilot)
- You MUST include your Marvel app URL as a text file in your final submission labeled "MarvelApp URL" (in your marvel app prototype, click on share and then copy the link).
Final Fixes
As part of the final fixes phase, you may be asked to modify your graphics (sizes or colors) or modify overall colors.
Read the challenge specification carefully and watch the forums for any questions or feedback concerning this challenge. Let us know if you have any questions in the challenge forum!
Round 1
Submit your initial design for a Checkpoint Feedback01) Login/Start Screen
02) Dashboard Screen
03) Search and Search Result Screens
04) TV Program Details Screen
05) Discovery Details Screen
- As part of your checkpoint submission, you must upload your submission to MarvelApp so we can provide direct feedback on your designs. Please include the MarvelApp URL in your notes.txt.
- Make sure all pages have correct flow. Use the proper file numbers, (1, 2, 3, etc.)
Round 2
Submit your Final Design plus Checkpoint Updates01) Login/Start Screen
02) Dashboard Screen
03) Search and Search Result Screens
04) TV Program Details Screen
05) Discovery Details Screen
06) Recommendation Screen
07) Account Setting Screen
08) Help Screen?
- As part of your Final submission, you must replace your checkpoint submission with the final submission into MarvelApp so we can provide direct feedback on your designs. Please include the MarvelApp URL in your notes.txt.
- Make sure all pages have correct flow. Use the proper file numbers, (1, 2, 3, etc.)
How To Compete In This Challenge
Competing in Topcoder design challenges are easy.
- First, register for the challenge by selecting the "Register" button in the top right.
- Second, review this challenge spec which provides details on what you'll need to design.
- Third, please review this step-by-step guide on competing.
Challenge Objectives
Create User Interface design for our new Showpa Mobile Application
- 8 Mobile Screens
- Hybrid App (Mobile)
Project Background
- Showpa is a mobile application that provides a service which intends to act as a "TV Guide 2.0" for the digital content age (think Netflix/Hulu/HBO/Amazon Video/etc.).
- While content recommendations/reviews/etc will exist to promote stickiness, the primary use is a search function where a user can input any particular show/movie/etc and be taken to that content's page that details all available methods of watching said content (renting/streaming services/linear TV/etc). The home page would thus focus on encouraging users to search for their desired programming with the following page clearly showcasing all available methods for viewing (similar in how IMdB shows all available theater times & locations).
- The purpose of this project is to create the best UI/UX Design that allows us to showcase our POC (proof of concept) for full development
Design Consideration
- New, Professional, and Modern look and feel.
- Simplicity to do the searching for a particular TV Programs
- View any necessary information
- Mobile Hybrid Approach - Targeting Android and iOS Devices (Follow Hybrid Design Best Practice)
- Easy to understand flow from page to page
- Intuitive for the user; should never be left asking "what do I do next?"
- Simple, clean, modern.
- Easy viewing for pages that may be over overcrowded with information (eg. when hovering over an item will enlarge for easy viewing or similar)
- Looking forward to seeing some ideas beyond our concepts (Feel free to add more screen ideas related to our product!)
- Storing personal data would allow users to include their subscribed content services as provided by their optional account (if they choose to have tailored recommendations)
Users/Roles
Please make sure your design supports the following roles:
- Everyday digital content streamers: their need is derived from the growing content marketplace and accompanied growing confusion of where content is hosted. They want to quickly understand how to access their favorite shows and movies
- The high-level target user is anyone who has asked: "How can I watch _____"
- Only accessible in US Market only (for now)
Challenge Forum
If you have any doubts or questions regarding challenge requirements, please ask in our challenge forum:
https://apps.topcoder.com/forums/?module=ThreadList&forumID=629537
Screens/Features
Please make sure your design includes the following screens:
01) Login/Start Screen
- This should be an optional user process and not required to access the dashboard. The user can skip log-in and go straight to dashboard
- Needs to be able to prominently present app brand (logo, look and feel,etc. See specifications for symbol and type face)
- Ordinary login form (username/password login)
- Social Media Login (Facebook, Google, Twitter, LinkedIn, etc)
- Forgot password, Register, Remember me Feature?
- Error login scenario
02) Dashboard Screen
- Allows for access to the below screens:
-- Search area (see screen 3): most important section, leads to tv program detail screen (screen 4)
-- "Discovery" Area - List of TV Programs (see screen 5): Articles/content around new show launches/list this week/month, Popular searches by other users, Etc
-- Recommendation Area: Shows TV programs specific to the user’s subscribed services (see screen 6): This section provides recommended content based on the user’s specific services that they have subscribed to, For example: If the user (in their account settings) list that they only have Netflix and HBO, then this section would only provide recommended shows that are hosted on those platforms
-- Notification/account settings area (see slide 7)
-- User log history (recent open, popular searches, etc)
-- Onboarding Process about the app benefit and surrounding of the app environment
03) Search and Search Result Screens
- The most important/prominent part of the app, the user can access this from the dashboard
- The user can enter any keywords for particular show/movie/tv program title and see automatic search result suggestion that contains the keyword. Use any show as the example
- The automatic search result screen should be fast, while user enter the keywords, it should already show the result
- If user tap/click the search result, it will take the user to that content's page that details all available methods of watching said content (renting/streaming services/linear TV/etc). See screen 04
04) TV Program Details Screen
- The search results will take the user to the individual show’s details page, showing information on how the TV program can be found.
- Show detail information of the TV Program (program description, rating, etc)
- Most important piece (and trickiest) is to clearly & cleanly show all the services that offer the program and where it can be found. These are the primary services we want to include as options. If it’s possible to list their costs (or placeholders) after hovering over one that is a bonus but understood if that may be too cluttered to do:
-- Streaming Services: Netflix, Hulu, Amazon Prime Video, HBO Go, Showtime, Crackle
-- Rental Services: Roku, Amazon Prime, YouTube, Apple TV, Google Play, iTunes, Vudu
-- Live TV and Digital Live TV Replacements: Traditional Cable, Sling TV, YouTube TV, Hulu Live, PlayStation Vue, WatchESPN, fuboTV - What is the easiest way to detail when that show will be played next on regular cable TV without taking up too much space?
- Allow for users to click on services and be taken to the appropriate sites.
05) Discovery Details Screen
- This can be accessed from the homepage and takes users to a section that provides a variety of content opportunities (also see dashboard screen above for reference)
-- New launches/lists this week/month
-- Recommendation based on latest user activity
-- Popular searches by other users
-- Etc
- Showing notification, updates, information about the TV Program and app
06) Recommendation Screen
- This can be accessed from the homepage and takes users to a section that provides specific recommendations based on the services that the user has stated they own in their account settings
-- If the user has confirmed they are a Hulu and Netflix subscriber, the recommendation section would only recommend Hulu and Netflix content
-- This is similar to standard recommendation sections of these services, but just aggregate all services a user owns
07) Account Setting Screen
- Updates profile
- Customize the app, allows the user to list which services they subscribe to/are interested in so recommendations are customized to them
08) Help Screen
- FAQ
- Contact Us
- About
Important:
- Keep things consistent. This means all graphics styles should work together.
- All of the graphics should have a similar feel and general aesthetic appearance
Form Factors
Please make sure your design supports these form factors:
- Mobile portrait
- iPhone: 750px x 1334px
Operating Systems
- Hybrid (both iOS and Android, but focus on iOS only for this challenge)
Design Assets
Make sure to include both in the login screen and try to use the symbol on the home page if possible:
- Showpa Symbol
- Showpa typeface
Branding Guidelines
Branding guidelines can be viewed below:
- Our logo attached for color palette usage
- Color Schemes: #9013fe, #15d6fb, #000000, #ffffff
- Font: Sans Serif family
- Icon style: Flat Color, Playful
Screening Scorecard Review
- This submission will use the new iOS design scorecard.
- Please review the scorecard carefully.
- Your submission will be reviewed on these requirements:
-- Organisation & App Architecture
-- User Interaction
-- Visual Design
Judging Criteria
Your submission will be judged on the following criteria:
- Overall idea and execution of concepts
- How well does your design align with the objectives of the challenge
- Execution and thoughtfulness put into the solving the problem
- The overall design and user experience
- Cleanliness of screen design and user flow
- Ease of use
Final Deliverables
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 image files based on Challenge submission requirements stated above
Source Files
All source files of all graphics created in either Adobe Photoshop, Illustrator (might need to convert it to photoshop later), XD or Sketch and saved as an editable layer
Marvel Prototype
- We need you to upload your screens to Marvel App.
- Please send your marvel app request to fajar.mln@gmail.com (Challenge Copilot)
- You MUST include your Marvel app URL as a text file in your final submission labeled "MarvelApp URL" (in your marvel app prototype, click on share and then copy the link).
Final Fixes
As part of the final fixes phase, you may be asked to modify your graphics (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.