Gabriel Ruiz
UI/UX Designer
Milan-Main.jpg

AC Milan

A.C. Milan Iphone X app

A.C. Milan Iphone X app

A.C. Milan is a professional football club in Milan, Italy, founded in 1899. The club has spent its entire history, with the exception of the 1980-81 and 1982-83 seasons, in the top flight of Italian football, known as Serie A since 1929-30.

AC Milan's 18 FIFA and UEFA trophies is the fourth highest out of any club (joint with Boca Juniors), and the most out of any Italian club. Milan has won a joint record three Intercontinental Cups and one FIFA Club World Cup, seven European Cup/Champions League titles (Italian record), the UEFA Super Cup a joint record five times and the Cup Winners' Cup twice. With 18 league titles, Milan is also the joint-second most successful club in Serie A, along with local rivals Internazionale and behind Juventus (34 league titles). They have also won the Coppa Italia five times, and the Supercoppa Italiana seven.

Challenge:

Improve Milan’s user interface without modifying the functionality of its core features.

My Role:

Conduct user research, sketch, mockup static interfaces and illustrate icons.

AC-Milan-Main.jpg

Research and Goals

Speaking with Milan’s previous app users, we identified questions that often came up for current and new users, isolating pain points and assembling a timeline for what users experience as they progress through the app. Where were users dropping off? Why? What elements of the Menu were confusing or unclear? Why? Were there any patterns that seemed to cause a drop in engagement? Why?

From this research, we established that navigation was holistically confusing to users, and had difficulty understanding how different views within the Live Score were related to each other. In order to solve these problems, we decided to redesign the Live Score experience by laying out the following goals:

  1. Strengthen visual hierarchy and clarify navigation everywhere, including designing a new icon set that is extensible and legible at small sizes

  2. Reduce and eliminate inconsistencies by establishing conventions for how pages should be laid out, how buttons should positioned depending on their purpose, and how copy should be written

  3. Design and implement a more appropriate interface font that can also be used as part of the Milan brand

  4. Clean up and organize the Main Menu, establishing and enforcing naming rules in order to help maintain consistency, reduce technical debt, and simplify future changes

Due to organizational limitations, all of these changes had to be made solely in the front-end, without touching the core functionality of the app. This limited some of our more aspirational redesigns. Below are the solutions we arrived at for the points above, along with how we transformed the Live Score section using user data as a guide for design decisions.

Milan-Type2.jpg
MilanWeb9.jpg
MilanWeb2.jpg
MilanWeb6.jpg
MilanWeb1.jpg
MilanWeb4.jpg
MilanWeb7.jpg
MilanWeb10.jpg
MilanWeb3.jpg
MilanWeb8.jpg