IGN Website Redesign

This project started from an IGN design challenge to choose and redesign any IGN webpage. After doing the challenge, I decided to extend my findings into a case study.

About the Client

IGN is an American video game and entertainment media website that brings users the latest news in these sectors.
IGN’s users span over 22 platforms and 115 countries. IGN also provides users with game reviews on a 100 point scale.
Define and Explore

The define and explore phase helped create the vision for the experience that the user should get out of using IGN’s web platform. The user should be able to seamlessly navigate from page to page to find the content that they need as well as discover new topics that might interest them.

Information Architecture

Primary Research

To learn more about how users interact with the current IGN website, I surveyed 20 people to ask them to navigate IGN’s interface and say out loud what they are thinking while navigating. From there, I sorted my findings into 2 categories: strengths and weaknesses of the current interface.

The Users

User Pain Points

After examining IGN’s design at a high level, I was able to identify the big paint points in the user journey. I realized that most user pain occurred before the user actually navigates in the site, and this journey could be split in two parts: the path to discover content and the content itself.  

The current layout is fairly bulky and the allocation of space is not practical. Going from one topic of another, for example from the news page to the shows page, the two interfaces are inconsistent. Descriptions are fairly lengthy and not minimizable.

Additionally, the navigation bar has at least ten topics to choose from which can cause users to struggle to make a choice of what content to view. When the hamburger button is pressed, there appears another menu that has some of the same choices as the nav bar on top as well as new options. In general, users may have to spend more than a glance to look at the topic that they want to go to.


Low-Fidelity Wireframes

Final Design

For the redesign, the navigation bar was changed to only have four tabs. The topics tab then expands into the categories that previously cluttered the top of the page. Currently, when the user mouses over the browse menu, the user can still see behind the menu which can cause users to get distracted from their initial objective. In the redesign, when the topics are pulled down, the rest of the website is muted so users can completely focus on finding a topic to look at.

Another problem with the current website is that readers can only see about two main articles under latest news. In the redesign, users can see much more content without pressing the “show more” tab due to the grid layout. The grid layout also addresses the issue of users thinking words are too compact by having short blurbs for one to three top news articles and then only titles for the rest of the news.

The redesign also improves the visibility of IGN’s various social medias by placing them right above “latest news” which can be a significant source of traffic over time. Lastly, the redesign addresses the issue of users finding the current news page too overwhelming at the bottom of the page by condensing the info so that users can easily find how to contact the company and other info about the company.

Michelle Chen ✌️             
Behance.   Dribbble.   LinkedIn.   Medium.  
Let’s connect!