Visual Design – Beatsnrice

ToysRus

beatsnrice77 — Thu, 04 Apr 2019 03:04:39 +0000

ToysRus App

I worked with our internal agency Future Plus to create a proof of concept for the ToysRus Buyers guide. An app aimed at informing parents about which video games they should buy.

Nvision

beatsnrice77 — Thu, 04 Apr 2019 02:57:50 +0000

NVision

A custom publishing solution for Nvidia’s Nvision magazine to showcase the processing power of the the Tegra chip. This was the winning design chosen for our in house custom publishing agency Future Plus. The app features a 3D interface that rotates across an x and z axis to promote content and Tegra chip capabilities.

Xbox Nation Magazine

beatsnrice77 — Tue, 19 Mar 2019 14:32:55 +0000

Xbox Nation

During my tenure at Xbox Nation, I produced a monthly magazine and was in charge of layout, design and production of the magazines features, news, and review sections. I worked with editors to develop concepts on features and news stories. Our goal was to create a progressive gaming magazine that was driven by a strong design sense with forward thinking stories and features.

TechRadar Life

beatsnrice77 — Tue, 19 Mar 2019 14:32:36 +0000

TechRadar Life

TechRadarLife.com is more with less. This proof of concept was created to feature the best products and drive affiliate revenue. Built on the Spark CMS platform and designed with simplicity in mind. The goal was to drive users in with the best products and match them with a slick and clean responsive user interface.

Blizzard

beatsnrice77 — Tue, 19 Mar 2019 14:32:18 +0000

Blizzard

Blizzard approached Future US to create a custom publishing solution for players and fans of The World of Warcraft. The magazine features exclusive content packaged in a high quality magazine. This landing page was designed to increase conversion on it’s subscriptions. Modules that hit key calls to action accompanied by a follow nav proved to be key to its success.

PC Gamer

beatsnrice77 — Tue, 19 Mar 2019 14:31:53 +0000

PC Gamer

The premier destination for PC gamers across the world. As the design lead I oversaw a hugely successful redesign and implemented methods of user testing. The main goal was to drive traffic numbers, increase engagement and connect the audience to the products they love.

GamesRadar+

beatsnrice77 — Tue, 19 Mar 2019 14:31:36 +0000

GamesRadar+ Responsive Redesign

GamesRadar+ is one of the premier destinations for video game and entertainment audiences. Launched in 2006, it became one of the largest sites for video game culture. In 2013 we saw that over 50% of our traffic was viewed on mobile devices. Here’s a look into the responsive release.

Role

Lead UX Designer

Responsibilities

Branding and Identity
User Research
Interaction Design
Visual Design

Collaborators

Joei Fiteny (Front End Developer)
Alex Afterman (Product Manager)
Bart Jaworski (VP of Product)
Randy Tano (Senior Engineer)

Deliverables

Site maps
Wireframes
Visual Design
User Research Findings

The Challenge

In 2013 GamesRadar+ was looking at over 8 million page views per month. Almost half of the users were viewing the site on mobile devices. It was time to provide an experience that served different devices and viewports. We also wanted to improve the experience on mobile while also improving page views and engagement.

Goals

Provide a consistent GamesRadar+ experience across all devices
Preserve advertisement placement and improve on its performance
Create a more engaging experience with GamesRadar+ content

Approach

We chose a responsive website over an adaptive one because we wanted to provide a consistent experience across all devices not just a few. Through some quick user research though heatmaps we learned that our users were more inclined to click through articles that were supported by images.

Simplified Navigation and Architecture

GamesRadar+ numbered about 10,000 articles during the time of the responsive redesign. All of which were classified by a platform (PC, PS3, PS4, Xbox 360, Xbox One, Wii, and Wii U,). Under the platform we displayed content types (News, Reviews, Previews, Features, and Cheats & Guides). We decided to do away with a listing each platform and simplify. Heat maps and Google Analytics supported this idea. Our new navigation now looked like this (News, Reviews, Features, Cheats & Guides, Movies, TV, and Cool Stuff).

Panels

We took the panel approach to showing articles. It led us to the opportunity to contain the article within a number of pixels that allowed it to move freely within a stream. The article boxes contained a background image, headline, author, posted date, social sharing icons, comment count, and a flexible field above the headline that could be used either classify an article or support the headline. We also used this flexible field to support advertorial initiatives throughout the stream.

Ad Solutions

This was the most difficult challenge on the project. We served a top expandable banner ad, (970×250) accompanied by either a 300×250 MPU or 300×600 tower. We also served background skins as a takeover ad solution. On top of that was a sponsored post (advertorial) that would be placed around the stream.

By using a 300×300 panel for our articles, we were able to distribute the ads within the stream and put together a solution that responded well on all devices. On the front end, we made a cluster of articles and ads that counted as 1 page view. During this release we also implemented an continuous stream and removed the pagination. It brought a smooth transition from page to page decreasing any friction between the user and content. This increased our page views and impressions substantially to over 80%.

A wireframe identifying the different ad solutions on the homepage

Cluster of panels making up a page.

Lessons

It’s true what they say. The toughest challenges bring on the greatest rewards. It was a great use case for using quantitative data to guide your design decisions. By simplifying our navigation focused our users to what they wanted the most, the content. The project required complete buy in from all of our stakeholders, editorial, engineering, sales, and marketing. Design was the glue that brought it all together.

In 2012 we were entering new territory with responsive design. Today it’s impossible to ignore responsive design. Design partnering with engineering brought this into fruition. Working closely together expanded our possibilities. Making an experience seamless and by providing better transitions for users truly enhances a product and the engagement.

Camouflaj Studios

beatsnrice77 — Tue, 19 Mar 2019 14:31:12 +0000

Camouflaj Studios

I was approached by Camouflaj makers of the hit game Republiqué to help redesign their site. They had specific goals in mind and wanted a mixture of goals to connect with fans of their games as well as a recruiting tool for game developers and designers. I worked with their team to help establish their identity and to synthesize a site that reflected their principles and also their needs to communicate with their audience.

VIEW SITE

Tetris Effect

beatsnrice77 — Tue, 19 Mar 2019 14:30:54 +0000

Tetris Effect

I partnered with Enhance’s marketing team to produce message of impactful in game experiences. I approached the with data driven methods to drive conversions of game downloads. Tetris Effect became critically acclaimed, won numerous awards. I contributed to a hugely successful product by contributing to its download efforts that exceeded expectations.

VIEW SITE

Spark

beatsnrice77 — Tue, 19 Mar 2019 14:29:46 +0000

Spark

A CMS platform to rapidly deploy editorial content to mass audiences. Spark is a custom built responsive web application that enables editors and content creators to swiftly publish content through a clean and incredibly fast interface. It’s the platform that drives Future US’s large scale high volume websites. The platform features responsive design, parallax images, content galleries, a built-in ecommerce affiliate platform and infinite stream.