Challenge Summary
Welcome to Hercules - Ad QA Mobile App Design Challenge!
The goal of this challenge is to design a mobile app that allows a user to log a quality assurance issue that has been observed on a television advertisements they see. These users are internal employees to start but will be expanding to partner organizations.
In this challenge you are provided with wireframes that we designed in a previous challenge.
Note: Do not only give us a colored version of wireframes as they are just meant to show you what we are looking for and explain the idea. You are highly encouraged to provide your own ideas and solutions to this application beyond the provided wireframes. You will still need to follow the client branding guidelines.
Round 1
Submit your design for a Checkpoint feedback:
You initial designs for:
0. Navigation. (Mobile + Tablet)
1. Splash Page. (Mobile + Tablet)
2. Login Page. (Mobile + Tablet)
3. Scan QR Code Page. (Mobile + Tablet)
4. Profile Page. (Mobile + Tablet)
5. Log Issue Page. (Mobile + Tablet)
- If you have time - please provide us with a click map for your design.
- Readme.jpg : Provide notes about your submission.
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03).
Round 2
Final design plus any Checkpoint feedback:
You final designs for:
0. Navigation. (Mobile + Tablet)
1. Splash Page. (Mobile + Tablet)
2. Login Page. (Mobile + Tablet)
3. Scan QR Code Page. (Mobile + Tablet)
4. Profile Page. (Mobile + Tablet)
5. Log Issue Page. (Mobile + Tablet)
6. History Page. (Mobile + Tablet)
7. My Profile Page. (Mobile + Tablet)
8. Help Page. (Mobile + Tablet)
- If you have time - please provide us with a click map for your design.
- Readme.jpg : Provide notes about your submission.
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03).
Challenge Details:
The goal of this mobile application is to allow users to log a quality assurance issue that has been observed on a television advertisements they see. These users are internal employees to start but will be expanding to partner organizations.
We are looking for the [topcoder] design Community to help us with planning our new "user experience" (UX).
Design Guidelines:
- Your solution needs to consider Responsive Design when viewed on Portrait and Landscape view of mobile device.
- Mobile Resolution: Design for iPhone 6 Retina Display 750px x 1334px.
- Tablet Resolution: Design for iPad 2 Retina Display 2048px x 1536px.
- Feel free to suggest any tools/function that can bring good User Experience for this Mobile Application.
- For this challenge we will be using Sketch (http://bohemiancoding.com/sketch/) instead of Adobe Photoshop.
Supporting Documents:
- Wireframe (Wireframe.zip)
- Branding Guidelines (Hercules-UI_Kit-v0.9.0.sketch).
- Fonts (fonts.zip)
Requested Screens:
0. Navigation:
- Slide out menu from the side:
-- Log an issue.
-- History.
-- My Profile.
-- Help/FAQ.
-- Logout.
1. Splash Page:
Please refer to splash.html
- Design a splash page appropriate for this application.
2. Login Page:
Please refer to login.html
- Customer Employees can login from here.
- User needs to enter his:
-- Username.
-- Password.
-- Click on “Login” button.
- Show error validation style.
- User can Scan a QR code that was mailed to him from Hercules.
3. Scan QR Code Page:
Please refer to qr_scan.html
- This page will be where user will scan the QR code that was mailed to them from Hercules.
- Page will contain proper messaging and a the camera viewport for capturing QR code
- When QR code is captured, need to show spinner for processing and show handling of bad QR.
- Please follow wireframe notes.
- If valid QR code, user will be taken to the Create Profile screen.
4. Profile Page:
Please refer to create_profile.html
- User will be able to create/edit profile with following information:
-- First Name.
-- Last Name.
-- Email.
-- “Complete Profile” button.
- Please capture validation error.
5. Log Issue Page:
Please refer to log_issue.html
- The user will be taken through a series of questions to log the details of the issue which they are reporting
- Use the questions shown in wireframe.
- If logging an use is completed the user will be shown log_issue_-_completed.html screen.
6. History Page:
Please refer to history.html
- Will simply show list of past issues logged:
-- Issue title.
-- Date.
-- Ad Name.
-- Issue Type.
-- Status.
-- Number of Reports.
- When user clicks on sort icon he will see sort options.
- When user clicks on filter icon he will see filter options.
- Clicking on an issue will show issue details view (issue_details.html).
7. My Profile Page:
Please refer to my_profile.html
In this page we will display:
- User name.
- User Organization.
- User Email.
- User Statistics:
-- Reported issues by network.
-- Reported issues by type.
-- Trend.
- User will have the ability to edit his profile (edit_profile.html)
8. Help Page:
Please refer to help.html
- In this page we will list help topics.
- Clicking on a topic will take the user to help details page (help_content.html)
Important:
- Keep things consistent. This means all graphic styles should work together.
- All of the graphics should have a similar feel and general aesthetic appearance.
Target Users:
- The target audience for this application will be:
-- Some selected people.
-- Internal Hercules employees.
Judging Criteria:
- How well you plan the user experience and capture your ideas visually.
- Cleanliness of your graphics and design.
- Your design should possible to build and make sense as a mobile application.
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 PDF for your submission file.
Source Files
All original source files of the submitted design. Files should be created in Sketch.
http://bohemiancoding.com/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.