Marathon redesign

1

2

Task

To redesign the live page for Marathonbet. Live page:https://beta.marathonbet.co.uk/en/live andhttps://mobile.marathonbet.co.uk/#/en/live

Overview

Brand Attributes:

1. Sports,Gaming,Online gaming,Gambling,Money, Football, PremierLeague ,

2. Marathonbet CEO Stan Reoutt comments:

“Recently, Marathonbet has made great strides towards being at theforefront of football betting and this partnership cements our aims as abrand.

User Profiles

Persona 1Profile one - The Football fanName : BenAge :36Work: Maths TeacherWhy use Marathon: I like to keep up football on the move and when iget free time.

3

Persona 2Profile two - The sports FanName : SarahAge :31Work: Bus driverWhy use Marathon: I like all sports I am a big sports fan I use the siteto keep up to date with events and plan which ones to go to, I place abet now and then .

Persona 3Profile three - The GamerName : DavidAge :30Work: UX designerWhy use Marathon: I like the games, I am a big sports fan I keep uptoday and places bets now and then.

4

Goals

I am redesigning the live page, so the goal here is to make thefollowing

1. The informaion has to be clear and to the point.2. The layout of information has to be straight forward3. 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 findit very useful to research in to the market I am designing anddeveloping for I need to understand the experience end users arehaving at this. This research will enable me to build a better aexperience, in regards to .layouts, colours and information shown.

5

The live website screen shot

https://beta.marathonbet.co.uk/en/live

6

Findings

LayoutDesktop/Tablet/Mobile

Visual structure of the live page. Grid system here is based on threecolumn.Header and Footer .

1 2 3

1. Colours

Light Red

Light Blue

Dark Blue

Light Green

White

7

8

2. Information shown

Column 1

Sports and Up coming live events

9

Column 2Information shown: Scores, time, prices, teams and leagues.

10

Column 3 Information: Bet slip , App downland,Promo’s, Twitter.

11

Header

Information: User call to action, loging join up, support, settings ,services

Footer

Infomation :Partnerships , Security, Regulations, E-commerce usersupport.

12

Mobile display.

1 2 3

Visual structure of the live page for mobile has the same design for thedesktop. Grid system here is based on three column.Header andFooter .Again colours are the same as the Desktop.

However due to the nature of mobile devices Information that iskey/priorty to the end user is only shown, up front and alternatively,information/content that is not essential has been that placed in lessprominent locations. All infomation has been broken down into smallertext chunks

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 inthe UK”

http://www.bestbettingsites.co.uk/

Most end users, use the above websites to place a bet. I willundertake more research in regards to how the following informationis displayed on they live pages :

Layouts-colours -information shown- scores- time-prices -teams -leagues (for at least one sport for this redesign).On Desktop , Tabletand Mobile display.

14

I have chosen to research in to three sites that I can get access to thelive page.

1. 8882. Paddypower3. BetVictor

Findings from 888

Layouts: The visual structure of the live page. Grid system here isbased on three column, again Header and Footer .

Colours

Black, orange green gray. (for this task the coloure is not key, as theredesign will keep to the brand colours)

Information shown.

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 isbased on three column, again Header and Footer .

Colours- Green , white , blue (for this task the coloure is not key, asthe 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 isbased on three column, again Header and Footer .

Colours: blue , white , green (for this task the coloure is not key, as theredesign 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

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 “mybetting slip”

Having identified the above themes that are used on most top bettingwebsites, 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 onthree column, grid system, as this gird structure is best known by theend user in this market.

Desirable:

Create Immersive experience

1.Background image will be used similar to that of 888 live web page2.Live streaming tap3.Social media4.Images and icons5.Slide in side taps

17

6.The identity, brand, of the sports teams and other design elementsaround sports will be used to evoke emotion and appreciation

Findable: Content needs to be navigable and locatable onsite andoffsite

All content will be put in to sections, the sections will be named/titledclearly.

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 andregulation groups.

18

Design Mock up ideas

Tool -Photoshop -Axuer

Web Page size mock up

W1024x H768

Resolution 72 Pixel

Colours: Red , White ,Grey

19

DesktopLAY OUT OF PAGE AND INFORMATION

20

Desktop redesign wireframing workLow-fidelity

21

Desktop redesign wireframing work

Design Infomation

The grey area will be updated with new data on match etcAs layout in above a background image has been used to engagedthe fans.The 3rd column: Social media / images used/ bet slip and a livestreaming video area engages the user further to stay on the pageand watch the feed.The bet slip alone with the advs works as a call to action.

22

Tablet/Moblie Tablet Idea

23

Tablet redesign wireframing work

The tablet follows the design of the desketop however, drop downboxs are used to due to the space onecs the user clicks on the one ofthe bottons for example “ Football” the heading the data will be showwithin the live featured area. Example of this can be seen whenclicking on the betting slip botton.

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 oncesthe user clicks on the one of the bottons for example “ Football” theheading the data will be show within the live featured area. Example ofthis can be seen when clicking on the betting slip botton.

25

The league

The league page works across all the platform the page layout is asthe data is alot.

26

Conclusion

This is a bold design it is an improvement on the current live page asthe layout and informaton is deeply in engaging through UX design.

The colours used are very bold , Red , White , Grey the user becomesvery engaged from the start.The design is simple the visual languageis very usable, the page has become easy to use.Grid-based layoutdesign was used to structure data and the page. Infomation andcontent that is useful is brougth up front.

The page uses a lot of desirables Image, identity, brand, and otherdesign elements are used to evoke emotion and appreciation forexample the the live streaming video block used. Content is navigableand locatable onsite and offsite, the page uses accessible content andcall actions for people with disabilities.The page displays logo’s from all the governing bodies making itcredible for the users to build trust and believe in the page and site.

27

Improvement and Thoughts.

This design could be implemented as the UX behind it works, thevisual design needs around two hours work to be fully developmented.