Challenge Summary
Welcome to "AppXpress - Event Check In Tool Management Apps Design Challenge". In this challenge we are looking for the Studio Community to help us create look and feel for our apps that will be use in the field whenever we run a sport event for manage checkin process and monitoring the event condition. We are looking for creative, clean, professional and the best UI/UX possibility for this apps. Looking forward to see your participation in this challenge.
Round 1
Initial design for client review :
1. Event Listing Page (i.e. shows events that the client owns)
2. Event Dashboard (i.e. shows all participants for a specific event)
3. Registration Check In Modal (i.e. critical check in data and check in milestones)
Round 2
All requirements as stated in challenge details with client feedback applied
1. Event Listing Page (i.e. shows events that the client owns)
2. Event Dashboard (i.e. shows all participants for a specific event)
3. Registration Check In Modal (i.e. critical check in data and check in milestones)
4. Participant/Team Detail Page (i.e. shows details of registration record)
Background Overview
Our company provides online registration services for any fitness (i.e. 5Ks, triathlon, CrossFit), adventure (orienteering, wilderness survival), etc, events. End users register for these sport events via our online platform, then their registration data is passed to our clients. The day of the event run, our clients will use the registration data to check in participants, provide them with their race bib, event swag, etc.
The ultimate goal that we want to accomplish in this app is to provide our clients with a check in tool that can be used at their events to verify critical information about participants and confirm key steps in the check in process. The application should also provide graphical indicators to the client so they know how the event check in is progressing.
Ideally the design will include the following:
1. Event Listing Page (i.e. shows events that the client owns)
2. Event Dashboard (i.e. shows all participants for a specific event)
3. Registration Check In Modal (i.e. critical check in data and check in milestones)
4. Participant/Team Detail Page (i.e. shows details of registration record)
Challenge Goals
The users of this application will be event managers. Imagine the following scenario. A client is hosting a local 5K running event and has used our services for online registration. On race morning the client has 100+ runner show up to get their race bib, event t-shirt, swag bag, etc. Historically the client used spreadsheets to find the runner, verify their information, and check them off the list. This is a tedious and manual process for clients. We are looking to correct this issue with this application.
Main Features on the Apps:
1. Check in participants
2. View event check in progress
3. Search for participants
4. Add new participants
User Flow
- User logs into Salesforce1 platform (out of scope)
- User selects 'Event Check In' menu option (out of scope)
- User is presented with a list of their events
- User selects an event to open the event dashboard
- User is presented with a dashboard showing participants for the individual event
- User can search for participants from the dashboard
- User can filter participants from the dashboard
- User can check in participants from the dashboard
- User can add new participants from the dashboard
- User can click on an individual participant to see full registration details for that participant
- If User clicks check in option the are presented with a modal that shows critical data and milestone (i.e. ID verified, waiver signed, etc.) for the check in process
- User can view overall event check in progress graphically on the dashboard
Design Consideration:
- Design Size :
* iPhone : 750px x 1334px
* iPad : 1536px x 2048px
- Modern clean mobile/application design.
- Please make sure your UI elements are created in vectors/shape, so it can be easily edited later for some smaller/bigger devices.
- Here is a rough concept for a similar app (https://www.youtube.com/watch?v=-59KFonmiVg). Please DO NOT replicate this exact app. It should only be used to provide a frame of reference to the concept.
Branding Guidelines:
- Reference the general design on our website http://www.3dayweekend.com
- We are very open to a more modern app that incorporates aspects of our website
- Please ensure that we do not simply replicate the styles of the website
- We've attached a PSD for our logo (https://www.dropbox.com/sh/fftrn6q3w9pshuo/AADQgQJ6DG3cjIgQdTs8euJRa?dl=0)
- We've provide a link to a PSD for the website design
- Design Orientation : Up to designers.
Screen Requirements :
Please create the following screens in your submission :
1. Event Listing Page (iPhone Only)
- Before able to use the apps, user gonna need to login to salesforce platform first (out of scope for this challenge)
- After successfull login, user will be redirected to this page.
- This page will shows all events that the user owns.
- User will be able to see all their events list so that they can select which event they want to check participants in to.
- User will be able to select an event from their events list and load/navigate to the event dashboard.
- Please create the best UI/UX for this screen.
2. Event Detail Dashboard (iPhone and iPad)
- This page will shows all informations available (participants, timeline, event monitoring) for a specific event
- The dashboard needs to contains :
* a list of event participants,
* search functionality,
* add new participant option,
* check in status filter,
* registration type filter,
* pagination,
* individual participant check in option,
* and an overall event check in progress indicator.
- User need to be able search for participants from the event dashboard.
- Please provide a list of all participants on the dashboard to include :
* first name,
* last name,
* team name,
* registration number,
* check in status,
* and action icons (i.e. check in, view details, etc.).
- User needs to be able to sort the participant list by the column headers.
- User needs to be able to filter the participant list by their check in status.
- User needs to be able to filter the participant list by their registration type (i.e. individual, team, volunteer, spectator, etc.)
- User needs to be able to add a new participant to the list.
- User needs to be able to click on a participant to view their detailed registration record.
- User needs to be able to see overall event check in progress indicators on the dashboard.
- Please create the best UI/UX for this screen.
3. Registration Check In Modal (iPhone and iPad)
- critical check in data and check in milestones
- User needs to be able to initiate a check in process for each participant which loads a modal or new page contains critical information (i.e. first name, last name, picture, affiliations, t-shirt size, etc.) and check in milestones (i.e. waiver signed, ID verified, etc.)
- User needs to be able to complete the check in progress in order to check in a participant
- Please create the best UI/UX for this screen.
4. Participant/Team Detail Page (iPhone Only)
- This page will shows details of registration record based on individual or Team.
- Show detail informations related to the participants in this page (individual profile, track record, registration status/number, etc)
- Profile pictures?
- History of previous event that the participants joined.
- Please create the best UI/UX for this screen.
Important:
- Keep things consistent. This means all graphic styles should work together and follow iOS best practice.
- All of the graphics should have a similar feel and general aesthetic appearance.
- Feel free to add new screen to explain your design interactions for the apps.
Documentation
- https://www.dropbox.com/sh/fftrn6q3w9pshuo/AADQgQJ6DG3cjIgQdTs8euJRa?dl=0 (contains of all branding guidelines needed for this challenge)
Target User
- Event Manager that running sport events, specifically in the registration counter when the event runs!
Judging Criteria
- How well you plan the user experience and capture your ideas visually
- How well you design the mobile application concept!
- Cleanliness of your graphics and design
- Creativity and ease-of-use is key to the success as it must be engaging to users.
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.