Challenge Summary
Welcome to TI Mobile Application Design Challenge.
We need your help to come up with fun concept design solutions for a mobile application (hybrid - iOS/Android) that will guide users through a storytelling experience, as well as gamifying the environment through achievements/cards unlocking. It should be fun and engaging! Jump in now.
Best of luck.
3. Profile Page/Settings
4. Story
5. Rewards
- Please provide a MarvelApp Presentation (see details below).
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)
1. Welcome Screen
2. Login/Register
3. Profile Page/Settings
4. Story
5. Rewards
- Please provide a MarvelApp Presentation (see details below).
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)
The goal of this competition is to come up with the look and feel of a hybrid mobile application.
The goal of the app is to take the users deeper into the "World of Thoroughbred Racing" through interactive storytelling in a gamified environment (achievements). User will interact with stories based on their location and choices.
Workflow
Application overall walkthrough: https://drive.google.com/open?id=0B1hQWnfwpYvrYVhCZDVKSWJxbnM
- User enters the application being able to select an experience/story to follow.
- User begins the experience through the gamified ecosystem, having defined start and end goals.
- User moves through stories that contain tokens/rewards for completion, along with instructions on how to move forward to a next location.
- When user finishes the last story, gets the reward and is prompted with a return to menu/home option.
Concept Design Goals
This application will allow the users to go deeper into the experience of the sport of horse racing - as opposed to the traditional marketing that racetracks have used of just trying to teach them the intricacies of how to bet. For racetracks, it will allow them to provide a more immersive experience for their guests through interactive storytelling, some of which will be presented based on geolocation (ie, at a particular racetrack, stallion farm, retirement farm, etc.) - and also give us the capability of follow up interactions after the guest has visited.
There are key features that are very important to us:
1. The ability to navigate easily between segments of a story / experience.
2. The ability to interact with user account info (history of stories completed, accomplishments, etc.).
3. Gamification environment. A fun, engaging, interactive ecosystem, allowing the user to unlock achievements.
We envision a clean design - preferably not flat, it should be playful but professional looking. In spite it’s playful, we DO NOT WANT to see game-like graphics. Instead, we’d still like to keep a serious look.
We do want to prioritize ease of navigation from a user experience standpoint. We don’t want anything that is complicated to learn or navigate.
Screens Requirements
Overall
- Show hover/active states for buttons, dropdowns, breadcrumbs, errors/success states, elements with interaction, etc.
- Please suggest how to organize this content and group them into screens, we are looking forward to see your unique proposals, be bold. The following screens orders are just initial suggestions but we think content could be organized in a different way, go for it!
1. Welcome Screen
Please show us a friendly onboarding strategy to explain the user what the different sections are about and how to use them. Maybe something like the Slack approach or welcome slides, we’re open to suggestions.
2. Login/Register
User should be able to login or register into the app through.
Login required data: email, password or facebook connection.
Registration required data: name, email, password or facebook connection.
3. Profile Page/Settings
User should be able to edit authentication information and social network connection (facebook). Editable data:
- Name.
- Email.
- Password.
- Profile picture (it could come from Facebook - if that’s the case, it wouldn’t be editable).
User should also be able to have a toggle for push notifications. Place a toggle with the following note: “Allow push notifications to receive news about third-party deals”.
Also design a push notification screen for sample purposes that read: “Free admission to Win Star Farm on your next visit.”.
4. Story
After registration/login, user should be presented with options to start a story/experience. The following features must be included in the experience process. Order and organization are up to suggestions, some of these could be possibly merged.
4.1 Location Selection
User chooses the location he/she would like to explore through story. It could be their current location (if they are at a racetrack / sponsored location) or of their own choosing if they are not at a geolocation. So there should be:
- Automatic geo-location confirmation (user should see current location and accept to continue there).
- Available list of locations:
-- A location can have N amount of stories (display that).
-- User can choose by geographic area (state - US).
-- User can choose by specific racetrack e.g. Keeneland Race Course, Win Star Farm, etc.
4.2 Story Selection
Once user chooses a location (or self-detected / confirmed), he/she can start a story/experience. User must be able to select a story, which contains (list, grid or any other approach):
- Title.
- Amount of parts (*a story has multiple parts to be completed).
- Available rewards (there could be from one to five rewards to collect per story).
- Keywords/tags.
There could be from one to 100 stories. Think of a way to arrange all this information nicely.
4.3. Browse Story
The stories within the app will be multipart stories (a series of chapters or progressions). Content could be a mixture of text, video, photos, etc. Upon completion of a part / segment of a story, the user will be prompted to engage with the next segment.
Design the following scenario assuming a two-parts story is being executed.
4.3.1. Story - page one:
- It should contain the story title, location, amount of parts/pages indicator and content.
- Content should be text and with embedded video (like a news/article page).
- Comments section. User can read and write comments about the story part.
- Action to continue with next part of the story/experience.
4.3.2. Story - page two:
- It should contain the story title, location, amount of parts/pages indicator and content.
- Content should be well formatted text only.
- Comments section. User can read and write comments about the story part.
- Action to finish with next part of the story/experience.
4.3.3. Story - completion page:
- It should contain the story title, location, amount of parts/pages indicator (No content).
- It should contain a prominent notification of the accomplishment.
- Provide an call to action method to collect reward.
- Display collected/earned reward (trading card).
User should be able to know which reward will get during the whole process.
5. Rewards
User can view the information related to the progress of stories as well as the rewards:
5.1. Completed stories
A completed story would contain the following information:
- Title.
- Current progress.
- Rewards.
5.2 Trading cards
User can unlock trading cards if he/she completes a story. On this section user is able to see a list or grid of accomplished cards. The look could be a badge or card shape, the image will be a photo (horse, race track, stadium, etc).
User can see which story belongs/relates to the earned cards.
User can add notes to each of his/her cards (add/edit note)
Branding Guidelines
- You are allowed to use the provided logo as part of the design.
- Follow logo colors for branding and styling. Exact RGB color codes are purple (3d006b), green (f78620), and orange (249c5e). You can also add some shades, whites, black.
- Main typography is Open Sans. You can follow that trend or suggest alternative approaches similar to this font as complimentary typography if needed.
- Keep things consistent. This means all graphic styles should work together.
References
Use this for reference only. DO NOT COPY anything.
Case » Wattpad application (storytelling features)
- Liked: Upon signup there is a screen where you can choose from possible stories - it's well designed.
- Liked: Ability of readers to leave comments within the context of the story (as aside comments on individual paragraphs).
- Disliked: Navigation within their stories is clunky.
Screen Specifications
- Mobile: 750px width. Height as much as needed.
- Make sure your work is in a vector format, for retina scaling and high fidelity.
MarvelApp Presentation
- Provide a MarvelApp presentation of your design to help us understand your design concept.
- Request a MarvelApp prototype from me (mahestro@copilots.topcoder.com) and/or Adroc (adroc@topcoder.com).
- Provide the MarvelApp shareable link in your notes during submission upload.
Stock Artwork (Illustrations, Icons, Photography) – Adobe Stock EXCLUSIVE
- Stock artwork is allowed for this challenge ONLY FROM the Adobe Stock site.
- Make sure to declare all your assets properly or you might fail screening.
Target User
Fans and patrons at Thoroughbred racetracks, farm tours, Thoroughbred auctions, etc.
Judging Criteria
- Interpretation of the user experience.
- Is the application visually appealing?
- Is the application easy to use?
- Are mobile-first considerations appropriately applied to the design concept?
- 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, Illustrator or Sketch. Layers should be named and well organized.
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.
We need your help to come up with fun concept design solutions for a mobile application (hybrid - iOS/Android) that will guide users through a storytelling experience, as well as gamifying the environment through achievements/cards unlocking. It should be fun and engaging! Jump in now.
Best of luck.
Round 1
Submit your design for a checkpoint feedback.3. Profile Page/Settings
4. Story
5. Rewards
- Please provide a MarvelApp Presentation (see details below).
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)
Round 2
Submit your final design plus checkpoint feedback (ALL VIEWS).1. Welcome Screen
2. Login/Register
3. Profile Page/Settings
4. Story
5. Rewards
- Please provide a MarvelApp Presentation (see details below).
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)
The goal of this competition is to come up with the look and feel of a hybrid mobile application.
The goal of the app is to take the users deeper into the "World of Thoroughbred Racing" through interactive storytelling in a gamified environment (achievements). User will interact with stories based on their location and choices.
Workflow
Application overall walkthrough: https://drive.google.com/open?id=0B1hQWnfwpYvrYVhCZDVKSWJxbnM
- User enters the application being able to select an experience/story to follow.
- User begins the experience through the gamified ecosystem, having defined start and end goals.
- User moves through stories that contain tokens/rewards for completion, along with instructions on how to move forward to a next location.
- When user finishes the last story, gets the reward and is prompted with a return to menu/home option.
Concept Design Goals
This application will allow the users to go deeper into the experience of the sport of horse racing - as opposed to the traditional marketing that racetracks have used of just trying to teach them the intricacies of how to bet. For racetracks, it will allow them to provide a more immersive experience for their guests through interactive storytelling, some of which will be presented based on geolocation (ie, at a particular racetrack, stallion farm, retirement farm, etc.) - and also give us the capability of follow up interactions after the guest has visited.
There are key features that are very important to us:
1. The ability to navigate easily between segments of a story / experience.
2. The ability to interact with user account info (history of stories completed, accomplishments, etc.).
3. Gamification environment. A fun, engaging, interactive ecosystem, allowing the user to unlock achievements.
We envision a clean design - preferably not flat, it should be playful but professional looking. In spite it’s playful, we DO NOT WANT to see game-like graphics. Instead, we’d still like to keep a serious look.
We do want to prioritize ease of navigation from a user experience standpoint. We don’t want anything that is complicated to learn or navigate.
Screens Requirements
Overall
- Show hover/active states for buttons, dropdowns, breadcrumbs, errors/success states, elements with interaction, etc.
- Please suggest how to organize this content and group them into screens, we are looking forward to see your unique proposals, be bold. The following screens orders are just initial suggestions but we think content could be organized in a different way, go for it!
1. Welcome Screen
Please show us a friendly onboarding strategy to explain the user what the different sections are about and how to use them. Maybe something like the Slack approach or welcome slides, we’re open to suggestions.
2. Login/Register
User should be able to login or register into the app through.
Login required data: email, password or facebook connection.
Registration required data: name, email, password or facebook connection.
3. Profile Page/Settings
User should be able to edit authentication information and social network connection (facebook). Editable data:
- Name.
- Email.
- Password.
- Profile picture (it could come from Facebook - if that’s the case, it wouldn’t be editable).
User should also be able to have a toggle for push notifications. Place a toggle with the following note: “Allow push notifications to receive news about third-party deals”.
Also design a push notification screen for sample purposes that read: “Free admission to Win Star Farm on your next visit.”.
4. Story
After registration/login, user should be presented with options to start a story/experience. The following features must be included in the experience process. Order and organization are up to suggestions, some of these could be possibly merged.
4.1 Location Selection
User chooses the location he/she would like to explore through story. It could be their current location (if they are at a racetrack / sponsored location) or of their own choosing if they are not at a geolocation. So there should be:
- Automatic geo-location confirmation (user should see current location and accept to continue there).
- Available list of locations:
-- A location can have N amount of stories (display that).
-- User can choose by geographic area (state - US).
-- User can choose by specific racetrack e.g. Keeneland Race Course, Win Star Farm, etc.
4.2 Story Selection
Once user chooses a location (or self-detected / confirmed), he/she can start a story/experience. User must be able to select a story, which contains (list, grid or any other approach):
- Title.
- Amount of parts (*a story has multiple parts to be completed).
- Available rewards (there could be from one to five rewards to collect per story).
- Keywords/tags.
There could be from one to 100 stories. Think of a way to arrange all this information nicely.
4.3. Browse Story
The stories within the app will be multipart stories (a series of chapters or progressions). Content could be a mixture of text, video, photos, etc. Upon completion of a part / segment of a story, the user will be prompted to engage with the next segment.
Design the following scenario assuming a two-parts story is being executed.
4.3.1. Story - page one:
- It should contain the story title, location, amount of parts/pages indicator and content.
- Content should be text and with embedded video (like a news/article page).
- Comments section. User can read and write comments about the story part.
- Action to continue with next part of the story/experience.
4.3.2. Story - page two:
- It should contain the story title, location, amount of parts/pages indicator and content.
- Content should be well formatted text only.
- Comments section. User can read and write comments about the story part.
- Action to finish with next part of the story/experience.
4.3.3. Story - completion page:
- It should contain the story title, location, amount of parts/pages indicator (No content).
- It should contain a prominent notification of the accomplishment.
- Provide an call to action method to collect reward.
- Display collected/earned reward (trading card).
User should be able to know which reward will get during the whole process.
5. Rewards
User can view the information related to the progress of stories as well as the rewards:
5.1. Completed stories
A completed story would contain the following information:
- Title.
- Current progress.
- Rewards.
5.2 Trading cards
User can unlock trading cards if he/she completes a story. On this section user is able to see a list or grid of accomplished cards. The look could be a badge or card shape, the image will be a photo (horse, race track, stadium, etc).
User can see which story belongs/relates to the earned cards.
User can add notes to each of his/her cards (add/edit note)
Branding Guidelines
- You are allowed to use the provided logo as part of the design.
- Follow logo colors for branding and styling. Exact RGB color codes are purple (3d006b), green (f78620), and orange (249c5e). You can also add some shades, whites, black.
- Main typography is Open Sans. You can follow that trend or suggest alternative approaches similar to this font as complimentary typography if needed.
- Keep things consistent. This means all graphic styles should work together.
References
Use this for reference only. DO NOT COPY anything.
Case » Wattpad application (storytelling features)
- Liked: Upon signup there is a screen where you can choose from possible stories - it's well designed.
- Liked: Ability of readers to leave comments within the context of the story (as aside comments on individual paragraphs).
- Disliked: Navigation within their stories is clunky.
Screen Specifications
- Mobile: 750px width. Height as much as needed.
- Make sure your work is in a vector format, for retina scaling and high fidelity.
MarvelApp Presentation
- Provide a MarvelApp presentation of your design to help us understand your design concept.
- Request a MarvelApp prototype from me (mahestro@copilots.topcoder.com) and/or Adroc (adroc@topcoder.com).
- Provide the MarvelApp shareable link in your notes during submission upload.
Stock Artwork (Illustrations, Icons, Photography) – Adobe Stock EXCLUSIVE
- Stock artwork is allowed for this challenge ONLY FROM the Adobe Stock site.
- Make sure to declare all your assets properly or you might fail screening.
Target User
Fans and patrons at Thoroughbred racetracks, farm tours, Thoroughbred auctions, etc.
Judging Criteria
- Interpretation of the user experience.
- Is the application visually appealing?
- Is the application easy to use?
- Are mobile-first considerations appropriately applied to the design concept?
- 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, Illustrator or Sketch. Layers should be named and well organized.
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.