2. 2
Task
To redesign the live page for Marathonbet. Live page:
https://beta.marathonbet.co.uk/en/live and
https://mobile.marathonbet.co.uk/#/en/live
Overview
Brand Attributes:
1. Sports,Gaming,Online gaming,Gambling,Money, Football, Premier
League ,
2. Marathonbet CEO Stan Reoutt comments:
“Recently, Marathonbet has made great strides towards being at the
forefront of football betting and this partnership cements our aims as a
brand.
User Profiles
Persona 1
Profile one - The Football fan
Name : Ben
Age :36
Work: Maths Teacher
Why use Marathon: I like to keep up football on the move and when i
get free time.
3. 3
Persona 2
Profile two - The sports Fan
Name : Sarah
Age :31
Work: Bus driver
Why use Marathon: I like all sports I am a big sports fan I use the site
to keep up to date with events and plan which ones to go to, I place a
bet now and then .
Persona 3
Profile three - The Gamer
Name : David
Age :30
Work: UX designer
Why use Marathon: I like the games, I am a big sports fan I keep up
today and places bets now and then.
4. 4
Goals
I am redesigning the live page, so the goal here is to make the
following
1. The informaion has to be clear and to the point.
2. The layout of information has to be straight forward
3. The information layout has to be engaging.
Market
Online gaming
Step 1. Research Site / Site Audit
As my work within UX design and web design covers all markets I find
it very useful to research in to the market I am designing and
developing for I need to understand the experience end users are
having at this. This research will enable me to build a better a
experience, in regards to .layouts, colours and information shown.
11. 11
Header
Information: User call to action, loging join up, support, settings ,
services
Footer
Infomation :Partnerships , Security, Regulations, E-commerce user
support.
12. 12
Mobile display.
1 2 3
Visual structure of the live page for mobile has the same design for the
desktop. Grid system here is based on three column.Header and
Footer .
Again colours are the same as the Desktop.
However due to the nature of mobile devices Information that is
key/priorty to the end user is only shown, up front and alternatively,
information/content that is not essential has been that placed in less
prominent locations. All infomation has been broken down into smaller
text chunks
13. 13
Research other websites in the makert space.
From running a Goolge search I found a report on September 16,
2015 by Leon Marshal. Titled “Helping you find the Top Betting Sites in
the UK”
http://www.bestbettingsites.co.uk/
Most end users, use the above websites to place a bet. I will
undertake more research in regards to how the following information
is displayed on they live pages :
Layouts-colours -information shown- scores- time-prices -teams -
leagues (for at least one sport for this redesign).On Desktop , Tablet
and Mobile display.
14. 14
I have chosen to research in to three sites that I can get access to the
live page.
1. 888
2. Paddypower
3. BetVictor
Findings from 888
Layouts: The visual structure of the live page. Grid system here is
based on three column, again Header and Footer .
Colours
Black, orange green gray. (for this task the coloure is not key, as the
redesign will keep to the brand colours)
Information shown.
15. 15
slide menu function - min casino
Column 1&2 - scores- time-prices -teams - leagues
Column 3 - Social media / images used
Findings from Paddypower
Layouts: The visual structure of the live page. Grid system here is
based on three column, again Header and Footer .
Colours- Green , white , blue (for this task the coloure is not key, as
the redesign will keep to the brand colours)
Column 1&2 - scores- time-prices -teams - leagues- Calendar.
Column 3 : Live stream, bet slip
Findings from BetVictor
Layout: The visual structure of the live page. Grid system here is
based on three column, again Header and Footer .
Colours: blue , white , green (for this task the coloure is not key, as the
redesign will keep to the brand colours)
information shown:
Column 1&2 - scores- time-prices -teams - leagues- Calendar.
Column 3 : Social media / images used , bet slip
Sports images used next to sports name in column 1
16. 16
Over all findings
Across all the top betting websites the layout is set on three columns.
All use column 1&2 to display scores- time-prices -teams - leagues.
All use header for users to sign up , login.
All use footers to display infomation in regards to Partnerships ,
Security, Regulations, E-commerce user support.
All use column 3 for social media and call to actions for example “my
betting slip”
Having identified the above themes that are used on most top betting
websites, most will be used to support the redesign for the live page.
As we know they work for the target market
UX design best practice Redsign Factors and Influence for live page.
Useful: Your content should be original and fulfill a
Essential Content - scores- time-prices -teams - leagues-
Calendar-sports-betslip-
Favourites- Results- Calculator.
Usable: The page has to be easy to use this starts with the layout.
Layout: The visual structure of the live page will be based on the on
three column, grid system, as this gird structure is best known by the
end user in this market.
Desirable:
Create Immersive experience
1.Background image will be used similar to that of 888 live web page
2.Live streaming tap
3.Social media
4.Images and icons
5.Slide in side taps
17. 17
6.The identity, brand, of the sports teams and other design elements
around sports will be used to evoke emotion and appreciation
Findable: Content needs to be navigable and locatable onsite and
offsite
All content will be put in to sections, the sections will be named/titled
clearly.
Accessible: Content needs to be accessible to people with disabilities
Credible: Users must trust and believe what you tell them
Branding and logos will be used from partnerships , securit and
regulation groups.
18. 18
Design Mock up ideas
Tool -Photoshop -Axuer
Web Page size mock up
W1024x H768
Resolution 72 Pixel
Colours: Red , White ,Grey
21. 21
Desktop redesign wireframing work
Design Infomation
The grey area will be updated with new data on match etc
As layout in above a background image has been used to engaged
the fans.
The 3rd column: Social media / images used/ bet slip and a live
streaming video area engages the user further to stay on the page
and watch the feed.
The bet slip alone with the advs works as a call to action.
23. 23
Tablet redesign wireframing work
The tablet follows the design of the desketop however, drop down
boxs are used to due to the space onecs the user clicks on the one of
the bottons for example “ Football” the heading the data will be show
within the live featured area. Example of this can be seen when
clicking on the betting slip botton.
24. 24
The Mobile follows the design of the desketop and tablet however,
drop down boxs are used again like the tablet due to the space onces
the user clicks on the one of the bottons for example “ Football” the
heading the data will be show within the live featured area. Example of
this can be seen when clicking on the betting slip botton.
25. 25
The league
The league page works across all the platform the page layout is as
the data is alot.
26. 26
Conclusion
This is a bold design it is an improvement on the current live page as
the layout and informaton is deeply in engaging through UX design.
The colours used are very bold , Red , White , Grey the user becomes
very engaged from the start.The design is simple the visual language
is very usable, the page has become easy to use.Grid-based layout
design was used to structure data and the page. Infomation and
content that is useful is brougth up front.
The page uses a lot of desirables Image, identity, brand, and other
design elements are used to evoke emotion and appreciation for
example the the live streaming video block used. Content is navigable
and locatable onsite and offsite, the page uses accessible content and
call actions for people with disabilities.
The page displays logo’s from all the governing bodies making it
credible for the users to build trust and believe in the page and site.
27. 27
Improvement and Thoughts.
This design could be implemented as the UX behind it works, the
visual design needs around two hours work to be fully developmented.
