Challenge Summary
Welcome to Ten4Sports Responsive Website Concept Design Challenge.
We are happy to introduce this interesting website that will help sports fans to make donations to their favorite sports teams (schools). The concept has interesting guidelines to follow and consider in your design solution. We are interested in seeing how engaging and fun you can make this for users.
Best of luck.
1. Home page (Desktop and Phone)
2. Team home page (Desktop and Phone)
3. Team support (Desktop)
5. My Page (Desktop)
- Please provide a MarvelApp Presentation (see details below).
- Make sure all pages have the correct flow! Use correct file numbering. (00, 01, 02, 03).
1. Home page (Desktop and Phone)
2. Team home page (Desktop and Phone)
3. Team support (Desktop and Phone)
4. Team list (Desktop and Phone)
5. My Page (Desktop and Phone)
6. Personal/payment information (Desktop and Phone)
- Please provide a MarvelApp Presentation (see details below).
- Make sure all pages have the correct flow! Use correct file numbering. (00, 01, 02, 03).
The goal of this challenge is to design the look and feel of a responsive website (mobile and desktop) that will be used to engage fans in supporting their team(s) for almost any collegiate sports by making small donations per win. The app should be fun, intuitive and very engaging and easy to use.
Background
Just as some political campaigns have been funded by many donors providing small contributions, ten4sports provides a way for an Athletic Association to engage fans that are not able to make large, significant donations - and likely not contributing to the Athletic Association in any way.
The purpose of ten4sports application is to engage previously unengaged fans with their chosen alma mater or favorite college sports by providing them with an inexpensive route to support the program when they win games.
Essentially, ten4sports allows fans to support a team/sport by contributing small dollar amounts per win. The minimum amount is $10/win, however, the fan can choose precisely how much per win they are willing to contribute.
How we approach our audience
We will be leveraging alumni associations, athletic associations and other school related resources to advertise and drive fans to the website.
Why teams need donations
College athletics are currently in an arms race for recruiting talent, building facilities, etc. Some of the largest athletic associations have budgets of greater than $200M per year. Most athletic associations only receive contributions from a fraction of their fans because they target the ultra-rich alum. This is a way to engage and get small contributions from a much wider group of fans/supporters.
Why fans donate
Most fans make contributions as a show of support so that their Athletic Association can build new facilities, offer more scholarships, etc.
Concept Design Goals
We are in a concept stage at this moment, we look forward to receiving a very cool/fun visual experience that allows us showcasing the capabilities of the platform (website) to athletic associations for validation purposes. Data is pretty much open to suggestions, we’re leaving this open context in order for you to suggest what information will be useful to display to the users.
Our top priorities are:
- Easy to use and very intuitive.
- Easily find your school and ultimately make it as few of steps as possible to support multiple teams from the same school, or even potentially multiple schools.
- It should offer a streamlined process for me to support the football, basketball and baseball teams from georgia tech, for instance. At the same time, showing the appropriate information, such as expected amount of total contribution over a season, etc.
- Instead of boring single long form pages, we want the process to be simple, few steps and almost wizard driven.
Visitor Workflow (“Fan”)
The following describes the success path of a visitor who lands in the website.
- A fan either comes to www.ten4sports.com and selects the team they want to support, or they are driven to a custom domain/branded website (e.g. gatech.ten4.io).
- They will be able to select what sport(s) (e.g. football, basketball, women’s basketball, baseball, softball, etc) they would like to support and associate a contribution per win.
- Allow them to see what their “to date” contributions have been, as well as projected contributions.
- Change/add/update contributions.
- Eventually, have ten4sports be a destination for sports news, specifically around the teams they’re supporting.
Screens Requirements
Overall
- Show hover/active states for buttons, dropdowns, breadcrumbs, errors/success states, elements with interaction, etc.
- See sitemap to provide navigation that makes sense across the pages.
1. Home page (Desktop and Phone)
See home mockup for reference.
Considerations:
- When coming to the website, this will be the main landing page. It will include verbiage about ten4, a video and the logos for each of the schools that participate in the ten4 program. It should allow jumping to a school page (imagine an easy way to find my school - logo wall, big search that types ahead, etc).
- Each logo will hyperlink to the individual Team Home Page (below). At scale, this may ultimately be a rotating list of logos, as all of the schools we work with may not be able to be presented. In that case, there would need to be a link to the Team List page.
- Additionally, this will include a standard header and menu bar, as well as a footer.
2. Team home page (Desktop and Phone)
See team home page mockup for reference.
Considerations:
- This page is meant as a team-specific home page that can be leveraged by the individual schools in marketing collateral and website links.
- In addition to standard information about ten4, there will be team-specific verbiage, which could include where the money goes/is used within the athletic department; whether or not it goes directly to the team you support or to the general fund; etc.
- There should be a “Support” button that will take the user to the Team Support page.
- This page can also be custom-branded to meet the brand guidelines for each school. Header and footer from the main home page should remain the same (layout wise) in order to offer a cohesive experience among different schools. However, a team home page should be allowed to customize their logo and colors. Make sure to display a unique branding for this page in the mentioned guidelines.
- Open to suggestions about the information we can display to engage fans. Maybe would be helpful to place some sort of previews of most supported teams, latest donations, etc? Maybe it could tell you how many other people are supporting that football team or even the total contributions per win. Information like that to help fans feel a part of the team and fan base will be helpful.
3. Team support (Desktop and Phone)
See team support mockup for reference.
Considerations:
- This is the page where the user is able to select the sports they wish to support, how much per win they’d like to contribute and confirm how much “exposure” they have.
- Upon selecting a sport, the user will be able to input how much per win they would like to contribute. Additional information, like # of games, averages wins over the last two seasons, etc will help inform them around how much potential exposure they over the course of the coming season.
- The user can select as many teams to support as are available and associate a different “per win” amount for each sport.
- The user will be able to “true-up” by selecting a box for each sport. True-up allows the user to contribute the full contribution to the school after all fees are taken out. Assume total fees, including credit card processing, are 13%. Under the situation where they select not to “true-up”, their $20 per win contribution will result in a $17.40 contribution to the athletic department; if they choose to true-up, their “per win” contribution will be increased to $22.99, which results in the full $20 contribution going to the athletic department.
- Upon selecting submit, a pop-up box with some terms and conditions, as well as confirmation of amount “exposure” (max amount they could be contributing), will be presented.
4. Team list (Desktop and Phone)
This page holds the full list of available schools and their teams.
There should be considerations for a massive amount of items to be listed (asumme from 50 to 100). Provide mechanisms such as pagination and search to improve the user experience.
Each item/logo would take the user to the appropriate Team Support page.
5. My Page (Desktop and Phone)
Think of this page as the typical “My Profile” or a dashboard page.
The user would be able to see results/transactions to date. Win/loss, contribution, maybe even some type of information pertaining to how much support for their school/team has been provided through this platform.
The user can see/update their personal information, amount of support, add/delete school/sports support.
Note about amount of support; it’s the same as exposure mentioned above. Example: the typical college football team plays 12 games, so if the user is contributing $20/win, her max exposure is $240, but it is highly unlikely the team goes undefeated. So, her actual likely exposure may be 8 wins x $20 = $160 because we know the team has averaged 8 wins over the last few seasons.
6. Personal/payment information (Desktop and Phone)
This page manages data about the user profile and payment information.
Information
This page will collect the personal information about the supporter, including, but not limited to:
- First Name
- Last Name
- Address
- Phone
- Email
- Password for Account
- School Affiliation (dropdown)
- Birthday
This may be the appropriate point for the final terms and conditions, confirmation they’ll receive our newsletter/updates and confirmation of “exposure” to be presented, allowing them one last chance to confirm all of those details.
On the final confirmation, there should be a way for them to post to their social networks saying “I’m supporting Georgia Tech on ten4! You should too. <link>” - They should be able to post to Facebook, Instagram, Twitter, LinkedIn and others.
Lastly, there should an opportunity for them to support another school, which would either present them a drop-down list or take them to the Team List page.
Payment
On this page, the user will input credit card information.
Branding Guidelines
- Typography and colors open to suggestions as long as they are in line with the design goals.
- We don’t have a logo. We're looking forward to seeing some draft concepts we could possibly use as a logo in the future.
References
We want the site to have a “sports” vibe, visually speaking. This link can represent this vibe is: http://www.ebizmba.com/articles/sports-websites - Use it for inspiration. DO NOT COPY anything.
Screen Specifications
- Desktop: 1366px width. Height as much as needed.
- 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
- Request a MarvelApp prototype from me using this link: https://tc-marvel-app.herokuapp.com/challenge/30083524
- Do not use the forums to request for MarvelApp.
- Provide clickable spots (hotzones) to link your screens and showcase the flow of the solution.
- Provide the MarvelApp shareable link in your notes during submission upload. See example.
Stock Artwork (Illustrations, Icons, Photography)
- Stock artwork is allowed for this challenge.
- Make sure to declare all your assets properly or you might fail screening.
- You don’t want to fail screening? Read this.
Target User
- The almost 1,000 college sport programs (D1, D2 and D3); of which ~ 540 have football programs. We believe college football will be the bulk of our revenue and sport through which we engage with fans, however, we can accommodate almost any sport that has a definitive win/loss.
- The millions of fans of these colleges and their sporting programs.
Data Inspiration
For your information, you can use the following links as a reference to analyze the data and information you might want to add or considerate as useful for the user. No need to overcomplicate things with a massive amount of data, keep in mind the fun and simplistic engagement for the fans.
Example of school
Georgia Tech is a school and information about their athletic program can be found here: https://en.wikipedia.org/wiki/List_of_college_athletic_programs_in_Georgia_(U.S._state)
On that page is a list of all the sports they play.
Example of schedules
Here is their football schedule (starts in August): https://ramblinwreck.com/sports/m-footbl/schedule/
Here is their basketball schedule (currently underway): https://ramblinwreck.com/sports/m-baskbl/schedule/
Judging Criteria
- How well you plan the user experience and capture your ideas visually.
- Are mobile-first principles properly applied to your solution?
- How well you implement the challenge requirements. Note you would need to implement all required functionalities and items as written in the spec.
- Cleanliness of your graphics and design.
- Creativity and ease-of-use is key to 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, Adobe XD 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 are happy to introduce this interesting website that will help sports fans to make donations to their favorite sports teams (schools). The concept has interesting guidelines to follow and consider in your design solution. We are interested in seeing how engaging and fun you can make this for users.
Best of luck.
Round 1
Submit your design for checkpoint feedback.1. Home page (Desktop and Phone)
2. Team home page (Desktop and Phone)
3. Team support (Desktop)
5. My Page (Desktop)
- Please provide a MarvelApp Presentation (see details below).
- Make sure all pages have the correct flow! Use correct file numbering. (00, 01, 02, 03).
Round 2
Submit your final design plus checkpoint feedback.1. Home page (Desktop and Phone)
2. Team home page (Desktop and Phone)
3. Team support (Desktop and Phone)
4. Team list (Desktop and Phone)
5. My Page (Desktop and Phone)
6. Personal/payment information (Desktop and Phone)
- Please provide a MarvelApp Presentation (see details below).
- Make sure all pages have the correct flow! Use correct file numbering. (00, 01, 02, 03).
The goal of this challenge is to design the look and feel of a responsive website (mobile and desktop) that will be used to engage fans in supporting their team(s) for almost any collegiate sports by making small donations per win. The app should be fun, intuitive and very engaging and easy to use.
Background
Just as some political campaigns have been funded by many donors providing small contributions, ten4sports provides a way for an Athletic Association to engage fans that are not able to make large, significant donations - and likely not contributing to the Athletic Association in any way.
The purpose of ten4sports application is to engage previously unengaged fans with their chosen alma mater or favorite college sports by providing them with an inexpensive route to support the program when they win games.
Essentially, ten4sports allows fans to support a team/sport by contributing small dollar amounts per win. The minimum amount is $10/win, however, the fan can choose precisely how much per win they are willing to contribute.
How we approach our audience
We will be leveraging alumni associations, athletic associations and other school related resources to advertise and drive fans to the website.
Why teams need donations
College athletics are currently in an arms race for recruiting talent, building facilities, etc. Some of the largest athletic associations have budgets of greater than $200M per year. Most athletic associations only receive contributions from a fraction of their fans because they target the ultra-rich alum. This is a way to engage and get small contributions from a much wider group of fans/supporters.
Why fans donate
Most fans make contributions as a show of support so that their Athletic Association can build new facilities, offer more scholarships, etc.
Concept Design Goals
We are in a concept stage at this moment, we look forward to receiving a very cool/fun visual experience that allows us showcasing the capabilities of the platform (website) to athletic associations for validation purposes. Data is pretty much open to suggestions, we’re leaving this open context in order for you to suggest what information will be useful to display to the users.
Our top priorities are:
- Easy to use and very intuitive.
- Easily find your school and ultimately make it as few of steps as possible to support multiple teams from the same school, or even potentially multiple schools.
- It should offer a streamlined process for me to support the football, basketball and baseball teams from georgia tech, for instance. At the same time, showing the appropriate information, such as expected amount of total contribution over a season, etc.
- Instead of boring single long form pages, we want the process to be simple, few steps and almost wizard driven.
Visitor Workflow (“Fan”)
The following describes the success path of a visitor who lands in the website.
- A fan either comes to www.ten4sports.com and selects the team they want to support, or they are driven to a custom domain/branded website (e.g. gatech.ten4.io).
- They will be able to select what sport(s) (e.g. football, basketball, women’s basketball, baseball, softball, etc) they would like to support and associate a contribution per win.
- Allow them to see what their “to date” contributions have been, as well as projected contributions.
- Change/add/update contributions.
- Eventually, have ten4sports be a destination for sports news, specifically around the teams they’re supporting.
Screens Requirements
Overall
- Show hover/active states for buttons, dropdowns, breadcrumbs, errors/success states, elements with interaction, etc.
- See sitemap to provide navigation that makes sense across the pages.
1. Home page (Desktop and Phone)
See home mockup for reference.
Considerations:
- When coming to the website, this will be the main landing page. It will include verbiage about ten4, a video and the logos for each of the schools that participate in the ten4 program. It should allow jumping to a school page (imagine an easy way to find my school - logo wall, big search that types ahead, etc).
- Each logo will hyperlink to the individual Team Home Page (below). At scale, this may ultimately be a rotating list of logos, as all of the schools we work with may not be able to be presented. In that case, there would need to be a link to the Team List page.
- Additionally, this will include a standard header and menu bar, as well as a footer.
2. Team home page (Desktop and Phone)
See team home page mockup for reference.
Considerations:
- This page is meant as a team-specific home page that can be leveraged by the individual schools in marketing collateral and website links.
- In addition to standard information about ten4, there will be team-specific verbiage, which could include where the money goes/is used within the athletic department; whether or not it goes directly to the team you support or to the general fund; etc.
- There should be a “Support” button that will take the user to the Team Support page.
- This page can also be custom-branded to meet the brand guidelines for each school. Header and footer from the main home page should remain the same (layout wise) in order to offer a cohesive experience among different schools. However, a team home page should be allowed to customize their logo and colors. Make sure to display a unique branding for this page in the mentioned guidelines.
- Open to suggestions about the information we can display to engage fans. Maybe would be helpful to place some sort of previews of most supported teams, latest donations, etc? Maybe it could tell you how many other people are supporting that football team or even the total contributions per win. Information like that to help fans feel a part of the team and fan base will be helpful.
3. Team support (Desktop and Phone)
See team support mockup for reference.
Considerations:
- This is the page where the user is able to select the sports they wish to support, how much per win they’d like to contribute and confirm how much “exposure” they have.
- Upon selecting a sport, the user will be able to input how much per win they would like to contribute. Additional information, like # of games, averages wins over the last two seasons, etc will help inform them around how much potential exposure they over the course of the coming season.
- The user can select as many teams to support as are available and associate a different “per win” amount for each sport.
- The user will be able to “true-up” by selecting a box for each sport. True-up allows the user to contribute the full contribution to the school after all fees are taken out. Assume total fees, including credit card processing, are 13%. Under the situation where they select not to “true-up”, their $20 per win contribution will result in a $17.40 contribution to the athletic department; if they choose to true-up, their “per win” contribution will be increased to $22.99, which results in the full $20 contribution going to the athletic department.
- Upon selecting submit, a pop-up box with some terms and conditions, as well as confirmation of amount “exposure” (max amount they could be contributing), will be presented.
4. Team list (Desktop and Phone)
This page holds the full list of available schools and their teams.
There should be considerations for a massive amount of items to be listed (asumme from 50 to 100). Provide mechanisms such as pagination and search to improve the user experience.
Each item/logo would take the user to the appropriate Team Support page.
5. My Page (Desktop and Phone)
Think of this page as the typical “My Profile” or a dashboard page.
The user would be able to see results/transactions to date. Win/loss, contribution, maybe even some type of information pertaining to how much support for their school/team has been provided through this platform.
The user can see/update their personal information, amount of support, add/delete school/sports support.
Note about amount of support; it’s the same as exposure mentioned above. Example: the typical college football team plays 12 games, so if the user is contributing $20/win, her max exposure is $240, but it is highly unlikely the team goes undefeated. So, her actual likely exposure may be 8 wins x $20 = $160 because we know the team has averaged 8 wins over the last few seasons.
6. Personal/payment information (Desktop and Phone)
This page manages data about the user profile and payment information.
Information
This page will collect the personal information about the supporter, including, but not limited to:
- First Name
- Last Name
- Address
- Phone
- Password for Account
- School Affiliation (dropdown)
- Birthday
This may be the appropriate point for the final terms and conditions, confirmation they’ll receive our newsletter/updates and confirmation of “exposure” to be presented, allowing them one last chance to confirm all of those details.
On the final confirmation, there should be a way for them to post to their social networks saying “I’m supporting Georgia Tech on ten4! You should too. <link>” - They should be able to post to Facebook, Instagram, Twitter, LinkedIn and others.
Lastly, there should an opportunity for them to support another school, which would either present them a drop-down list or take them to the Team List page.
Payment
On this page, the user will input credit card information.
Branding Guidelines
- Typography and colors open to suggestions as long as they are in line with the design goals.
- We don’t have a logo. We're looking forward to seeing some draft concepts we could possibly use as a logo in the future.
References
We want the site to have a “sports” vibe, visually speaking. This link can represent this vibe is: http://www.ebizmba.com/articles/sports-websites - Use it for inspiration. DO NOT COPY anything.
Screen Specifications
- Desktop: 1366px width. Height as much as needed.
- 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
- Request a MarvelApp prototype from me using this link: https://tc-marvel-app.herokuapp.com/challenge/30083524
- Do not use the forums to request for MarvelApp.
- Provide clickable spots (hotzones) to link your screens and showcase the flow of the solution.
- Provide the MarvelApp shareable link in your notes during submission upload. See example.
Stock Artwork (Illustrations, Icons, Photography)
- Stock artwork is allowed for this challenge.
- Make sure to declare all your assets properly or you might fail screening.
- You don’t want to fail screening? Read this.
Target User
- The almost 1,000 college sport programs (D1, D2 and D3); of which ~ 540 have football programs. We believe college football will be the bulk of our revenue and sport through which we engage with fans, however, we can accommodate almost any sport that has a definitive win/loss.
- The millions of fans of these colleges and their sporting programs.
Data Inspiration
For your information, you can use the following links as a reference to analyze the data and information you might want to add or considerate as useful for the user. No need to overcomplicate things with a massive amount of data, keep in mind the fun and simplistic engagement for the fans.
Example of school
Georgia Tech is a school and information about their athletic program can be found here: https://en.wikipedia.org/wiki/List_of_college_athletic_programs_in_Georgia_(U.S._state)
On that page is a list of all the sports they play.
Example of schedules
Here is their football schedule (starts in August): https://ramblinwreck.com/sports/m-footbl/schedule/
Here is their basketball schedule (currently underway): https://ramblinwreck.com/sports/m-baskbl/schedule/
Judging Criteria
- How well you plan the user experience and capture your ideas visually.
- Are mobile-first principles properly applied to your solution?
- How well you implement the challenge requirements. Note you would need to implement all required functionalities and items as written in the spec.
- Cleanliness of your graphics and design.
- Creativity and ease-of-use is key to 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, Adobe XD 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.