BONUS: 5‌ CHECKPOINTS AWARDED WORTH ‌$100‌ EACH

Register
Submit a solution
The challenge is finished.

Challenge Summary

Welcome to Sky Zone - Jump Park Web Application UI Design Concepts Challenge 1. This challenge is focussed on creating a UI that will be used by the customer and employess of Skyzone. You are required to design the structure based off the flow idea provided for a web app that will be a multi use tool. 

This web application will have multiple page sections and will be used on multiple screen sizes.  Each section should be designed to run as independent applications.


DOUBLE your winning chance by participating in another Design Challenge for the same application:
We are running another challenge that is focusing in on the Configuration and Catalog portions for the same application, so you have double the chances to win!
Sky Zone - Jump Park Configuration and Catalog UI Design Concepts Challenge 2

Round 1

Submit your initial designs for Checkpoint Feedback

1) Navigation / Section Container for all screens
2) Time
3) Customer
4) Jumpers
5) Waivers


Feel free to add any other additional screens which are necessary to explain your concept.
Notes.jpg: Please note any comments about your design for the Client
Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)

Round 2

Your Final designs for all the required designs with all Checkpoint Feedback implemented.

1) Navigation / Section Container for all screens
2) Time
3) Customer
4) Jumpers
5) Waivers
6) Mechandise
7) Payment

Feel free to add any other additional screens which are necessary to explain your concept.
Notes.jpg: Please note any comments about your design for the Client
Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)


The purpose of this app is to allow a variety of user types to navigate through an experience at a Sky Zone jump park (trampoline). A user might be a customer, or it could be an employee. Depending on the user, we will expose or hide information depending on the user's needs.

Design Requirements:
- Minimal design look and feel
- Use light color tones. Less is more for this challenge. Clean and refreshing is preferred.
- Emphasis on usability. User need to be able to navigate this on touch enabled screens.. Keep this in mind when designing as we want users to not worry about accidental button clicks.
- Sections - The sections that relate to the navigation should run as independent applications. They may be used all together on a webpage, or independently on touch enabled devices. Keep in mind functional use as a stand alone area.

Color Palette
- We had provided a branding guidelines, please follow them
Note: If you decide to use the sz orange color, use it sparingly. We would prefer any color used to revolve around the blues, greys and whites.  If you choose to use the orange anywhere in the design make sure it is not a primary focus and only helps define or accent the action or tool.

Screen size: 
Screen sizes will vary (this design will need to account for a responsive multi-viewport experience. i.e. from small (7") to large screens (28").
- For this challenge, we would you to keep the resolution as 1920 x 1080px

Typography:
Sky Zone has a license to the use Proxima Nova font family for their native application.
Proxima Nova Regular, Proxima Nova Light and Proxima Nova Semibold
(Fonts are not supplied as the license prohibits from sharing it, so if you have these fonts please use them or else use a comparable font and we will change them as a part of final fixes)

About the Client
Reference skyzone.com for information about the company.

User Story:
To understand the purpose of the app, please go through the below description/flow..

Customer Example:
- A client may go to a park and have a touch screen enabled kiosk in front of them to purchase a pass into a jump park. 
- This user might attend with a family and would need to select an available activity (like “Open Jump”). They would then proceed to add people in their group to the jumper page. 

For example, their might be 2 adults and 2 children and all members will be joining a jumping activity. Therefore each member must be added as a jumper. Jumping activities have fees associated to them, and in this example we would have 4 paying jumpers. 
- When adding a jumper we must confirm that they have signed a waiver. 
- A waiver is a user agreement for each jumper so they know the park rules, risks, terms, etc. Adults must sign a waiver themselves. Children can be added to an adults waiver. Adults should each accept a waiver, so in this example we would need both adult jumpers to have accepted waivers and both children would need to go under an adult. 
- From here, a user can decide if they want to purchase any park merchandise. This screen isn’t mandatory for a user, however all jumpers must have socks. If all jumpers do not have socks, they can purchase some at this time. They can also purchase other items, like shirts, hats, sweaters, etc. 
- Finally, the user will need a payment screen. Payment can be made via Credit card or Cash. A ticket and receipt will be provided to the customer.

Employee Example: 
- Similar to a Customer Example, an employee may be at a register and have additional options available to them on the application. They will want to quickly help a customer purchase jump times and confirm everyone in the party has signed a waiver. They will take payment and provide tickets and receipts.  

Documents Provided:
- Mockups: Screen mockups to help you get started with your designs
- Branding Color Guidelines

Required Screens:
We need below screens in this challege...


1) Navigation / Section Container for all screens:
- Create a template section container that will be used by the following screens.
- This container will need to have a way to navigate to and from screens (previous and next).

- Touch screens is a priority design feature

2) Time:
Time has 3 parts, Date, Activity, and Time
- Date: Default will be a TODAY view. Selecting future dates should be fast and easy.
- Activity: A park can have multiple activities. Consider most parks will have a minimum of 6 activities, but could have more. These should be easy to read and visual to touch.
- Time: Once a time and activity is set. Users should be able to pick available times. Assume the minimum time of an activity is 1hr but users should be able to select multiple hours.

3) Customer:
Customers need 2 options New & Existing...they need to choose whether they are an existing or new customer.
- New: When they select new then we need to allow them to create a new customer profile with the park (we need to capture some minimum details "first name, last name, phone, email, address)
- Existing: If they select they are an existing user, then we need to provide a search tool to find their existing account and proceed to next step of adding a jumper!

4) Jumper:
Jumper may already have accounts with a park or need to register for a new one. This screen will show all the adults and children who are participating in the event activity.
- New Jumper: First Name, Last Name, Age, Email
- Existing: Search tool to find existing jumper and add them to this screen.
- A button or way to add jumpers to a list (you might have a party of people and want to sign up several people here)
- Does the jumper have socks? YES or NO (if they select no, then probably provide option to add a pair of socks to cart for a fee).
- An indicator to show if a user has a valid or invalid waiver - invalid indicates their agreement has expired and need to accept them again, inwhich case they need to visit the waiver's screen and accept the waiver terms (see below step)!

5) Waiver:
A waiver is a user agreement for each jumper so they know the park rules, risks, terms, etc. 
- A waiver will have multiple sections. After each section, the user must hit “Accept” and move to the next waiver section. Once finished with all sections. A user should “Accept and Submit” the waiver.
- Every jumper must have an up to date waiver. If not, they must sign a new one before participating in park activities.
- Provide an easy view on how to accept waiver for each of the jumpers..
- Make sure to display the name of the jumper for whom the waiver is being accepted.

6) Merchandise:
Each park will have merchandise to purchase..
- Easy way to continue without purchasing anything
- Choose Item categories (feel free to use similar categories like the below example)
- Choose Item subcategories
- Example could be: Clothing > Shirts & Sweaters > Shirt & Price > Size > Quantity
- Display of cart or running total of additions.
- Need a way to remove merchandise easily
- Also need a way to change quantities easily

7) Payment:
- Easy touch payment design. Credit and Cash options
- We are looking for your thoughts on what need to shown in this screen.
- Feel free to show your ideas

Target Audience:
- Customers and Park Owners/Managers of Skyzone

Judging Criteria:
- How well you plan the user experience and capture your ideas visually.
- Your design should possible to build and make sense as an application
- Cleanliness of your graphics and design

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.

How To Submit

  • New to Studio? ‌Learn how to compete here
  • Upload your submission in three parts (Learn more here). Your design should be finalized and should contain only a single design concept (do not include multiple designs in a single submission).
  • If your submission wins, your source files must be correct and “Final Fixes” (if applicable) must be completed before payment can be released.
  • You may submit as many times as you'd like during the submission phase, but only the number of files listed above in the Submission Limit that you rank the highest will be considered. You can change the order of your submissions at any time during the submission phase. If you make revisions to your design, please delete submissions you are replacing.

Winner Selection

Submissions are viewable to the client as they are entered into the challenge. Winners are selected by the client and are chosen solely at the client's discretion.

ELIGIBLE EVENTS:

2016 TopCoder(R) Open

Challenge links

Screening Scorecard

Submission format

Your Design Files:

  1. Look for instructions in this challenge regarding what files to provide.
  2. Place your submission files into a "Submission.zip" file.
  3. Place all of your source files into a "Source.zip" file.
  4. Declare your fonts, stock photos, and icons in a "Declaration.txt" file.
  5. Create a JPG preview file.
  6. Place the 4 files you just created into a single zip file. This will be what you upload.

Trouble formatting your submission or want to learn more? ‌Read the FAQ.

Fonts, Stock Photos, and Icons:

All fonts, stock photos, and icons within your design must be declared when you submit. DO NOT include any 3rd party files in your submission or source files. Read about the policy.

Screening:

All submissions are screened for eligibility before the challenge holder picks winners. Don't let your hard work go to waste. Learn more about how to  pass screening.

Challenge links

Questions? ‌Ask in the Challenge Discussion Forums.

Source files

  • Layered PSD files created in Adobe Photoshop or similar
  • AI files created in Adobe Illustrator or similar

You must include all source files with your submission.

Submission limit

5 submissions

ID: 30051303