Challenge Summary
Welcome to “Secure Home Mobile App UI Design Challenge”. In this challenge, we are looking to conceptualize the UI for a native mobile application that allows end-users to: Register for access, Onboard through setup tasks, Connect home devices and assign users, Receive assistance with features and product benefits, and Explore in-app guidances on discovering new features and benefits.
Let us know in forum if you have questions
5. Onboard* user through Feature Setup
- Engage user and provide more easily discoverable feature setup
- *Onboarding was previously accomplished through setup cards, but can be updated to best onboarding method for new design model.
6. Home page
- Update home screen to better engage user and more easily discover and manage devices, kids/parental controls.
- Determine how to show household/family protection status, summary of activity, or actions needed
- Remove security level feature
7. View Device List/Map
- Identify and edit a device
- View device details
- Initiate a device scan on the network
8. Parental Controls
- Add a child profile
- Assign a device to a child
- Set screen time control
- Set web content restrictions
- Important: As part of your checkpoint submission, you must upload your submission to MarvelApp so we can provide direct feedback on your designs.
- Please ask in the Forum for a MarvelApp prototype link. You will receive 1 MarvelApp prototype for Mobile.
- Make sure to include a URL/Link to your design within your "notes.txt", Important!
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03).
1. Understand the product benefits through a Quick Tour
2. Login or Sign Up
3. Associate the Router to the App
4. Get acquainted with app navigation using Coach Marks
5. Onboard* user through Feature Setup
- Engage user and provide more easily discoverable feature setup
- *Onboarding was previously accomplished through setup cards, but can be updated to best onboarding method for new design model.
6. Home page
- Update home screen to better engage user and more easily discover and manage devices, kids/parental controls.
- Determine how to show household/family protection status, summary of activity, or actions needed
- Remove security level feature
7. View Device List/Map
- Identify and edit a device
- View device details
- Initiate a device scan on the network
8. Parental Controls
- Add a child profile
- Assign a device to a child
- Set screen time control
- Set web content restrictions
9. In-app Notifications
10. Block Pages
- Welcome Page/EULA
- Malicious Sites
- Parental Controls
- Important: As part of your final submission, you must upload your submission to MarvelApp so we can provide direct feedback on your designs.
- Please ask in the Forum for an MarvelApp prototype link. You will receive 1 MarvelApp prototype for Mobile.
- Make sure to include a URL/Link to your design within your "notes.txt", Important!
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)
Background Information
We are looking to conceptualize the UI for a native mobile application that allows users to interact with and manage their Secure Home wireless router. All Secure Home features are managed through a mobile app that is available for Android and iOS.
Overview of the Secure Home product
Secure Home is a secure WiFi router that protects all devices connected to your home network, including personal devices (mobile phones, tablets, laptops) and smart home devices (thermostats, refrigerators). Secure Home automatically prevents the devices in your home from visiting risky websites that are known to contain viruses, malware, and other malicious content. By blocking these sites, it reduces the risk of you or your family members' computers accidentally becoming infected.
Secure Home also provides users with additional convenience features that allow them to manage and protect their family members and associated devices. These features include Device Identification, Internet Pause, and Real-time Alerts.
Parental controls
Parental controls allow you to set restrictions by kid, time of day, and website categories. For example, you can restrict your child from accessing the Internet after 9.00pm, or you can block all kids in your household from accessing certain types of website.
Device identification
Secure Home automatically identifies all connected devices on your home network (including smart devices) and gives users a simple way to know what devices are able to access the WiFi. This allows users to always know who is on their home network, and identify unknown devices that might be potential threats.
Internet pausing
Want your family to put down the devices for a while? With the mobile app, you can simply stop all the devices or individual devices on your home network from connecting to the internet. Your family's devices will receive a blocked page notification informing them of the internet time-out. At the end of time-out, you can simply reactivate internet access.
Real-time alerts
Secure Home provides you with real-time alerts through the app about things like potential vulnerabilities, newly connected devices, and parental control violations. This enables you to keep control of your network and quickly react to potentially dangerous activities or situations.
Challenge Description
For this challenge you will be working using the content provided on wireframes as your main reference for how the tasks are accomplished in the app today. Treat these screens as wireframes, as they are meant to guide you and to give you a better understanding of the interactions of the features. So please, do not copy these screens on any way. Your artwork won’t be presented to the client if the designs are too similar to wireframes.
We are not looking for just an updated visual design for the exact feature and page layout in the wireframes. We are looking for new ways to organize the features and allow users to more easily access information and complete tasks. Please explore new concepts and ways to more innovatively organize the features, page layout, and information hierarchy across the app. Don’t let the wireframes stop you from thinking out of the box. Think futurist and simple to use.
Things to think about
- We are looking for a nice clean, modern and easy experience. A user needs to be able to easily understand how to use this app.
- This will be an iOS and Android native application. For this challenge you will focus on creating the experiences just for iphone 6/7/8.
- You can propose native interactions and functionalities.
- Your design must work and feel on brand. So work and use the color palette only. Do not reinvent colors. (See branding section on this requirements page for reference)
- Use a placeholder brand logo/name as appropriate for branded screens (login, signup, block screens).
- Use the wireframes as your main reference, but if you have better solutions and concepts, use them.
- Keep things consistent. This means all graphic styles should work together.
Required Screens/Functionalities
1. Understand the product benefits through a Quick Tour
- See images inside “1 Quick Tour” folder, for content reference.
2. Login or Sign Up
- See images inside “2 Login-Signup” folder, for content reference.
3. Associate the Router to the App
- See images inside “3 Router Association”, for content reference.
4. Get acquainted with app navigation using Coach Marks
- Coach marks (a transparent overlay of UI hints) will help educate the user on the UI on the first launch. It is helpful to the user to proceed in the right direction while using the UI. User can tap anywhere on the screen to do away with the coach marks (overlay).
- See images inside “4 Coachmarks” folder, for content reference.
5. Onboard user through Feature Setup
- Engage user and provide more easily discoverable feature setup
- *Onboarding was previously accomplished through setup cards, but can be updated to best onboarding method for new design model.
- See images inside “5 Onboarding-Feature” folder, for content reference.
6. Home page
- Discover devices, kids/parental controls, pause
- Determine how to show protection status, summary of activity, or actions needed
- See images inside “6 Home Page” folder, for content reference.
7. View Device List/Map
- Identify and edit a device
- View device details
- Initiate a device scan on the network
- See images inside “7 Device List-Device Details” folder, for content reference.
8. Parental Controls
- Add a child profile
- Assign a device to a child
- Set screen time control
- Set web content restrictions
- See images inside “8 Parental Controls” folder, for content reference.
9. Notifications
- See images inside “9 Notifications” folder, for content reference.
10. Block Pages
This are the screens that appear on web browser when a site is blocked for these reasons:
- Malicious Sites
- Parental Controls
- Need to provide samples for both.
- See images inside “10 Block Pages” folder, for content reference.
Branding
- You must design using the provided color palette. Refer to download section in forum.
- You can use Open Sans as your main font. We might require to replace this on final fixes.
Softwares and Stocks Icons
- For UI design, Sketch and Adobe Illustrator are preferred. Adobe Photoshop is also accepted.
- You can use stocks icons from icon8 and flaticon. Remember to declare them.
Screen Sizes:
- This will be an native iOS and Android application. For this challenge you will be focused on working for latest iphones devices:
- Design for iPhone 6/7/8: 750px by 1334px width.
- Height can be increased if needed.
App Logo
- Suggest a simple logo that you think represents the product well. This must not distract you from designing the screens.
Downloads
- AS this challenge has NDA enable, you must be registered to download all necessary documentation from forum.
Target Audience:
- Final application users. Available on stores.
Judging Criteria:
- How well you plan the interactive experience and capture your ideas and experience visually.
- Overall design, UI and user experience.
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 Desktop PNG/JPG Screens.
Source Files
All original source files of the submitted design. Files should be created in Adobe Photoshop and saved as a layered PSD file, Adobe Illustrator as a layered AI file or Sketch
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.
Let us know in forum if you have questions
Round 1
Submit your initial designs for checkpoint feedback:5. Onboard* user through Feature Setup
- Engage user and provide more easily discoverable feature setup
- *Onboarding was previously accomplished through setup cards, but can be updated to best onboarding method for new design model.
6. Home page
- Update home screen to better engage user and more easily discover and manage devices, kids/parental controls.
- Determine how to show household/family protection status, summary of activity, or actions needed
- Remove security level feature
7. View Device List/Map
- Identify and edit a device
- View device details
- Initiate a device scan on the network
8. Parental Controls
- Add a child profile
- Assign a device to a child
- Set screen time control
- Set web content restrictions
- Important: As part of your checkpoint submission, you must upload your submission to MarvelApp so we can provide direct feedback on your designs.
- Please ask in the Forum for a MarvelApp prototype link. You will receive 1 MarvelApp prototype for Mobile.
- Make sure to include a URL/Link to your design within your "notes.txt", Important!
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03).
Round 2
Submit your Final designs:1. Understand the product benefits through a Quick Tour
2. Login or Sign Up
3. Associate the Router to the App
4. Get acquainted with app navigation using Coach Marks
5. Onboard* user through Feature Setup
- Engage user and provide more easily discoverable feature setup
- *Onboarding was previously accomplished through setup cards, but can be updated to best onboarding method for new design model.
6. Home page
- Update home screen to better engage user and more easily discover and manage devices, kids/parental controls.
- Determine how to show household/family protection status, summary of activity, or actions needed
- Remove security level feature
7. View Device List/Map
- Identify and edit a device
- View device details
- Initiate a device scan on the network
8. Parental Controls
- Add a child profile
- Assign a device to a child
- Set screen time control
- Set web content restrictions
9. In-app Notifications
10. Block Pages
- Welcome Page/EULA
- Malicious Sites
- Parental Controls
- Important: As part of your final submission, you must upload your submission to MarvelApp so we can provide direct feedback on your designs.
- Please ask in the Forum for an MarvelApp prototype link. You will receive 1 MarvelApp prototype for Mobile.
- Make sure to include a URL/Link to your design within your "notes.txt", Important!
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)
Background Information
We are looking to conceptualize the UI for a native mobile application that allows users to interact with and manage their Secure Home wireless router. All Secure Home features are managed through a mobile app that is available for Android and iOS.
Overview of the Secure Home product
Secure Home is a secure WiFi router that protects all devices connected to your home network, including personal devices (mobile phones, tablets, laptops) and smart home devices (thermostats, refrigerators). Secure Home automatically prevents the devices in your home from visiting risky websites that are known to contain viruses, malware, and other malicious content. By blocking these sites, it reduces the risk of you or your family members' computers accidentally becoming infected.
Secure Home also provides users with additional convenience features that allow them to manage and protect their family members and associated devices. These features include Device Identification, Internet Pause, and Real-time Alerts.
Parental controls
Parental controls allow you to set restrictions by kid, time of day, and website categories. For example, you can restrict your child from accessing the Internet after 9.00pm, or you can block all kids in your household from accessing certain types of website.
Device identification
Secure Home automatically identifies all connected devices on your home network (including smart devices) and gives users a simple way to know what devices are able to access the WiFi. This allows users to always know who is on their home network, and identify unknown devices that might be potential threats.
Internet pausing
Want your family to put down the devices for a while? With the mobile app, you can simply stop all the devices or individual devices on your home network from connecting to the internet. Your family's devices will receive a blocked page notification informing them of the internet time-out. At the end of time-out, you can simply reactivate internet access.
Real-time alerts
Secure Home provides you with real-time alerts through the app about things like potential vulnerabilities, newly connected devices, and parental control violations. This enables you to keep control of your network and quickly react to potentially dangerous activities or situations.
Challenge Description
For this challenge you will be working using the content provided on wireframes as your main reference for how the tasks are accomplished in the app today. Treat these screens as wireframes, as they are meant to guide you and to give you a better understanding of the interactions of the features. So please, do not copy these screens on any way. Your artwork won’t be presented to the client if the designs are too similar to wireframes.
We are not looking for just an updated visual design for the exact feature and page layout in the wireframes. We are looking for new ways to organize the features and allow users to more easily access information and complete tasks. Please explore new concepts and ways to more innovatively organize the features, page layout, and information hierarchy across the app. Don’t let the wireframes stop you from thinking out of the box. Think futurist and simple to use.
Things to think about
- We are looking for a nice clean, modern and easy experience. A user needs to be able to easily understand how to use this app.
- This will be an iOS and Android native application. For this challenge you will focus on creating the experiences just for iphone 6/7/8.
- You can propose native interactions and functionalities.
- Your design must work and feel on brand. So work and use the color palette only. Do not reinvent colors. (See branding section on this requirements page for reference)
- Use a placeholder brand logo/name as appropriate for branded screens (login, signup, block screens).
- Use the wireframes as your main reference, but if you have better solutions and concepts, use them.
- Keep things consistent. This means all graphic styles should work together.
Required Screens/Functionalities
1. Understand the product benefits through a Quick Tour
- See images inside “1 Quick Tour” folder, for content reference.
2. Login or Sign Up
- See images inside “2 Login-Signup” folder, for content reference.
3. Associate the Router to the App
- See images inside “3 Router Association”, for content reference.
4. Get acquainted with app navigation using Coach Marks
- Coach marks (a transparent overlay of UI hints) will help educate the user on the UI on the first launch. It is helpful to the user to proceed in the right direction while using the UI. User can tap anywhere on the screen to do away with the coach marks (overlay).
- See images inside “4 Coachmarks” folder, for content reference.
5. Onboard user through Feature Setup
- Engage user and provide more easily discoverable feature setup
- *Onboarding was previously accomplished through setup cards, but can be updated to best onboarding method for new design model.
- See images inside “5 Onboarding-Feature” folder, for content reference.
6. Home page
- Discover devices, kids/parental controls, pause
- Determine how to show protection status, summary of activity, or actions needed
- See images inside “6 Home Page” folder, for content reference.
7. View Device List/Map
- Identify and edit a device
- View device details
- Initiate a device scan on the network
- See images inside “7 Device List-Device Details” folder, for content reference.
8. Parental Controls
- Add a child profile
- Assign a device to a child
- Set screen time control
- Set web content restrictions
- See images inside “8 Parental Controls” folder, for content reference.
9. Notifications
- See images inside “9 Notifications” folder, for content reference.
10. Block Pages
This are the screens that appear on web browser when a site is blocked for these reasons:
- Malicious Sites
- Parental Controls
- Need to provide samples for both.
- See images inside “10 Block Pages” folder, for content reference.
Branding
- You must design using the provided color palette. Refer to download section in forum.
- You can use Open Sans as your main font. We might require to replace this on final fixes.
Softwares and Stocks Icons
- For UI design, Sketch and Adobe Illustrator are preferred. Adobe Photoshop is also accepted.
- You can use stocks icons from icon8 and flaticon. Remember to declare them.
Screen Sizes:
- This will be an native iOS and Android application. For this challenge you will be focused on working for latest iphones devices:
- Design for iPhone 6/7/8: 750px by 1334px width.
- Height can be increased if needed.
App Logo
- Suggest a simple logo that you think represents the product well. This must not distract you from designing the screens.
Downloads
- AS this challenge has NDA enable, you must be registered to download all necessary documentation from forum.
Target Audience:
- Final application users. Available on stores.
Judging Criteria:
- How well you plan the interactive experience and capture your ideas and experience visually.
- Overall design, UI and user experience.
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 Desktop PNG/JPG Screens.
Source Files
All original source files of the submitted design. Files should be created in Adobe Photoshop and saved as a layered PSD file, Adobe Illustrator as a layered AI file or Sketch
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.