Derek P. Collins
Product Designer & Developer

Cleveland Browns Roster

When the 2021 NFL season started, I wanted some way to quickly look up players from my favorite team – the Cleveland Browns – during the game. While there are a lot of websites that show team rosters, they’re often very dense table layouts that include every little bit of information you could possibly want on a given player. I, however, tend to see or hear the players jersey number and want to look them up really quick to see who they are. Since I couldn’t find anything quite like this, I decided to make something myself.

What’s currently available

The main resources for viewing the Cleveland Browns roster are the Cleveland Browns official website, the official NFL website, and the ESPN website.

As you can see, they’re very information rich, but when I’m at a game, I don’t necessarily need all of this information – I just want to quickly look up the player that made a play (usually by jersey number) and know who they are and what position they play.

The design

With the above in mind, I set out to create a bare-bones roster ordered by jersey number and this is the result:

The build

Usually when I’m creating the initial version of something, I try to build it as simple as possible and only optimize later as it becomes necessary. In the case of this app, I kept it extremely simple by creating a JSON “back-end” that would be presented as an object in JavaScript and then I used JavaScript to manipulate the data from there.

2022 Update
For the 2022 season, I updated the app by creating a serverless function to pull the roster data directly from the Cleveland Browns website and a cron job that runs this task on an hourly basis. This automated the process of keeping the roster up-to-date, which I was doing manually before. I also took this opportunity to tweak the design a bit and add some additional stats:

Open source

My intention was to build and use this for myself, however, I realized that other Browns’ fans may want something like this as well, so I decided to open source the code and make it all publicly available. You can check out the app yourself or visit the project on Github to learn more.

← Next Previous →