NBA Web & App Redesign
Overview and Client
This project is a redesign of the National Basketball Association’s desktop website and mobile app. A revamp of the NBA’s website and mobile app was needed to help make the user experience more enjoyable.
Brief
This project was supposed to be make the user experience of the everyday NBA fan that uses the app or visits the NBA website a more enjoyable and rewarding one. The desktop website was in need of a redesign.
Their current website is overfilled with content such as news stories, videos, galleries, and a scoreboard of the games on that particular day.
The website needed to be organized better and cleaned up. There needed to be inserted a stronger sense of visual hierarchy and a layout that organized the content in a clearer manner.
The mobile app needed to be reorganized so as to fit the needs of the everyday user. Certain aspects of the mobile app could also benefit from including more comprehensive content so as to enhance the user experience.
Both the website and the mobile app needed a stronger sense of consistency between one another by way of colour, typography, layout and tone.
Research portion
When beginning this project, the research portion was an integral part of the process. Because this was a redesign project, the content that I was going to be using in the website and the mobile app already existed. The research stage included, however, information on what the content was and how important it was to the everyday user of the NBA website and app.
I thought it was important to understand type of content is most important to the user, and found that it also depends on whether or not they are on desktop or mobile. The differences between how somebody uses desktop compared to how they use mobile would form the basis for how I would design similar content in two very different ways.
I asked questions that determined what was wrong with the current iteration of both the website and the app, what are the areas that could be improved upon, what can be learned using examples of other sports websites and how they deliver similar content, what are the things their website and app currently have that can be avoided in the redesign, and what style should they both take on so that a sense of cohesion is created between the two?
On the desktop website, the current NBA homepage is filled with content that ranges from news articles about the day’s most intriguing headlines and stories, video clips of game highlights, recaps, or interviews, and galleries of players or games from previous nights. The website also features a scoreboard of the games on that particular day, and I thought this was one of the key features of the website. I felt like the average user would want to see the scores of the game more than anything else, and felt like the current layout of the homepage didn’t optimize this feature as well as it could have.
On the mobile app, I felt that the user has a simpler desire to see content that is easier to digest, such as the scores of the game, the statistics of the players, or the current league standings. All of these things are important to the average NBA fan and all contain relatively light content that best suits a medium such as mobile.
Design Process
Once I determined the areas that could be improved upon on the website, and had a clear vision of what I wanted to change — which was to reduce the content that was being displayed on the home page and create more visual hierarchy amongst the content — I began the process of designing a layout that best reflected this thought process.
My initial designs for the layout of the home page for the desktop website touched on these ideas, and what I felt best worked was the design of the scoreboard. I had condensed the content (such as the team name, icons, start time, etc.) so that it takes up less space on the page while at the same time being able to fit more games on the screen within the “scoreboard” area. I readjusted the position of the scoreboard, which currently sits on the left hand side of the page and moved it so that it sits right underneath the navigation bar. I felt this created better hierarchy and made it a more noticeable feature on the page, which was what I wanted.
I realized that delivering the content that came afterwards still needed more work. I felt that the content still needed more hierarchy, and that this could be done by creating sub-sections or “titles” for each category so that the navigation of the page becomes a bit easier and clearer.
I also felt that the navigation bar, although I attempted to change the colour scheme, was being hidden and overshadowed by the content because of the white background.
The other portion of this project, which was the mobile app redesign, was more extensive and detailed. Whereas for the desktop website, I was only redesigning the home page, I redesigned multiple screens for the mobile app.
I began with low-fidelity wireframes of possible layouts for each of the screens I wanted to redesign, and began exploring different layout options. Through this process, I found out things that worked and found out things that didn’t work.
When you open the current NBA app, the first screen it takes you too is a news screen where you see the top stories of the day relating to the things that is going on in the NBA. I knew I wanted to refocus this so that the first screen you see instead is the scores of the games on the day of. I felt like this was the most important feature that the average user would want to see, especially if they are on mobile where they might not have the time to dive into heavier content such as news articles.
In designing the scoreboard screens, I explored different layout treatments including using full team names, adjusting the size of the team logos, what type of secondary information to include (start time, broadcast channels, team records) and early attempts were looking a bit too cluttered.
Another challenge I faced was including content that provided a more comprehensive experience for the user on the game preview screen. Whereas the current app doesn’t really preview an upcoming game, I wanted a screen that dives further into a preview of the game, using statistics, images, or video content as a way to deliver this to the user.
The things I learned through this process included how to reorganize existing content and how to improve it. By not having to worry about finding the right content, it allowed me to analyze the existing content and focus on how it was being communicated visually to the user.
I also learned the differences between designing for mobile compared to desktop, and how to design according to the desires and needs of the user.
Solution
(Link to prototype of the mobile app)
My final solution for the desktop website was a cleaner home page with a stronger sense of hierarchy. I reorganized the content so that the scoreboard was a more prominent feature on the page, and reduced the amount of content shown and divided them into sections for easier navigation.
I reorganized the content of the app so as to refocus on what the user wants to see the most on mobile, and created more comprehensive pages where the user can get a more thorough experience with the app.
In the end, I feel that the client should be satisfied because their website was made easier to navigate and their app was refocused to create a more prioritized and comprehensive experience for the user.
