Turf UX/UI

Brand Identity, Brand Strategy, UX/UI Design and Digital Design

Turf is a Football Journalism website designed to cover the latest news in the English Premier League. The objective was to provide content for our casual sports bettors that would guide them to our trusted affiliate partners. 

Turf-Cover.jpg

Identifying the problems we need to solve 

Using the research the UX team conducted through surveys and analysing our competitors, we identified some issues our audience faced. 

The Problems

  • Our research showed that on our sites our target audience mainly browsed match previews and analysis, latest news and the league standings. This helped us to understand that some of our sites had pages that were irrelevant to our casual bettors.

  • Our casual bettors often felt overwhelmed by our tips and odds and wanted a simple solution to placing a bet online. Their reasoning for placing bets was for entertainment purposes rather than sports betting as a professional endeavour.

The Solutions

  • Create a site for casual bettors where they can access all the features they love

  • Have a minimal, clean user-friendly design 

  • Make the steps to placing a bet simpler

turf-ipad-bg.jpg

Developing a working prototype

One of the challenges was to create a user-friendly design that showcased all the features but also had the fewest steps to reach the affiliate’s landing page. We had to find the best solutions for advertising that would provide a positive click-through-rate for our partners while simultaneously not overwhelming our frequent users and affecting our retention rates.

turf-mobile-wireframes.jpg
colours-and-type.jpg
turf-mobile-screenshots.jpg

Final Outcome

There’s still room for improvements and adjustments, but at this stage I felt that the product was well tested and ready to be built.

We did encountered some issues during our initial testing which led to small adjustments.

The adjustments we made:

  • Redesigned the ticker on the site 

  • Adjustments to the global spacing scale

  • Renaming some of the pages

  • Expanding the colours for the site

  • Simplifying the Call to Action buttons 

All these adjustments helped to improve the user experience and enable a smoother and more cohesive design. The design system will need continuous development and depending on the strategies in the future, new pages and components will need to be added and tested.

The users were navigating the site very well during testing, and overall we had positive feedback on the prototype. 

turf-mob-edit-1.jpg
  • The image features the word 'TURF' written in large, light blue, block letters with a grid and guide lines for design layout.
  • Presentation of Turf brand logo in three color variations: full color in teal on dark background, monochrome black in white, and monochrome white in black. Descriptive text about the logo's design, application, and style on the left side.
  • Guide on logo padding and minimum size, showing a logo with the text "TURF" in green on a black background, and the prescribed minimum logo size of 80 pixels wide.
  • Color palette chart with labels for primary colors green, black, white, and grey, and extended colors including Turf Green, Turf Dark Green, Turf Black, background, Off-White, Error Red, UEFA Blue, UEFA Orange, and UEFA Green, each with their HEX, RGB, and CMYK values.
  • Table comparing color accessibility and contrast with different background and foreground colors, and whether they pass accessibility standards for various text sizes and color combinations.
  • A digital page layout displaying typography examples and text content about sports and transfer news, with three text blocks labeled Header, Subheader, and Body, and a sidebar with a description of the typography choices.
  • A comparison of two design styles for text layout and typography. The left side describes styling principles with a light background, black text, and bullet points. The middle and right sections show example layouts with dark backgrounds, large green headings, and styled body text, illustrating two different header styles.
  • Three mobile phone screens displaying sports news and standings related to football, including league standings, latest news articles, and match photos.