UI/UX design for a tennis stats webpage
The official website for a popular tennis league lacks a responsive layout and doesn't have any tools for analyzing match results or other stats. This is a prototype that I've been working on as a personal project. I drew the mockups in Balsamiq and am developing the web-based app using HTML5, JavaScript/jQuery, PHP, and MySQL.
User goals
My first step was to gather information about what users would like to see from a tennis league app. The two major points of entry were (1) finding out more information about a team (either your own, if you're the captain, or an opposing team you have to play), and (2) scouting information about a player.
Mockups
With those goals in mind I began building mockups that would show statistical results clearly and informatively. Even though this app is intended to be used on any size of screen, I built the mockups on the dimensions of a small mobile screen since that's the most challenging layout to get right. The use of visual graphs is a vast improvement on the original website, which has nothing but text-based results.
Development
I'm building this app as a single-page webpage with a responsive layout to accommodate all screen sizes. My prototype runs on a local MAMP server; here are some live browser screenshots.
UI/UX design for a tennis stats webpage
1
66
1
Published:

UI/UX design for a tennis stats webpage

1
66
1
Published: