USA Diving Team iOS iPad App Challenge Series - C1 - Mobile Style Guide - [Swiftoberfest]

Welcome to the USA Diving Team iPad App Challenge Series - C1 - Mobile Style Guide.

This is the first in a series of challenges to design and build an iPad application which will allow the USA Diving team to track 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.

The USA Diving team currently has no brand / style guidelines for mobile interface design. They are looking to our community to help us define this for them, as step one in a series of challenges to design this native iPad application.

The USA Diving team is new to the community and is excited to see what our designers can do.

Good luck on this challenge!

Round 1

Submit your initial style guide for Checkpoint Feedback:
There is only a single (1) screen required for this Style Guide challenge, but it has five (5) unique sections. For round 1, you must submit an early version of your screen which includes the following three (3) sections:
- COLOR SECTION.
- TYPOGRAPHY SECTION.
- FORM ELEMENTS SECTION.
- AND DESIGNER’S CHOICE OF ONE OF THESE TWO SECTIONS:
EITHER
- MISC ELEMENTS SECTION
OR
- ICONS SECTION 
- Notes.jpg: Please include any comments about your design for the Client.

Round 2

Your final Style Guide design, with all Checkpoint Feedback implemented and all required five (5) sections included.
- COLOR SECTION.
- TYPOGRAPHY SECTION.
- FORM ELEMENTS SECTION.
- MISC ELEMENTS SECTION.
- ICONS SECTION.
- 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).

Design Considerations:
- See http://medialoot.com/item/ui-style-guide-template/ for a great example of a basic style guide, for inspiration.
- Icons ARE REQUIRED for this challenge. You must include a separate AI source file or folder with vector versions of icons -  SVG versions of icons are considered a bonus by the customer!
- DO NOT use Artboards - Use a single PSD storyboard for all style guide elements.
- Please logically label all PSD layers AND group them logically AND name your groups logically! If you do not do so and win placement in the challenge, you will be required to do so in final fixes.
- Minimum touch target element size is 86px height and width for this design, but feel free to use larger sizes, where it makes sense. NOTE: Since 86px is unreasonable for tappable text / hyperlinks, make sure that any tappable text is NOT tiny and also has a good amount of padding above and below it.
- Please 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
- Please familiarize yourself with the USA Diving organization!: http://www.usadiving.org/.

Included Assets:
- Approved Splash and Diver PIN Entry screens (PNG & Source).
- USA Diving Logo.
- Rough Example of Olympic Dive Rating Chart.

Design Size:
- One (1) screen at 2048px wide at 72dpi (note that this is the same width as a retina ipad storyboard in landscape mode, so you can get a feel for the size of your elements within the device window). Height is open to designer (no requirement).
- Please include a single layer of #ffffff over all other layers, which reduced the overall size of the file.
- IMPORTANT: For icons included your PSD-based designs, please provide transparent vector (AI OR EPS or SVG) versions of the icons in your source folder (separate from your PSD files).

Required Screens:
There is ONE (1)  required screen for this challenge. The following five (5) style guide sections (and their related elements) are required to be included in your style guide:
1. COLOR SECTION:
- Note: For each one of the main colors, please show : RGB color code and at least 3  color blocks for versions of the same color  (full color, tint, pastel, etc). Chart colors only need one color block each.

Main Colors:
- Note: do not use the red from their logo for any of the main colors.
- Primary color (the blue -- #00099e-- from their logo for this)
- Secondary color (use some shade of “pool” blue, taken from pool or water photos, which works with their colors).
- Accent color (up to designer - note that this color may also be one of the chart colors, if you like - up to you).
- Shades of gray element (at least three: light, medium, dark - no black! You can include more than 3 if you like  - up to you).

Chart Colors:
- Positive data (shade of green that works with site).
- Neutral data (shade of orange / yellow / blue / etc that works with site).
- Negative data (use the red -- #f5002e --from their logo for this).

2. TYPOGRAPHY SECTION:
- Note: we will be using helvetica variants for all fonts, lightweight (thin) and normal weight are preferable for most. Bold should be used sparingly. Use size, font variants and oblique for hierarchy. Use #333 color for all standard text (hyperlink will be a different color).
- Heading 1
- Heading 2
- Heading 3
- Heading 4
- Heading 5
- Heading 6
- Body text (paragraph text with padding between lines of text defined and including one example of hyperlink text)

3. FORM ELEMENTS SECTION:
Buttons (6)
- Primary text button (style for primary action buttons on screen, example: Save).
- Secondary text button (style for secondary action buttons on screen, example: Cancel).
- Inactive text button (style for a button which is not yet active - example: user cannot hit “save” until he completes all form questions, so this button is inactive until the form is complete).
- Back button.
- Next button.
- 3 button sizes (examples of small / medium / large button sizes, with dimensions noted).

Pick lists / Single select (4)
- Closed pick list (drop select option element, before tap).
- Open pick list - none selected (drop select option element, after tap / showing some options to select from).
- Open pick list - one option selected (drop select option element, after tap / where user has tapped on a single option and there is a brief state change to selected option, before close).
- inactive pick list (where user is not allowed to select yet).

Radio / Checkbox (3)
- Radio button (two options - yes / no - where one is selected).
- Checkbox - unchecked (with related label text “Acme Option”).
- Checkbox - checked (with related label text “Acme Option”).

Text Input (4)
- Text input  - before input  (containing example text “you@gmail.com”).
- Text input  - after input  (where user has entered his personal email - use “jblack@gmail.com”).
- Text input - error state (where user has tried to login and data is incorrect).
- Textarea - with text (where user has entered some text - use some lorem ipsum here).

Search (2)
- Search element - before tap.
- Search element - after some text entry (use lorem).

Menu Multi-button, Single select (2)
- Menu / multi-button - none selected (this is a group of buttons which are combined into a single element. Only one button may be selected / active at one time. See any teehanlax ios8 template for an example of default IOS style for this - for your example, use these buttons:  1m, 3m, 5m, 7m, 10m).
- Menu / multi button - one button selected (for your example, show “1m” as selected).

Olympic Rating Chart Element
- See “Rating chart rough example.png” for how the customer envisions this element. Users will tap to rate their dives on a scale from 0-10, including ½ points, to simulate the olympic rating scale.. Example: I rate my dive a “4.5”. Note that the iPad will be locked in landscape mode, so you have quite a bit of room to work with (iPad landscape width will be 2048px, at 72dpi).
- Please visually differentiate between who and half points on the scale (you can do this in any way / do NOT need to follow the rough mock!)
- Please make sure that each one meets minimum touch target size AND that there is enough padding between each one, to make it easy to tap without hitting the next one!

4. MISC ELEMENTS SECTION
Alert Messages (include “x” to close)
- Admin message bar.
- Error alert message bar.
- Success message bar.

Popup Elements (include “x” to close)
- Standard modal.
- Tooltip message.

Media Elements
- Video element (tap to launch video player).
- Update profile picture placeholder  (where user has not yet added a profile photo, but sees a basic placeholder image and a related option to edit this / upload a new profile photo for this. Should be square!).

Diver Element
This is a special element single that contains:
— The diver’s profile picture placeholder (smaller size / fits here well)
— The diver’s name (use “Nicholas Superlongnamus”)
— The diver’s 5-digit PIN (use “12345”)
— Four (4)  options for related views:
NOTE: these can be shown as icons, text labels or both. If you use text, you can use something like these below - shortening the text labels is fine, if needed for space. Only ONE of these can be selected at a time (so show one as selected, so we can see the on/off states for this element):
——— Overall Performance.
——— Training Dives.
——— Competition Results.
——— Profile.

5. ICONS  SECTION:
- Menu (standard iOS menu icon).
- Home (or dashboard).
- Sync (update app data / sync with database).
- Logout.
- My profile.
- New diver (add a new diver to the team / create a profile for him/her).
- Training session (start a new training session).
- Dive stats (enter stats on a single dive performed during training).
- PRE health survey (complete a questionnaire about your health and wellbeing, BEFORE training session).
- POST health survey (complete a questionnaire about your health and wellbeing, AFTER training session).
- Send training data (send training session data worksheet to parent organization).
- Back to top (scroll back up to top of long page)
- “X” to close (for modals and other popups).

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
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.