Challenge Summary
On this straight forward design exercise, we need your help to come up with easy-to-use solutions for an iOS mobile application that will help users scanning objects and viewing history. It’s that simple!
Best of luck.
Round 1
Submit your design for a checkpoint feedback.2. Landing Page / Home
3. History (list of items)
4. History Details View
6. Scanned Code Details
- Please provide a MarvelApp Presentation (see details below).
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)
Round 2
Submit your final design plus checkpoint feedback.1. Login Page
2. Landing Page / Home
3. History (list of items)
4. History Details View
5. View Object / Scan QR
6. Scanned Code Details
- Please provide a MarvelApp Presentation (see details below).
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03).
The goal of this competition is to come up with the look and feel of a mobile iOS application. You are provided with user stories and requirements to provide solutions that will help the users having a smooth experience while using the application.
Concept Design Goals
We need to develop a counterfeit mobile (iOS) application that would be used to scan objects and verify its authenticity/uniqueness. The objective is to enrich user experience so that the application acts as an interface between the object (QR Code) to be scanned and the back system verifying its authenticity.
It has to offer its users a means to scan a QR Code for verification (via the device’s camera) and view past scans stored on their device via the application.
The designs will feature two key functions:
- QR Scan.
- History View.
The main concerns we’re trying to solve in this project are related to the timing and speed of innovation delivery of a simple application. To verify the status of scanned items as being verified by the system in an effective and documentable manner.
Your solution should be very easy to use, natural (nothing to learn) and self-evident. Keep in mind it’s a simple process, we do not want to see over complication or unnecessary processes. Visually, we are open to see any style as long as it looks clean and professional; key element is highly thought-out usability, clean interface and clarity of information.
Screens Requirements
Overall
- Please suggest how to organize this content and group them into screens, we are looking forward to seeing your unique proposals, be bold and consider the concept design goals key items (timing and speed of delivery).
- Think of providing a seamless navigation through the features of the app, not just a main navigation menu, all of it across the engaging experience.
1. Login Page
- User can login using username, password.
- It should offer features such as remember me and forgot password link.
2. Landing Page / Home
- User should be able to see a highly informative page which also serves as functional hub for the features this app offers.
- User should be able to learn quickly what are the possible actions, what they’re about and also scan a new code, maybe recent scanned items - what else? onboarding? wizard? what can you suggest?
3. History (list of items)
- User should be able to see a list of recently scanned items.
- Items should have:
-- Title: String of scanned object (from QR code).
-- Date.
-- Success/Failure Status (up to designers on execution).
-- No Image required.
4. History Details View
- User should be able to see a full view of a selected item.
5. View Object / Scan QR
- Once this view is triggered, user can see the camera and scan a QR code.
6. Scanned Code Details
- User can see a summary of the scanned item (verification process).
- There are two possible status:
Success:
Success: Object found!
Button: View more information (name of the object, date*from history*) /
Button: Scan again
Failure (counterfeit):
Object not found!
Button: Report (an idea, maybe?)
Button: Scan again
Design both states.
Branding Guidelines
- Colors, typography, and branding are open to suggestions.
- Keep things consistent. This means all graphic styles should work together.
Screen Specifications
- Mobile: 750px width. Height as much as needed.
- Make sure your work is in a vector format, for retina scaling and high fidelity.
MarvelApp Presentation
- Request a MarvelApp prototype from me using this link: https://tc-marvel-app.herokuapp.com/challenge/30089203
- Do not use the forums to request for MarvelApp.
- Provide clickable spots (hotzones) to link your screens and showcase the flow of the solution.
- Provide the MarvelApp shareable link in your notes during submission upload.
Stock Artwork (Illustrations, Icons, Photography)
- Stock artwork is allowed for this challenge.
- Make sure to declare all your assets properly or you might fail screening.
- You don’t want to fail screening? Read this.
Target User
Non-tech end users, who would benefit from a short learning curve.
Judging Criteria
- Overall idea and execution of concepts.
- How well do the designs align with the objectives of the challenge.
- The overall design and user experience.
- Cleanliness of screen design and user flow.
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, Adobe XD or Sketch. Layers should be named and well organized.
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.