Challenge Summary
Welcome to the Quality Report Tablet and Mobile Application Design Concepts Challenge. This challenge is focused on creating new design concepts/visual ideas to help users produce a Quality Report in Tablet and Mobile devices that will Improve accuracy and timeliness of Quality Reports, as well as allow for notifications to the status of Quality Reports.
We are looking for you to provide design concepts and click-paths. We want to focus on iOS interactions and creating a modern and up-to-date tablet/mobile application. We are open to creativity for the best User Experience as possible.
In this challenge we are looking for DESIGN CONCEPTS on how this Tablet/Mobile Application could work. What should the user see and experience when using the application?
We are VERY open to new and creative ideas, especially ones that require the least amount of clicks and keystrokes. The provided attachments and rough wireframes show ONE way to accomplish what we are asking for, but we hope you can provide cleaner, more efficient, and better layouts and workflows.
Round 1
Initial Submission of Quality Report Tablet and Mobile Application Concepts Design for our review
1. Main Page (Mobile and Tablet view)
2. New “Quality Report” (Mobile and Tablet view)
Round 2
Final Submission of Quality Report Tablet and Mobile Application Concepts Design with updated checkpoint feedback for these following pages:
1. Main Page (Mobile and Tablet view)
2. New “Quality Report” Mobile and Tablet view)
3. Search Quality Report (Mobile view only)
4. Quality Report List (Mobile view only)
Our client would like to see what the Studio community can come up with in regards to design of “Quality Report” application based on the provided specification.
We are looking for the [topcoder] design Community to help us with planning out the look and feel and also make suggestions to the User Experience.
Concepts Design Scenario
- Manager needs to inspect product, review quality of the products, and then produce a "Quality Report".
- Manager needs to scan a “Product ID Number” barcode and create a complaint.
- Create complaint flow has a “Complaint Build Code” that has a hierarchy to it.
- Manager should also be able to attach video, audio, or images, or potentially other supporting material (raw attachment) to the complaint.
- Once a "Quality Report" has been sent off with the complaints, more people will work on it in main system and the status will change, and the Manager needs to get notifications of these status changes.
- Notification will be handled via email now. Notifications not needed in mobile app.
Concepts Design Requirements
1. Main Page
Wireframe: QR Main.pdf
- This is how main page could look and feel, but feel free to be creative in your solution.
- No need to show application logo.
- Need displayed Manager information
- Place main action buttons for “New Quality Report” and “Search Quality” report
- Show us best practice to design Search function
- Also need list “Pending Quality Report”. Show quick list that can help user navigate quickly to see the details
- Also show us a way to let users know there’s an attachment in a “Quality Report”
- Below the “Pending Quality Report”, there’s “Submitted Quality Report” (Intent is to allow manager quick access to pending/in progress and recently completed quality reports)
- Show quick information to let user quickly see the issue/problem.
- Feel free to suggest best practice section need displayed for this main page
2. New “Quality Report”
Wireframe: QR New.pdf
- There are some functionalities we need to embed when the user creates a “Quality Report”:
2.1 Scan “Product ID Number”
- Create a button for quick access to Scan barcode via device camera
- After scanning the “Product ID Number”, we need a checkmark indicator if the number is valid or not
- We also need a function to show similar Quality Report that can view and clone.
- Search for Similar Quality Reports will occur after the manager enters the Product ID Number and Complaint code.
- How you show the flow to view and clone?
- You need to show different form field in page like text input, dropdown, datepicker, accordion also how scrollbar look.
- Embed “Voice Recognition” need to use in the page.
- There’s “+” button to add new Failed Part input (Capability to add more than one failed part number).
- You can see there’s tab to navigate for “Required Information”, “Attach”, “Product” and the “Other”
- For “Product” tab, put textarea for now.
- For other, basically will be same like “Required” tab, but for this tab consist of all detail fields that not required fields to filled by users to enhance informations need send to system.
- There’s progress bar that help user to see their progress create new “Quality Report”. This is one way to accomplish this, but we are free to other ideas as well.
- Feel free to suggest the layout and wording
2.2 Build Complaint
Wireframe Guideline: QR Complaint.pdf
- The goal is to allow Manager to describe quality issue with minimal clicks/minimal typing.
- Click “Build Complaint” button will let user select the hierarchy or search by description
- User need able to drill down the Build hierarchy
- You can see 2 columns in table for “Code” and “Description”
- Show separated screen to explain the hierarchy selection flow.
- Also, need search ability for quick selection of Build code.
- Need selected stated for Build Complaint
2.3 Take or Select Picture/Audio/Video
- Need button to let user take Picture/Audio/Video from their devices function
- Create separate screen to show the upload progress works
- Also, how screen look for selecting attachment. The user needs to be able to either capture a picture or upload an existing picture. Leverage the usage of device features.
3. Search Quality Report
Wireframe Guideline: QR Main.pdf
3.1 Scan “Product ID Number”
- In the search page, need ability to Scan “Product ID Number” via device camera
- After scanning the Product ID Number, a list of “Quality Report” that match that Product ID number should be displayed.
- Search information columns that can be displayed are:
-- Report No.
-- Report Title/Description
-- Report Date
-- Model
-- Model Year
-- Dealer Number
-- Status
-- Attachments
- You also need create ability to filter the search result
3.2 View “Quality Report” Detail
- We need similar layout when creating a “New Quality Report”, but for this page nothing is editable, everything is view only.
- Show users how to access all contents and how they look in view-only mode?
3.2.1 View Attachments
- When user views attachment, there will be list for different file type like “Image”, “Audio” and “Video”
- Show easy way to recognize different file type
- Create separate screen to play audio/video
- Create separate screen how full screen image look and including native pieces like pinch to zoom, etc
4. Quality Report List
- This page consists of all Quality Report with all status
- Feel free to suggest how you design this page.
Design Concept Goals:
- How should this “Quality Report” Tablet/Mobile application work?
- This application will be an iOS native application. Taking into account that it should allow for swipe, accelerometer, GPS, all the advantages that comes with the performance of native apps.
- The application should fun and easy to use.
- Think simple but effective solutions! Have fun creating this - let us know how you think it should work!
- We want this to be MODERN and PROFESSIONAL design!
- Use shape format on your .psd so we don’t lose quality when resize into Retina version.
- DO NOT just copy provided wireframe, if you do all submissions will look same. You’re encouraged to generate better ideas for layout and functionality!
- We are definitely open to anything fresh for ALL of the sections in your submission. Wireframes we have been given represent one way someone might accomplish the look, but we are VERY open to new ideas about how the community thinks is should best be laid out.
Branding Guidelines:
- Required Color Theme (screenshot: color-palette.png)
-- #d90f1e
-- #d5c9b5
-- #ba0c00
-- #f5f4f3
-- #3f3d3e
- Fonts: Up to Designers
- Clean and Professional Look
Screen Sizes:
- Tablet Retina Size: 2048px x 1536px
- Mobile Retina Size: 750px x 1334px
FYI: Refer to Checkpoint and Final Round requirements for Screen sizes needed for your submission!
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 User:
- Manager of “Quality Report” application
Judging Criteria:
- How well you plan the user experience and capture your ideas visually
- Efficiency of entering data, minimizing clicks and keystrokes.
- Cleanliness of your graphics and design
- Your design should be possible to build and make sense as a tablet/phone 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 JPG/PNG for your submission files.
Source Files
All original source files of the submitted design. Files should be created in Adobe Photoshop and saved as layered PSD file, or Adobe Illustrator as a layered AI file.
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.