Challenge Summary
Welcome to the EXPERIMENTAL Challenge Format! - USA Diving Team iOS Challenge Series - C2 - [Swiftoberfest].
We are going to try something new with this challenge! This is an experimental "open" design challenge format so, please pay special attention to the challenge details and ask questions in the forum!
This is the second in a series of challenges to design and build an iPad application that will allow the USA Diving team to track the performance of divers as they prepare for official diving events and Olympic trials. Closely monitoring the day-to-day well-being and performance of divers in training will allow coaches and physicians to adjust individual training programs, for improved results.
Good luck on this challenge!
Round 1
Round One (R1): Checkpoint
Submit your initial design concepts storyboards for the Checkpoint:
2b. MENU (over placeholder)
3. MANAGE PROFILE
4c. TRAINING SESSION - HEALTH SURVEY - PRE
- Notes.jpg: Please include any comments about your design for the Client
- Make sure all pages have a logical flow / Use correct file numbering (00, 01, 02, 03)
Round 2
Round Two (R2): Final
Your final storyboard designs, based on the provided R1 winning design concept(s) / PSD(s), with all Checkpoint Feedback implemented.
1. APP LOGIN SCREEN
2a. DASHBOARD SCREEN (Placeholder)
2b. MENU (over placeholder)
3. MANAGE PROFILE
4a. TRAINING SESSION - DIVER PIN
4b. TRAINING SESSION - NEW DIVE
4c. TRAINING SESSION - HEALTH SURVEY - PRE
4d. TRAINING SESSION - HEALTH SURVEY - POST
- Notes.jpg: Please include any comments about your design for the Client
- Make sure all pages have a logical flow / Use correct file numbering (00, 01, 02, 03)
Round Three (R3): First2Finish Format
The final storyboard designs, based on the provided R2 winning design concept(s) / PSD(s), with all final revisions implemented.
NEW "Open" Challenge Format:
The idea for this experimental design challenge is to get the final design deliverable closer to the final product, for the customer. This format allows the concept and design direction to be selected in Round 1 (R1) and revisions to occur in both Round 2 (R2) and Round 3 (R3). This format also you to win throughout the challenge. The overall winner and placements will be based on your cumulative prize winnings.
DESIGN NOTE: There are only four (4) notable new screens to design from scratch. There other four (4) screens are very simple: two screens are just revisions of the provided login screen, one screen which is just a placeholder screen, and one screen just shows the menu overlay.
How this works
There will be Three (3) Design Rounds in this challenge. If you are familiar with our current design challenge process, think of the rounds as being similar to Checkpoint, Final, and Final Fixes.
Challenge Prize Structure
R1 Prizes: $800 (1st), $400 (2nd), $100 (3rd), $100 (4th), $100 (5th)
R2 Prizes: $600 (1st), $300 (2nd), $75 (3rd), $75 (4th), $75 (5th)
R3 Prizes: $200 (1st)
We will have five (5) prize placements for both Round 1 and Round 2, plus a First2Finish Round 3 task with one (1) placement for a total of eleven (11) opportunities for prizes and $2825 available in prizes.
All prizes and placements will be updated and corrected at the end of the challenge. The challenge prize structure listed in the details of the challenge is correct and what is reflected at the top of the Challenge page is only 1 potential scenario.
Round 1 (R1) = Checkpoint
Round 1 is all about you working independently on the design/layout and flow concepts. You must submit both your screens and PSD source files in Round 1.
Round 2 (R2) = Final
Round 2 is where it get interesting! Once we review the designs with the client, we will provide the winning source file(s) and design feedback to continue the challenge. Any designer who has submitted in Round 1 will be eligible to continue and compete in Round 2. Everyone will work from the same source files and complete the requested updates, merges, and final screens. You must submit both your screens and PSD source files in Round 2
Round 3 (R3) = First2Finish
Almost all design challenges have Final Fixes. Round 3 is designed to handle final revisions of the winning design. Once again we will provide source files from the previous round. Any designer who has submitted in the Round 2 will be eligible to continue and compete in Round 3. Round 3 will work like a First2Finish Challenge where the first designer who completes the fixes will win the Round.
IMPORTANT PARTICIPATION NOTES:
- You do NOT need to win a prize placement in R1, to compete in R2, but you must compete and have a submission that passes screening in R1
- You do NOT need to win a prize placement in R2, to compete in R3, but you need to compete and have a submission that passes screening in R2
You will be asked to respond to a post-challenge survey about this new format! We are looking for your thoughts!
Design Considerations
Do NOT use Artboards - Use a single PSD storyboard for each unique “page” plus it’s related alternate views/popups etc.
- Adobe Illustrator (AI) source files are not allowed.
- Logically group all PSD source file layers AND label both your individual layers and groups logically.
- Remember that others will be working with your files in R2/R3, and you may be working with other member’s files in R2/R3, so be professional and considerate!
Review the IOS Human Interface Guide for consideration: https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/index.html#//apple_ref/doc/uid/TP40006556-CH66-SW1
Familiarize yourself with the USA Diving organization
http://www.usadiving.org/
Included R1 Assets
- Approved Splash screen
- Diver PIN Entry screen (PNG & Source)
- USA Diving Logo
- Style Guide
Design Size
- 2048 px wide by 1536 px tall at 72dpi.
- Do not show an iPad device frame in your screens or source (content area only)
Required Screens
1. APP LOGIN SCREEN
NOTE that this screen should have the basic look and feel from the Diver pin screen- see provided source file - content is:
- logo
- username (text input)
- password (text input)
- need help? (text link)
- login (button)
2a. DASHBOARD SCREEN (Placeholder)
- header area to contain:
— logo
— menu icon (show this on the LEFT side of the screen)
— current page title, “Hi, Chris.”
- the content area to contain:
- we will leave the content area here blank as it will be designed in a separate challenge
2b. MENU (over placeholder)
For this screen, show that the user has tapped the menu icon, and the menu has slid in from the left side of the screen, over the dashboard placeholder screen.
Menu nav items are:
- dashboard (show this one as “active”)
- training session
- data report
- profile
- logout
3. MANAGE PROFILE
This screen is a form, so we want it to slide up from the bottom and cover most of the page below it. Show a 50% opacity color overlay over the dashboard content > then this content area on top of it. The user canNOT access the menu button while this screen is open / Do NOT include an “x” to close this layer, as the user MUST choose cancel or save to close the screen!
- header area to contain:
— current page title, “Update your profile.”
—Update profile picture element (see style guide for this)
Main content here is a form for profile data - content is:
- “personal information” section title
— first name (text input, show “Christopher” here)
— last name (text input, show “Superlongnamus” here)
— coach of record (multi-select, show “Jon Snow-Longnamus” selected)
— email address (text input, show “csuperlongnamus@gmail.com”)
— phone (standard phone entry - 3 inputs - show “123” “456” and “7890” here)
- training information” section title
— subsection for “Olympic Dives” with hint text “Enter the dive numbers for your Olympic dives.”, and the user sees 6 text inputs that appear to be inactive until he taps one to enter the number. Show 5 of them as “active” with dive numbers in them (use vacations of the “5371D” dive code) and one as blank/inactive here.
— subsection for “Lead Up Dives” with hint text “Enter the dive numbers for your most common lead ups”, and user sees 12 text inputs that appear to be inactive until he taps one to enter the number. Show all of them as “active” with dive numbers in them (use vacations of the “5371D” dive code)
- “login credentials” section title
— Diver pin (this is READY only text/user can not edit it - show “1234” here)
— username (this is READY only text/user can not edit it - show “jblack” here)
— password (text input with “******” and a “show password” option)
— confirm password (blank text input)
— buttons for “cancel” and “save changes.”
TRAINING SESSION SCREENS (4)
The Diver pin login screen has already been designed and only needs to be edited, per the revisions detailed below.
NOTE that all of the training screens should have the basic look and feel from this pin screen- - i.e. covers 100% of the screen (no menu icon visible) and dive photo as background. IF it is better for user experience, you can add more blur to the photo and/or a white overlay (in the style of iOS 8) over the imagery, in order to make the content easier to read,
Do NOT include an “x” to close these screens.
After the Diver pin screen, the user will see his “Diver card” element (see style guide for this - except on these screens the card will have no buttons so just show photo, name, diver pin #) on each subsequent screen, so that the diver knows he entered the correct pin.
After the Diver pin screen, the subsequent training screens should be somewhat uniform, i.e.:
- each one will be a training section screen, so you can show a single element across the top of each of these screens, where the related page tiles will live.
- each one will be a form, so you can show a single element across the bottom of each of these screens, where the related form action buttons live.
4a. TRAINING SESSION - DIVER PIN
This is where each Diver will enter his pin so that he can access training session screens.
Edit the existing pin screen, per these requirements:
- remove this big / centered version of the logo and replace with the smaller logo from all screens (in the same location as all other screens)
- increase width of text input element to be the same width as the keyboard and the same height as the keyboard circle buttons
- add an “End Training Session” button element in the upper right corner of the screen
4b. TRAINING SESSION - NEW DIVE (default after login)
- header area to contain:
— current page title - large, “Enter your dive info”
- content area to contain:
- show Diver card, but withOUT related buttons (just photo, name, Diver pin #)
- Show an option to take a health survey - this should be an element that contains the health survey icon and the text “Report Injury / Illness”. The user will tap here to take the related survey.
FORM: Main content here is a form for entering dive stats - content is:
A. element for designating dive practiced - options include:
— element for selecting one of the “Olympic” dives, which will include 6 buttons, each with a dive number, which will look like “D1679”.
— element for selecting one of the “Lead Up” dives, which will include 12 smaller buttons, each with a dive number, which will look like “D1679”.
— element for manually entering “Other” dive number, which will include a text input (tap to trigger keyboard and enter a dive number not shown in options above)
B. element for designating height of diving board - (see this element in style guide)
C. Olympic rating element - (see this element in style guide)
D. options to either tap “end training” OR “dive again”
4c. TRAINING SESSION - HEALTH SURVEY - PRE
- header area to contain:
— current page title - large, “How are you today?”
- the content area to contain:
- show Diver card, but withOUT related buttons (just photo, name, diver pin #)
FORM: Main content here is a form for entering health information - content is:
A. element for “How is your mood.”
This element should be similar to the Olympic rating scale in style, but just show 5 “smiley” faces to choose from:
- big frown
- slight frown
- straight line mouth (selected by default)
- slight smile
- big smile
B. element for “Any illness or general discomfort?”
This will be where users can selecting one or more of the following common issues:
— allergies
— sinus infection
— head cold / flu
— stomach flu
— other issue
C. element for “Any areas with injury or significant pain?”
This will be a graphic element where the user sees two images of a human body, as commonly seen on medical forms. Note that there will be no clear gender on these images (could be male or female / cannot tell) and the body images will need to be fairly large, for the user to easily tap into a specific area. The user will tap on one or more place on these images to “highlight” where he is experiencing pain. Please show at least one area highlighted/tapped in this screen.
- the FRONT of a human
- the BACK of a human
D. options to either tap “cancel” or “save.”
4d. TRAINING SESSION - HEALTH SURVEY - POST
- header area to contain:
— current page title - large, “How’d it go?”
- the content area to contain:
- show Diver card, but withOUT related buttons (just photo, name, Diver pin #)
FORM: Main content here is a form for entering health information - content is:
A. element for “How was the training session, overall?”
Options are (only one can be selected - show “not so good” as selected here):
- not so good
- normal
- awesome
B. element for “Any negative effect from your illness or general discomfort?”
Options are Yes / No (only one can be selected - show “no” as selected here)
- show options for (only one can be selected)
— under performed but completed set
— had to end training early (show as selected)
D. options to either tap “cancel” or “save.”
Target Audience
US located / English speaking college students (divers), college coaches and physicians.
Judging Criteria
- Completeness (design includes all required elements)
- Cohesiveness (how well all elements work together, as a set)
- Cleanliness (successfully engage users in a simple way / ease-of use)
- Modernness (how well your elements fit with the current IOS UI styles)
- UI Best Practice (how well your elements follow the IOS Human Interface Guide)
- Source File Best Practice (how well your PSD source files are labeled and organized)
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
Final Fixes
This will be handled in Round 3
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.