Gamespot Design Test
Redesign the GameSpot "seamless" news page, focusing mostly on the user experience, and less so on the graphic design.
I wanted to get a sense of the landscape so I went to alexa ratings and found the top news and media sites out there along with other sites I thought were handling content and advertising well, along with some sites that I couldn’t question their success.
With a clear emphasis on social interaction, Buzzfeed has a ton of share links above the fold, as well as an article gallery, and feature for an article they’re promoting.
Fortune also had seamless scrolling, though with the added, linkable context of what would come next on their left hand rail.
IGN uses a today view on the left hand rail to denote articles that are from today, a smart move if visitors prefer recent, rater than related news. On certain articles, a feature image/video will play out even pre-headline.
- The New York Times:
The New York Times seems to have the most dramatic diversity in article type, with body’s that feel more traditional. Their standard article features a pretty egrigious ad at the top, but an interesting related/featured/topical content bar above it.
- Time Magazine:
Time is leveraging the left hand content bar for navigational purposes similar to IGN, but denoting video content a bit better, and letting someone navigate content types there, good for people who prefer related to topical. Also keyboard navigation for hardcore news readers.
- The Atlantic:
The Atlantic features a image integrated into an article nav, and the left and right toggle for article browsing. I enjoyed the extra large related news section long before comments were introduced.
Here's what the researched media landscape looks like:
After taking at look at the existing article page, My theory is that better utilizing the space above the fold, and introducing related articles up front will clarify the reading experience, and help improve time on site and page views. We can test this directly by seeing if people are clicking and engaging on related content. Here's a boots on the ground recounting of the concepts in the wireframes below:
- Articles as a main navigation point — Either in a dedicated bar, or floating content, related/timely articles should have more prominent placement.
- Big Ol' Video — Several wireframes show the video space enlarging quite a bit, more akin to game review pages. I'd like to see for accessibility and usability purposes introducing spoken articles in place of video on important text-based articles so users could come to expect guaranteed media and know to "hit play" leading to more media / video views.
Here ARE MY WIREFRAME ITERATIONS
Where I LANDED
I added just a tad more fidelity to the wireframe to show a possible styling. Below is some key's to the experience. I believe my proposed wireframe would test well to both increase video views, and help time on site with articles surfaced up front and game-like navigation.
- Pulled the headline into the top image — To increase eyeballs to the top, and get the play button for media more attention. Possible challenges include treatments that make the play button harder to see.
- Down the page consideration — Consideration for heavy navigation when the page scrolls, minimizing down what you're viewing now, and what's up next, with keyboard affordances for a person to keep moving from page to page. Possible challenges is not having enough of the article above the fold.
- Paging instead of scrolling — users can burn out on an endless scroll page, and the current page has no jump to top. So I wanted to change the article navigation to pages rater than an endless option. Possible challenges include time on site could be negatively affected from a page that seeming has no end.
- Mobile Bonus — while I didn't have time to explore mobile on this project, This design translates fairly easily to a mobile format, though additional optimizations may be necessary.
- Video Player — In a header, the video player will need a great experience if it will auto play, as it would be taking over headline space. Also the "up next queue" design will also need a lot of consideration.
- Stronger Personality, while honoring content — taking key colors from article images makes every article page feel special, the headline can use a dark contrasting color, while the summary can use a bright key color. Possible challenges include sourcing great images and finding the right algorithm to pull image colors.
HERE ARE MY PROPOSED WIREFRAMES
Keep in mind, the styles below are only an approximation in order to show a little more detail than simple gray boxes.