Challenge Summary
Welcome to the Fortuna Sports Betting iOS Mobile Application. This challenge is focused on creating new design concepts/visual ideas for an iOS based Sportsbook betting mobile application that embraces iOS design guidelines and ideas around how the application could work based on iOS/iPhone interactions and features. We are looking for design concepts and ideas that will help us stand out from our competitor applications.
We currently do not have any formal requirements for this project. We have an existing design that you should treat as a "wireframe" (do not copy). We are looking for you to provide design concepts and click-paths. We want to focus on iOS interactions and creating a modern sport betting mobile application.
We are not looking for you to design the entire application - just focus on creating graphic design concepts.
Round 1
Fortuna Sports Betting iOS Mobile Application Initial Concepts Design for our review
Notes: Submit as much screen flow as you can to help us understand your design solutions
Round 2
Fortuna Sports Betting iOS Mobile Application Final Concept Design contains all required screens with updated checkpoint feedback
Challenge Requirements:
Fortuna is a Sports Betting Company. Fortuna would like to see what design concepts the TopCoder community can provide around designing an iOS native Sportsbook Betting Applicatoin.
Design Concept Goals:
- Research Sport Book Betting application - how can we improve our user experience?
- Research iOS design guidelines - design your screens to be a great iOS user experience
- Research iOS features and interations - what kind of cool ideas can we bring to to this application (using swipe, accelerometer, GPS etc)
- This application will be an iOS native application. Taking into account that it should allow for swipe, accelerometer, GPS, all the advantages that comes with the performance of native apps.
- The application should be easy to fun and ease to use.
- The application should look modern, iOS native design driven - do your research!
Competition
- Research competitor applications - we want to make sure we stand out/bring a better user experience!
References:
- Reference Link 1
- Reference Link 2
- Reference Link 3
- Reference Link 3
Screen Sizes:
- Mobile Standard Size: 320px x 480px
- Use shape format on your .psd so we not lose quality when resize into Retina version.
Branding Guidelines:
Primary Hex Color Theme:
#003448
#0383ba
#0ea2e6
#fcd667
#f2f2f2
- Fonts: Up to you (your the designer - what make sense?)
- Style: Clean and Professional
Concept Screens
Download attached iphone-screenshots.zip for wireframes
Notes:
- The Information/screens below explains out current sports betting mobile application
- For this challenge submission we are looking for a new iOS based design and we are only focused on the "Sportsbook" aspect (not all other betting types/aspectds)
- The current design is HTML based and is missing out on a lot of "modern and native" phone features
- Do not copy the provided screenshots/wireframes - these are meant as guidance
- We want to explore the Football (Soccer) and Horse Racing user click-paths
1. Landing Page
screenshot: 01-Landing-Page-Top-Bets-Tab.png
- This is the current landing page
- We are focused on Sportsbook betting for this application so everything should be geared towards sports (not other betting games)
- We want to explore the Football (soccer) and Horse Racing experiences
- What is the best navigation experience for users quickly getting in this Sportsbook application?
- What items might I want to see on my landing page? (based on ongoing bets or sports I would like to see)
- Tabs: What tabs or navigation items should we see? E
Banner/Advertising
- Most users do not click on main banners
- How can we integrate banners/adverstising?
- "Should we have a banner" for this application? and if not, how can it be replaced? Give us any suggestions
In-Play Tab
screenshot: 01-Landing-Page-In-Play-Tab.png & 01-Landing-Page-In-Play-Tab-Scrolled.png
- This tabs contains live events
- Content divided per markets, show different content placement
- Notice there’s much information displayed in this tab, like current active time, goal scores.
- Show View All to go to complete in-Play page
- How would this content be customized to the user?
Highlight Tab
screenshot: 01-Landing-Page-Highlights-Tab.png
- This tab contains highlights/news etc
2. Top Bets
screenshot: 03-Top-Bets-All.png
- Currently a user lands on this page after clicking view all
- How should a user get to their Top Bets?
- Each row will have bet information, with button that allow user to set the Bet
- Current Horse Racing Tab look (screenshot: 03-Top-Bets-All-Horse-Football.png)
- Current Football Tab look (screenshot: 03-Top-Bets-All-Horse-Racing.png)
3. In Play
screenshot: 04-In-Play.png
- This is the full page for In-Play, user can do live betting while matches are still active/live
- We really need a better experience for this
4. Details Bet
Football Type
screenshot: 05-Details-Football-1.png
- Currently when a user clicks the match name, there are various betting types
- Show us how this interaction could look/work in your concept - what is an engaging experience?
-- Headline Offers (screenshot: 05-Details-Football-2.png)
-- AnyTime DrawCast (screenshot: 05-Details-Football-3.png)
-- 5 Minutes Market (screenshot: 05-Details-Football-5-Minutes-Market.png)
-- Goal Scorer (screenshot: 05-Details-Football-Goal-Scorer.png). fyi: selected shirt indicate selected bet
-- Goal Time (screenshot: 05-Details-Football-Goal-Time.png)
-- Goals (screenshot: 05-Details-Football-Goals.png)
-- Other Markets (screenshot: 05-Details-Football-Others.png)
- Card (screenshot: 05-Details-Football-Scorer-Cards.png)
- Scorer & Corner (screenshot: 05-Details-Football-Scorer-Corners.png)
Horse Racing Type
screenshot: 05-Details-Horse-Racing.png
- Horse Racing has different details/layout
- You can see navigation for “Meetings”, “Next Off”, “Live Races”, “Specials” and “Antepost” (screenshot: 05-Details-Horse-Racing-Nav.png)
- Each row shows different Race Jersey based on actual racer
- User can set Bet by click on the Bet button
- Other markets user can set ()
- Next Races, when click the button there’s live streaming for current race with Time information
- Match Bet row expanded (screenshot: 05-Details-Horse-Racing-Match-Bets.png)
- Race Card row (screenshot: 05-Details-Horse-Racing-RaceCard.png)
- Other row bet type look (screenshot: 05-Details-Horse-Racing-Scrolled.png)
- When user access the match details, user see this page (screenshot: 05-Details-Horse-Racing-Details.png)
- There’s play button to view the video streaming
- When click Cartmel button (screenshot: 05-Details-Horse-Racing-Pick.png)
6. Bet Slip
screenshot: 06-Bet-Slip-Empty.png
- This feature should be easy to use
- This Bet Slip is currently accessed from the top right navigation
- There’s clear number information of user total bets
- Show how Bet Slip looks when empty
- Show how Bet Slip look after pick some bets (screenshot: 06-Bet-Slip-Filled.png & screenshot: 08-Bet-Slip-Filled-Scrolled.png)
- Notice there’s option to delete the bets and input the bets
- Show clear main action buttons for Place Bets
- Show different Bet flow for Football and Horse Racing
Important:
- Keep things consistent. This means all graphic styles should work together.
- All of the graphics should have a similar feel and general aesthetic appearance
Target User:
- Sportsbook Betting Mobile Users
Judging Criteria:
- How well you plan the user experience and capture your ideas visually
- Cleanliness of your graphics and design
- Your design should possible to build and make sense as a mobile application
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 design or graphics based on client 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.