01

Dugout – Football Inside Out

Working as Lead UX for over a year for the start up Dugout. I lead the UX of the project and managed to product owners requirements though the the UI designers to ensure the project was delivered to his expectations.

I started on the project very close to the beginning of the formation of the company and have been lucky enough to work on the two major release mile stones the company has had. These were the release of the iOS and Android app and the main Dugout website. I worked closely across both platforms, app and site, to ensure that the experience the user got from each one was as seamless as possible but also to ensure that each one had it’s key benefits. I also worked with the content team to define the requirements and best UX practices of the ProCMS and Pro app where clubs and players could upload their content from.

For the website I created a full set of wireframes initially using Axure with another UX designer and then for the app I created the full wireframe set myself using Sketch. This enabled a quick and easy transition over to graphic design. Making development as quick and easy as possible was also one of my key aims for the project due to short and intense time schedules for release. Ensuring that developers had all the assets they needed at their fingertips was paramount for a smooth development process. For this we used invision’s beta inspector. This enabled the developers to see sizes of elements, padding, spacing, etc in the designs of the pages that they were created without opening up a photoshop file. It also enabled them to slice out assets keeping the design team free to make continued improvements to the design of the app / site.

I organised and ran a set of user tests alongside the other UX designer. We wanted to test the initial concept of Dugout with our target market 15-24 year olds to gather an opinion on whether or not they thought the app or website would interest them. This was done in two sets. We tested an interactive design prototype of mobile web site on an iPhone 5. These were conducted with evening interviews with 5x football fans aged 19-27 at Sheraton House and then 8x football fans aged 12-17 at St Edmund’s College. This would help identify and prioritise key issues to address for the V1 product.

Overall Impressions

Overall it tested extremely well, people loved the mobile experience
All users (bar one edge case) said it would be something they would definitely use, and seemed genuinely very enthusiastic.
Many users commented that they really liked having content from Facebook, Twitter and Instagram all in one place, saving them time.
Exclusive content was a big draw for most users, especially the younger ones – they want to be the first to know and are willing to join for that!

Dugout strip worked well and people loved being able to personalise.
Many users liked content from players, celebrities & publishers.
Users had no major navigation issues.

What did people say?

“It’s not like a social network, it’s more related to clubs, more related to football, more detail, more content, videos, articles.”
“I like that there’s clubs and players you like and it is focused on what you care about.”
“You do not have to change between apps which is annoying.”
“Easy access to the whole world of football.”
“I like the trending view as I like the overview.”
“All news in a single place. Quick access instead of searching.”

Key Issues

  • Limited understanding of Dugout strip prior to onboarding
  • Exclusive content not clear enough
  • Gallery UX and single image view
  • People missed the interaction bar on the content/article view
  • Star (favourite icon) misinterpreted as being a “like”
  • Join Bar was not used and most users didn’t even notice it
  • Most users didn’t know why they would join, the benefits are not clear

Overall it was an extremely useful exercise that helped massively with the V2 release of the app and website.

App

For the app release I worked as the sole lead UX designer leading the design project and ensuring that the app was released on time. I had to both create the initial set of wireframes for the UI designers to follow as well as manage the product owners expectations and write the Jira tasks for the development teams to follow. Once implemented I worked closely with QA to ensure that the developed product was inline with what was designed. Shown below are examples of the Sketch wireframes I created and how they translated into final UI designs.After the project was initially delivered I worked closely with the in-house developers to make small tweaks and fixes to enhance the experience of the app. An example of this is pinned video and auto fullscreen. On video articles the video player element pins to the top of the screen to ensure it could be viewed at all times. If the user turns their phone to landscape the video automatically goes full screen to enable immersive viewing. This provides a simple and effective experience to the user.

Website

The initial V1 website was released before the app. For this I worked alongside another UX designer and in a design team of 6 people. The wireframes were created in Axure and the handed over to the UI designers who created the visual mock ups in photoshop. I also worked as a key triage point between the design and development team ensuring that the designs were correctly implemented.For the V2 released I lead the UX and managed the design team for the redesign of the website. This was to bring the visual design and UX inline with the latest app release. Here a significant improvement to the functionality and design was made. A tricky part to this project was managing the product owners expectations and managing the workflow between UX (myself), design, development and QA. This is something I feel went well as the V2 website was delivered on time and with far less bugs than the V1 release.

Shown below are wireframes UI designs from both the V1 and V2 releases.

ProCMS/App

The ProCMS and ProApp were two elements of Dugout that enabled Pro’s (Clubs and Players) to directly upload their content on to the site / website. ProCMS was developed in-house using a ready made CMS while the ProApp was developed by an out of house company. For ProCMS I worked closely with the in-house team to help ensure the user journeys for uploading content were as seamless as possible and enable the user quick and easy upload of their content while creating minimal errors. An example of this is image cropping where the user has to select portrait and landscape crops for their image uploaded for elements on the site like content cards. Ensuring that this process was easy while creating the best crop possible was important to the user and to Dugout to make sure the image was displayed in the best way possible on the app and site.For the ProApp I helped create the wireframes that were handed over to the out of house team. I then worked QA to ensure the final app delivered was inline with the requirements the content team and the players using the app had. These two elements ensure that the process of creating content is quick and easy and are both paramount to how Dugout creates and posts it’s new content.