Challenge Summary
Welcome to the “Secure Home Mobile App UI Design Challenge 2”. In this challenge, we are looking to conceptualize the UI visual design for a native mobile application that allows end-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.
Let us know in forum if you have any questions
1) Onboarding/Setup
2) Home Page
3) Devices
Asset Requirements:
1) Onboard user through Feature Setup
2) Home page
2.1) Discover key features, threats protected against, family profiles
3) View Devices
3.1) Identify devices
3.2) View device details
3.3) Edit a device
- Important: As part of your checkpoint submission, you must upload your submission to MarvelApp so we can provide direct feedback on your designs.
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03).
- Please ask in the Forum for an MarvelApp prototype link. You will receive 1 MarvelApp prototype for Mobile.
1) Onboarding/Setup
2) Home Page
3) Devices
4) Parental Controls
5) Notifications
Asset Requirements:
1) Onboard user through Feature Setup
2) Home page
2.1) Discover key features, threats protected against, family profiles
3) View Devices
3.1) Identify devices
3.2) View device details
3.3) Edit a device
4) Parental Controls
4.1) Add a child profile
4.2) Assign a device to a child
4.3) Set screen time control
4.4) Set web content restrictions
5) Notifications
- Important: As part of your final submission, you must update your submission in MarvelApp.
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03).
- 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!
Challenge Description
For this challenge you will be working using the content provided on medium-fidelity wireframes as your main reference - in order for you to provide a polished and innovative visual design for the wires. Treat these screens as concept wireframes, guiding you on the functionality of each screen and not the final screen elements. We are looking for you to provide your best visual design for these screens, which result in a clean and lightweight consumer app experience. Your artwork won’t be presented to the client if the designs is too similar to wireframes.
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.
Things to think about
- We are looking for an innovative visual design approach to the wireframes. While keeping the flow and functionality the same for all screens, look for opportunities to improve visual elements or controls on the page, and the overall aesthetic. Don’t think just about reskinning the page with color - think about the entire visual representation of the information on the page.
- We are looking for a nice clean, modern and easy experience. A lightweight and airy visual design is the goal.
- 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.
- Your design must work and feel on brand, so use the color palette only. But we are looking for a balanced approach to color. Don’t go fully monochrome, or use all colors in the palette. Use background, primary, and secondary colors strategically. (See branding section on this requirements page for reference)
- Keep things consistent. This means all graphic styles should work together.
Required Screens/Functionalities
1) Onboarding/Setup
- See wireframes in Onboarding folder.
2) Home Page
- See wireframes in Home folder.
3) Devices
- See wireframes in Devices folder.
4) Parental Controls
- See wireframes in Parental Controls folder.
5) Notifications
- See wireframes in Notifications folder.
Branding
- You must design using the following color palette:
https://projects.invisionapp.com/boards/R93OFP6K42Z/
- You can use Open Sans as your main font. We might require to replace this on final fixes.
- Your design must work and feel on brand, so use the color palette only. But we are looking for a balanced approach to color. Don’t go fully monochrome, or use all colors in the palette. Use background, primary, and secondary colors strategically.
Softwares and Stocks Icons
- You can design your artwork using Adobe Photoshop, Illustrator, or Sketch.
- 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
- Use a simple placeholder for now
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 capture your ideas and experience visually.
- That the wireframes are not simply “reskinned” with color.
- 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. PSD source files
Source Files
All original source files of the submitted design. Files can be created in all three formats: Sketch, Illustrator, and Photoshop. If you create the file in Photoshop it should be in layers
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 any questions
Round 1
Submit your initial designs for feedback:1) Onboarding/Setup
2) Home Page
3) Devices
Asset Requirements:
1) Onboard user through Feature Setup
2) Home page
2.1) Discover key features, threats protected against, family profiles
3) View Devices
3.1) Identify devices
3.2) View device details
3.3) Edit a device
- Important: As part of your checkpoint submission, you must upload your submission to MarvelApp so we can provide direct feedback on your designs.
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03).
- Please ask in the Forum for an MarvelApp prototype link. You will receive 1 MarvelApp prototype for Mobile.
Round 2
Submit your final designs plus checkpoint feedback implemented:1) Onboarding/Setup
2) Home Page
3) Devices
4) Parental Controls
5) Notifications
Asset Requirements:
1) Onboard user through Feature Setup
2) Home page
2.1) Discover key features, threats protected against, family profiles
3) View Devices
3.1) Identify devices
3.2) View device details
3.3) Edit a device
4) Parental Controls
4.1) Add a child profile
4.2) Assign a device to a child
4.3) Set screen time control
4.4) Set web content restrictions
5) Notifications
- Important: As part of your final submission, you must update your submission in MarvelApp.
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03).
- 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!
Challenge Description
For this challenge you will be working using the content provided on medium-fidelity wireframes as your main reference - in order for you to provide a polished and innovative visual design for the wires. Treat these screens as concept wireframes, guiding you on the functionality of each screen and not the final screen elements. We are looking for you to provide your best visual design for these screens, which result in a clean and lightweight consumer app experience. Your artwork won’t be presented to the client if the designs is too similar to wireframes.
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.
Things to think about
- We are looking for an innovative visual design approach to the wireframes. While keeping the flow and functionality the same for all screens, look for opportunities to improve visual elements or controls on the page, and the overall aesthetic. Don’t think just about reskinning the page with color - think about the entire visual representation of the information on the page.
- We are looking for a nice clean, modern and easy experience. A lightweight and airy visual design is the goal.
- 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.
- Your design must work and feel on brand, so use the color palette only. But we are looking for a balanced approach to color. Don’t go fully monochrome, or use all colors in the palette. Use background, primary, and secondary colors strategically. (See branding section on this requirements page for reference)
- Keep things consistent. This means all graphic styles should work together.
Required Screens/Functionalities
1) Onboarding/Setup
- See wireframes in Onboarding folder.
2) Home Page
- See wireframes in Home folder.
3) Devices
- See wireframes in Devices folder.
4) Parental Controls
- See wireframes in Parental Controls folder.
5) Notifications
- See wireframes in Notifications folder.
Branding
- You must design using the following color palette:
https://projects.invisionapp.com/boards/R93OFP6K42Z/
- You can use Open Sans as your main font. We might require to replace this on final fixes.
- Your design must work and feel on brand, so use the color palette only. But we are looking for a balanced approach to color. Don’t go fully monochrome, or use all colors in the palette. Use background, primary, and secondary colors strategically.
Softwares and Stocks Icons
- You can design your artwork using Adobe Photoshop, Illustrator, or Sketch.
- 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
- Use a simple placeholder for now
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 capture your ideas and experience visually.
- That the wireframes are not simply “reskinned” with color.
- 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. PSD source files
Source Files
All original source files of the submitted design. Files can be created in all three formats: Sketch, Illustrator, and Photoshop. If you create the file in Photoshop it should be in layers
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.