Zoic Cyber Security Services Portal WebApp Design Challenge

Welcome to the “Zoic One-Click Cyber Security Services Portal WebApp UI Design Challenge”. In this challenge, we need your help to design a one-click cyber security service platform for micro and small enterprises (SMEs). The platform should provide easy access to PURCHASE and INSTALL products and services directly on their company laptops.

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 designs for checkpoint feedback (for WebApp/Desktop and Responsive Mobile)
01) Homepage (Desktop and Mobile)
03) Questionnaire/Assessment (Desktop)
04) Shopping cart and Purchase/Payment (Desktop)
05) Cyber Champion Admin Page (Desktop)

• 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 the correct flow. Use the proper file numbers, (1, 2, 3, etc.)

Round 2

Submit your final designs with all checkpoint feedback implemented (for WebApp/Desktop and Responsive Mobile)
01) Homepage (Desktop and Mobile)
02) Product and Services (Desktop)
03) Questionnaire/Assessment (Desktop and Mobile)
04) Shopping cart and Purchase/Payment (Desktop)
05) Cyber Champion Admin Page (Desktop)

• 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 the correct flow. Use the proper file numbers, (1, 2, 3, etc.)
• If you're not submitting in the Checkpoint/Round 1, you are not eligible to submit in the Final/Round 2

• UI Design for an one-click cyber security services portal.
• Seven (7) distinct main screens/features.
• Detailed design workflows and ready to develop design.
• Visually present refined experience by showing the step-by-step workflow interaction.
• Responsive design that can be easily adapted to mobile and tablet

• There are growing cyber security attacks to the retail segment (SMEs). This has become  a concern and burden on society, resulting in a greater pull for cyber services. There is evidence of governments stepping in to raise awareness and investing in incubators, acknowledging the problem in the retail segment supply gap.
• The retail segment (especially SMEs with less than 50 Full Time Equivalent) face challenges with high barriers to act. This is due to the lack of easy to consume and operate solutions at an affordable price to tackle this issue.
• Zoic has developed a solution to provide a one-click cyber security services portal for micro and small enterprise (SMEs < 50 FTE)

• Owners, founders, decision makers or regular employees with no technical background
• Administrators/IT person of small and medium enterprise businesses who have some technical background

• Name: Amanda Hudson
• Occupation: Admin of a medium size retail clothing shop
• Role: Purchaser 
• Goal:
  • Complete the registration process
  • Add and manage users on portal
  • Complete purchase and complete payment process on Zoic portal
  • Install the application or service that she purchased.
• Wants: A portal where she can purchase cyber security protection at an affordable price.

• Journey 1: Homepage Landing > Business Assessment > Recommendation > Select Product > Purchase > Provide Details > Purchase complete
  • Amanda visits Zoic Cyber Security Service Portal and sees a promotional homepage.
  • Messaging on the portal suggests to fill out a questionnaire to receive personalized recommendations on which package suits her company. Amanda is able to skip this part if she chooses. However, to access the assessment she will need to fill in the questionnaire for the product recommendation.
  • While Amanda answering questions, she sees a message offering a Free Assessment for her company. Selecting this offer will enhance the product recommendation for her company. 
  • Amanda selects the “Free Optional Cyber Assessment” and continues the questionnaire.
  • After completing the questions, she is given a recommendation for the Gold Package based on her answers.
  • Amanda decides to purchase the package and then enters required purchase details.
  • When she selects Purchase, the system will process and verify her payment. If successful, a legal contract will be sent to her email and activation email to all registered users.
• Journey 2: Dashboard Landing
  • As returning customer, Amanda views the Cyber Champion Dashboard of the Zoic Cyber Security Service Portal. 
  • (Assume she is already logged in. Login screen is NOT in scope for this challenge.)
  • On the dashboard page, Amanda has the ability to manage setup and settings.

• The portal design should be Responsive, that is it should work for Mobile and Tablet too
• The design should be simple, intuitive, and easy to use 
• Use color or visual cues should help users through the workflow. 
• Clearly show interactions, pop-ups, etc.
• Reduce the number of interactions required from users as much as possible.

• Creativity: 7
  • 1: barely new ideas
  • 10: a utopic product with features not proven to be able to be fully implemented

• Aesthetics: 9
  • 1: low-fidelity design, wireframe or plain sketch
  • 10: top-notch finished looking visual design

• Exploration: 8
  • 1: strictly follow an existing reference or production guideline
  • 10: open to alternative workflows/features not listed here that would help the overall application

• Branding: 10
  • 1: don’t care at all about the branding just functionality
  • 10: without a properly branded product there is no success

• FTE:  Full-time employee, or whole time employee.
• SME: Small and Medium Enterprise. A business with under 50 FTE.
• Cyber Champion: A customer (admin) who is the single point of contact within a small firm and who would be responsible for PURCHASING the product and managing the on-going processes. 
• User: all the users who are registered product holders and can ACCESS the Portal and then login to access the dashboard. Each user has a license assigned based on email address. (Notes: this standard user is out of scope for this challenge.)

• Zoic logo: User a simple placeholder
• Main navigation: Product & Services, Chat, Email Us, Call Us, Login Menu, User Profile, and Shopping Cart.

• Information about Zoic Cyber Security Service. For example: Hero and Call to Action why to use and purchase a package from Zoic.
• Box or card where a user can type email and company website so they can receive a free cyber assessment report. This will be sent to their email with latest news about cyber security,
• Package Information. Describe three packages that are available with the details and price per month, with Call to Action to purchase each package.
• Path to the Questionnaire (see (03) Questionnaire and Assessment). Provide a link or include the section where a user can fill the questionnaire to start the assessment. It’s up to you how to make the assessment intuitive and not crowd the homepage.
• Upon completing the questionnaire, the user should see package recommendations and have the ability to purchase the package right away.

A user will access this screen by clicking on the navigation item, or from the “More” on the product or package list from the homepage. This screen should display a Catalog and Product Recommendation.

• Catalog: The catalog will show a listing of products and services with details of each product (inclusions & exclusions) and a pricing model (from $XX/user/month). This should be displayed in a single comparative view.
• Product Recommendation: This area will show a recommendation for the package best suited to that customer’s needs. Information to include in recommendation are:
  • Detail pages for each product package (Bronze, Silver, Gold);
  • Information about which package other customers have purchased or are popular.
  • The percentage of customers selecting each of the packages.

• To complete the questionnaire, the user will provide company details and business activities according to a guided set of questions. Their answers will be used as inputs for the assessment and product recommendation.
• User has the option to complete the questionnaire later.
• All questions are not required to be answered. For example, if the first answer doesn’t meet the criteria needed, the message “customer not eligible” and reason should be shown.
• Sample questions:
  • What industry is your company in? Choose from a drop down list of industries. 
    • If the answer is Gambling, the customer is not eligible to purchase any products.
  • How many employees do you have? Enter number.
    • If the answer is greater than 50, then the customer is not eligible to purchase any products.
  • What is the annual turnover of your company? Enter a £ amount.
    • If the answer is more than £5M, then the customer is not eligible to purchase any products.
  • Does your company have a website or company email domain? Select Yes or No.
    • If the answer is Yes, then product recommendation is silver. If No, then product recommendation is bronze
  • Does your company store intellectual property or sensitive customer data? Select Yes or No.
    • If the answer is Yes, then product recommendation is gold. If it is No, then product recommendation is bronze.

• An assessment takes place before, during or after the purchase of the product. The system will assess the user needs to determine the correct products to recommend. The content on screen will be continuously updated as the user enters details. Subsequent items (such as the product recommendation) will appear after appropriate questions have been answered.
• As the user answers questions, they will be presented with the offerings for "Cyber-assessment" or "Self-assessment." If they make a selection during that time, some questions may be enhanced or eliminated.
  • Free Optional Cyber assessment: This is an free optional service that is offered during the pre-sale phase, for customers interested in assessing their security posture. The user would receive an overview of their company’s cyber posture with the Cyber Risk Assessment Report. This will provide an assessment report with remediation actions.
  • Free Optional Self-assessment (regulatory): This is an optional service that is offered for free during the post-sale phase, for customers interested in assessing themselves against regulatory requirements. For example, if they would like to have a recognized certification. Or, if they would like to determine if their company’s cyber hygiene is aligned with regulatory requirements (cyber essentials certification). They could get a score / tips on how to improve their cyber posture.
• Messaging (advertising) about their assessment will be displayed to Cyber Champion. Feel free to improve the wording or add visual cues to make the assessment message more appealing. For example:
  • Positive assessment: Based on your answers, we recommend our Gold package! Your confirmed price is £XX.XX per month and will protect up to 5 devices for all of your employees.
  • Negative assessment: Unfortunately, due to — the industry you represent / the number of employees you have / your company annual turnover — you are not eligible. Thank you for your interest in Zoic Cyber Services.

• The Cyber Champion is able to select and save the product before purchasing, including from a different session.
• To complete a purchase, Cyber Champion will need to provide:
  • Company Details: company name, company address, company website, company VAT number. 
  • Cyber Champion and User Details: Cyber Champion’s name, email, and mobile number. This user can add as many users allowed from the package. They will provide name, email and mobile phone for each. The user would also have the ability to upload CSV files to speed up the process.
  • Emergency contact: email address and mobile number.
  • Purchase Details: credit card number, accept terms and conditions, confirm marketing consent for GDPR compliance
  • Password
  • When the user selects Purchase, the system will process and verify payment. If successful, a legal contract will be sent to their email. An activation email will be sent to all registered users.
• Activation of software through Zoic WebApp or URL, based on the product purchased. The Url will be available through mail.

• 1. Setup and manage security services, profile, content:
  • Software activation. A url link is provided for each device type.
  • Action list. Displays pending actions to be completed. For example: Activate Protection Confirmation, Configure Email Security.
  • Confirm approval. For example: Takedown Service, where the user would need to confirm that they authorized a site to be shut down because of illegal activity such as phishing, scam, spam, etc.
  • Notifications. Display device status.
  • Setup and manage services (Silver & Gold). This should display a list of services with a setup button. After the user clicks on the Setup button, they will receive configuration/setup instructions that may need to be followed.
  • Provide additional information (Silver & Gold). This link will allow the user to add information to their account. For example, domain names or sensitive keywords the user would like to monitor.
• 2. Company overview and license management. These are standard subscription and user management workflows such as: 
  • Account settings / preferences
  • Add new users, delete users (e.g user life cycle management)
  • Assign licenses to users (re-assign users)
  • Cancel subscription / renew subscription / upgrade subscription
  • Subscription/Invoice overview
• 3. User and device management. Access to user overview 
  • List of all users and their device status (Active, last scan, posture rating)
  • Trigger user action/notification
• 4. Reports: Includes functionality to view reports and export data (For example: Cyber assessment reports and company overview report)
• 5. Education: Users have access to online training, educational material, video, How-To’s, guidance, tool-kit
• 6. Support: Section dedicated to contact 24/7 support (cyber agents), FAQ or help – This is for active customers

• Branding guideline.pdf, use this as a guide for font, color and iconography for your design.
• Zoic Package and Products.pptx, this is the list of products and packages from Zoic which need to be displayed on the Product list.

• Font: Arial and OGG
• Colors: see attached branding guideline for complete color
• Icons: see attached branding guideline for style.  You may create icons from scratch or use any free for commercial use stock icons in your design. 
• Logo: please use a placeholder for this challenge. Note: even if you know who the client is please avoid it. You will automatically fail screening if you use client logo or name.

• Desktop: 1920 x 1080 px, with height adjusting accordingly.
• Mobile iPhone 12: 1125 x 2436 px, with height adjusting accordingly.

• Sketch
• Adobe XD

Note: These are the only design tools allowed in this challenge. Submissions created with other tools will fail screening.

• We need you to upload your screens to Marvel App
• Please request for marvel app in the challenge forum
• You MUST include your Marvel app URL (in your marvel app prototype, click on share and then copy the link & share it with your notes/comment on this link while you upload)

• Submit JPG/PNG image files based on Challenge submission requirements stated above
• MarvelApp link for review and to provide feedback
• Declaration files document contains the following information:
  • Stock Photos Name and Links from allowed sources
  • Stock Art/Icons Name and Links from allowed sources
  • Fonts Name and Links source from allowed sources

• Only Sketch and Adobe XD file allowed for this challenge.

• As part of the final fixes phase, you may be asked to modify your graphics (sizes or colors) or modify overall colors

• Winner of this challenge will give an opportunity to provide a completely responsive mobile and tablet screen.