Electronic Arts · 2017–2021
Madden NFL 19 – 22
Four years on Madden, ending as lead of a UI team of 6 FTE designers and 6 outsourced contractors. I redesigned the Score HUD twice and built the snapshot gallery from scratch.
- Role
- Experience Technical Designer → Lead
- Studio
- Electronic Arts
- Years
- Nov 2017 – Mar 2021
- Engine
- Frostbite · Flash · ActionScript
- Shipped
- Madden NFL 19 · 20 · 21 · 22
- Team
- 6 FTE + 6 outsourced contractors
The job
I worked on Madden from Madden 19 through Madden 22, implementing art and scripting interfaces with Flash, Frostbite, Photoshop and ActionScript. From the middle of Madden 21 through Madden 22, I led a team of 6 FTE designers and 6 outsourced contractors. I managed both groups, assigning work, reviewing it and keeping quality consistent across the team.
The Score HUD
The Score HUD is on screen for almost every snap. For Madden 20 I got to redesign it, the first big change it had seen in several years. That meant restyling it completely, including all of its dropdowns and state changes. I enjoyed it so much that I decided to continue ownership of its implementation for Madden 21, where I redesigned it again and also skinned the new Score HUD for The Yard.
Score HUD variants.
The Score HUD in game.
Main menu
I skinned the Madden 20 main menu. I added large mode icons to the tiles so players can quickly spot the mode they want, and removed as much background UI as I could so the art could stand out. The text fields on the left are modular, with title, subheading and description fields that designers can update during live events.
Madden 20 main menu.
Snapshot gallery
The snapshot gallery was a new screen I created for Madden 19. I owned the UI for snapshots everywhere they appear: the gallery, the instant replay screen where you take them, and the news screen where they show up in stories.
The gallery is built to show photos without covering them. Sorting by team and week sits in the top corners, and details about the current photo sit in the bottom bar. After a few seconds without input, the UI fades out so the photo is unobstructed. Any button press brings it back instantly, with no animation, so it always feels responsive.
The snapshot gallery.
Franchise news and Big Decisions
For Madden 19 the franchise news screen got a visual refresh and new snapshot stories. I rewrote nearly all of its UI code while adding those features, in the time I had been given for the new features alone. New types of news stories are now much easier to add.
Franchise news, with snapshot stories on the left.
I also built several of Madden 19’s “Big Decision” screens. Their player tiles share modular pieces, so similar tiles across screens didn’t have to be built more than once.
One of the Big Decision screens.