Capture Mobile Application Design Challenge

Welcome to the "Capture Mobile Application Design Challenge". This challenge will focus on creating new screen designs for our Capture mobile app. The Capture app will be used to gather all visuals/photos/recording data for the AR purpose easily.

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
01) Splash Screen
03) Home Screen
04) Start Capturing Screen
05) Grid Overlay Feature
06) Equipment Frame or Region of Interest Feature
07) Distance Instruction (Zoom in/out) Feature
08) Angle of Video/Image Capture Feature
10) Lightning and Brightness Feature

• 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
00) App Icon
01) Splash Screen
02) Login/Authentication Screen
03) Home Screen
04) Start Capturing Screen
05) Grid Overlay Feature
06) Equipment Frame or Region of Interest Feature
07) Distance Instruction (Zoom in/out) Feature
08) Angle of Video/Image Capture Feature
09) Direction (Left/Right/Up/Down) Feature
10) Lightning and Brightness Feature
11) Instructions of Quality & Sufficiency Feature
12) Sync with Backend System or Cloud Feature

• 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

CHALLENGE OBJECTIVES

• Create screen designs for the Capture Mobile App (iOS)
• To create 4 unique screens along with 8 features (Mobile) 

BACKGROUND OVERVIEW

• Data collection for Augmented Reality (AR) apps is a tedious, repetitive and time consuming process
• To be able to process one equipment for AR, we need to take hundreds of pictures and lengthy videos (combinations of brands, models, device types) and record the process/procedure from the expert(s)
• The three main problems that we're currently facing: 
  • Content readiness with customers. Often there is limited or no content available. Lack of expertise to create AR Content
  • Humongous effort to collect the data, with different angles, lighting conditions, procedure specific details etc. Imagine if there are more than 100 pieces of equipment needing to be recorded
  • Repetitive visits are often necessary to gather the required data. The unavailability of experts and equipment result in insufficient data for data model training with desired accuracy
• This process should be simplified by way of guided instructions through a mobile app
• This Capture mobile app will need to have the following important functionalities:
  • Grid overlay on equipment
  • Identifying the outlay of equipment (frame)
  • Instructions to Capture (stop/start)
  • Direction to move left to right or top to bottom in camera view
  • Distance/Depth/Zoom Level for part detailing
  • Lighting/Brightness
  • Data sufficiency instruction (all angles, number of frames/images)
  • Data quality instruction (blur, moving fast etc.)
  • Sync data with content management system from AWS Cloud

TARGET AUDIENCE

• Equipment experts
• Delivery team 
• Creative team

PERSONA

• Name: Ronald Keating
• Occupation: Creative Team
• Goals: Adding equipment data for AR process/procedure  
• Frustrations: Humongous effort to collect data of the equipment for AR process/procedure
• Wants: An application that able to collect data images for the AR process/procedure easily

USER STORY

• Ronald is currently being assigned to capture data photos and videos for 30 pieces of equipment that will be used as part of AR initiative in his company
• He is currently overwhelmed with the size of the job. There are too many steps using the current photography process and the deadline is very tight
• He needs a smart and fast solution to be able to finish the work. The problem he is facing right now is that the capture process is very manual and time consuming to get the photo or videos correct
• To meet his deadline, Ronald uses the Capture Mobile App which allows him to capture/take an image or video data easily. The app provides many features and also smart instructions on how to get the perfect shot for each image
• The Capture Mobile App provides direct synchronization with back-end content management system, which makes the upload process easy
• Using the Capture Mobile application, Ronald is able to finish the job on time with a great quality

DESIGN CONSIDERATIONS

• Simple and clean design, not overly complex and flashy
• Show only the elements required. Others can be hidden
• Must follow our design branding guidelines provided. (Also, we have provided screen designs from another of our applications for your reference)
• Use color or visual elements to highlight and compare important information
• Intuitive. The user should never be left asking "what do I do next?"
• Simplify screen views that are too crowded with content

CHALLENGE FORUM

• If you have any doubts or questions regarding challenge requirements, please ask in our challenge forum: https://apps.topcoder.com/forums/?module=ThreadList&forumID=776211

EXPLORATION SCORE
In terms of expectations, we would like to measure the concept against the following in the one to ten scales:

• Creativity: 8
  • 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: 7
  • 1: don’t care at all about the branding just functionality
  • 10: without a properly branded product there is no success

DOCUMENTATION

• Wireframes.pdf
• Design Guidelines (GUI Kit and Design Reference from other app)

SCREEN REQUIREMENTS
00) App Icon

• Please create simple icon for the application
• Create the app icon in the following sizes:
  • 180x180px
  • 120x120px 
  • 80x80px 

01) Splash Screen
Reference wireframe page 4
Screen orientation: Portrait

• Upon app launch an initial “splash” screen will appear with a short animated video while the rest of the app loads in the background
• Once the animation is complete it should smoothly transition to the login/authentication screen

02) Login/Authentication Screen
Reference wireframe page 5
Screen orientation: Portrait

• App will authenticate using backend authentication services
• Provide “Remember Me” feature where it will store credentials after successful authentication for a week and prompt the password after a week
• Forgot password will send the email with credentials to the user name entered by user
• Provide error scenario for incorrect login attempt

03) Home Screen
Reference wireframe page 6
Screen orientation: Portrait

• After successful login, user will arrive in the Home screen
• This screen will have the following information presented to the user:
  • “+” button to start a new recording 
  • List of Equipment, data stored locally or in the server (two kinds of data storage)
  • List of Projects, data stored locally or in the server (two kinds of data storage)
• Need the ability to select Projects and/or Equipment. Here, the user can drill down into the details and view a list of videos, photos, documents, gifs, etc. 
• The user will be able to add additional content from this screen.
• If the user clicks the “+” new recording button, New capture video will be started. While saving the video, the user should select an equipment type.

04) Start Capturing Screen
Reference wireframe page 7
Screen orientation: Landscape

• The user will be able to see camera video view by default
• Need ability to toggle between video and photo mode. Depending on the Video and Photo toggle, the app should show buttons for: Start, Pause, Resume, Stop
• Should have an option to save local (device memory) or on server (cloud) when recording is finished/stopped. The user should be able to store images on the server at corresponding location to the equipment, or on the device pictures until they choose to upload to the server
• System should instruct user at three different states of content capture:
  • State 1: Before start of the capture - Display notification on top of the screen to focus on the equipment, set the anchor point, distance, ideal lighting and then start capturing.
  • State 2: Capture in progress - Give the ability to set direction, angle, distance, quality, and brightness. In the area that is away from the reference frame, display information on battery and memory levels.
  • State 3: Capture completed - Notify use that sufficient data with good quality has been captured

05) Grid Overlay Feature
Reference wireframe page 8
Screen orientation: Landscape

• In the Capture/Recording screen, the user will be able to show/hide a grid overlay by default, to help with better positioning and camera view

06) Equipment Frame or Region of Interest Feature
Reference wireframe page 9
Screen orientation: Landscape

• In the Capture/Recording screen, while the camera is focused on the equipment, the area of focus should be marked with a frame so that the other directions (angle, distance, zoom, rotation) will be based on this region of interest.
• Utilize the camera frame so the user will understand that the object should be inside the frame. At least a portion of the object (for example > 20%) should be inside the camera frame.
• The flow:
  • At the start of the session, the user will need to put the equipment/object inside the frame on the camera view
  • The framed part of the camera view becomes a reference point and it should get tracked to be precise
  • The frame can become a water marked AR Doodle, and during the capture / recording process, that frame will be visible at each time of capture and remains of particular size (for quality capture in future)
  • If the user moves too much and the object/equipment goes out of focus, this frame/AR doodle tracking can help the user to come back and he will be able to see the frame doodle back on the screen
  • This can further help if the user temporarily suspends the video capture and resumes it (think of ‘save for later’ feature)
  • This frame will help the user to remain focused
• Display an anchor point at the center of equipment based on which the distance, angle and movement instructions will be provided.
• Display the area of interest based on camera focus using the edges and plane/shade, etc

07) Distance Instruction (Zoom in/out) Feature
Reference wireframe page 10
Screen orientation: Landscape

• The Capture/Recording screen should suggest the ideal distance from which the video/picture can be captured
• User should be able to adjust the distance by moving closure or far from the equipment
• Should allow the zoom in / out function
• At the start of the capture some, basic checks need to be performed
• Optimal Distance of the object from the camera - can be made configurable

08) Angle of Video/Image Capture Feature
Reference wireframe page 11
Screen orientation: Landscape

• It is important to capture the images/video in increments of 20 degrees for accurate data model training.
• The Capture App should instruct the user to capture the video/images for every 20 degree angle, from left to right as well as top to bottom. 
• The default degree of movement should be 20. This measurement should be configurable by the user if needed.
• System should guide the user when to move, when to stop and stay stable for what time. These settings should be configurable.
• As a process, the user is prompted to choose a direction for his movement.
• Once he chooses, he is guided to move a quantum with some tolerance. For example: +/- 3 degrees.
• When he moves to the desired angle, he will be asked to stay focused for a specific amount of time. For example: 20 seconds (configurable). The user will then be asked to move further in that direction. 
• System should instruct how many snapshots will be required for each angle and the minimum time to fulfill that requirement.

09) Direction (Left/Right/Up/Down) Feature
Reference wireframe page 12
Screen orientation: Landscape

• Highlight the direction in which the user should move while capturing the video/image
• Provide instruction to the user to move to various positions while capturing the video/images so that enough frames from different directions are captured
• These directions to be provided with reference to the area of interest that the user is currently capturing
• Provide Instruction to the user about which direction he needs to move and the pace of movement, based on the context of angle, focus area, data sufficiency or quality

10) Lightning and Brightness Feature
Reference wireframe page 13
Screen orientation: Landscape

• When the camera is focused on the equipment, the area of focus should be adequately lit, if not, the app should suggest the user to have sufficient lighting.
• App should suggest to increase or decrease the brightness based on the focus.
• App should warn about lighting reflections in camera view and over exposure of the image etc.
• Warn the user of:
  • Low lighting condition
  • Light reflections
  • Need to increase or decrease brightness

11) Instructions of Quality & Sufficiency Feature
Reference wireframe page 14
Screen orientation: Landscape

• Capture App should suggest the following for quality of images:
  • Low lighting, blurry, low resolution
  • Over exposed
  • Incorrect view / long distance
  • Features missing
  • Required angles not included
  • Low number of images or frames

12) Sync with Backend System or Cloud Feature
Reference wireframe page 15
Screen orientation: Portrait

• Content like images and videos will be uploaded to the backend system or cloud space
• Provide a “Sync” button in the home screen and enable this button when there are changes that are not yet copied to Cloud. 
• Indicate the status of readiness (quality/sufficiency) to sync:
  • Red for no or low content
  • Orange for low quality
  • Green for good to sync

BRANDING GUIDELINES

• Design Guidelines, use the design guidelines only as reference. Please note that the style of the existing app provided was using Apple Human Guidelines. Use them as reference for the colors, fonts, icons treatment, and clean design style.
• Stock photos and stock icons are allowed from the approved sources

TARGET DEVICES

• Mobile Portrait: 1125px x 2436px (iPhone 11 Pro)

SUBMISSION AND SOURCE FILES
Submission File

• 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

Source Files

• All source files of all graphics created in either Adobe XD, Figma, Sketch, Photoshop and saved as an editable layer

 
FINAL FIXES

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