Nintendo E3 2013
My role on this project was as a designer, working closely with the senior developer to create and develop the E3 site.
The Ask
Work with the senior developer to flesh out the remaining pages for the 2013 E3 site.
The Goal
Add some fun and playful elements to the E3 site and find ways to show off new game-specific assets.
The plan
After confirming with the analytics team and taking a look at our user data, we found that the majority of users were visiting the E3 site on desktop, at resolutions that were over 1200 pixels wide.
We decided that we would highlight exclusive new character art on game detail pages, with large scale screenshots to take full advantage of the larger displays used by our audience.
On mobile, the character art would be removed, to maximize the amount of space reserved for viewing screenshots.
Things learned from the Nintendo E3 2013 Site
Successes of the Design
1. Stakeholders were pleased by the treatment of the character art on game detail pages.
2. Even though we did not know exactly what assets we would receive at launch, the treatment of the character art on game detail pages worked for all games.
Challenges of the Design
1. Due to the confidential nature of the E3 event, game assets are not available until after the site was already built. As a result, we were not able to accurately predict the max number of screenshots per game detail page. This resulted in the thumbnail carousel sometimes being up to four rows tall, which pushed everything below the gallery header way past the fold on the most common audience resolutions.
Nintendo E3 2014
My role was as lead designer, working closely with the senior developer to solve for our E3 site needs.
The Ask
Create a site where we can host information about Nintendo E3 news as they are announced to the public.
The Goal
Give fans a place to go and check for information related to E3 and generate excitement in the community.
The Immediate Challenges
1. Site would have to be flexible enough to add and remove pages or shift content priority as the event progressed.
2. Game detail pages and final count of games announced would not be available until post-launch, so the design would have to accommodate for a lot of game pages, or very few game pages.
The plan
1.Utilize multiple sizes of modules and masonry style layouts to make the site flexible and accommodate the unknown number of games that were to be announced, and to account for the unknown dimensions of game assets to be featured in the site.
2.Since there are no hi-rez images available to use as focal points for section headers, leverage clips from E3 trailers and announcement videos as assets for the site.
Things learned from the Nintendo E3 2014 Site
Successes of the Design
1. Layout was flexible enough to accommodate the final assets and support changing priorities.
2. Stakeholders appreciated the video clips brought onto the pages and felt that it added excitement.
Challenges of the Design
1. It was hard to tell at a glance which games were for which specific platforms.
2. On the homepage it was difficult to parse out which of the masonry boxes led to a game detail page, and which ones led to event-specific landing pages.
Nintendo E3 2015 Teaser & Event Site
My role was as lead designer, working closely with the development team and project manager.
The Ask
Create a site for Nintendo at E3 2015 that has a teaser phase and an event site phase.
The Goal
1. Instead of having a teaser site and a separate event site, make one phase transition into the other so that it's all part of a single experience.
2. The event site should be both where fans are going to get information and where fans are staying to watch streaming events.
The Immediate Challenges
1.We had a lack of assets that could be used for the teaser phase of the site.
2. Without knowing what the events, games or announcements were going to be it was hard to think of a theme that could carry between the teaser phase and the events phase of the site to tie the two pieces together.
3. We knew that streaming was going to be a key component of the site, but weren't sure how or where the stream was going to be hosted.
The plan
1.Since there was video footage, trailers and other media assets from the previous year and there was going to be a strong emphasis on streaming content, we would leverage video as a large visual component of the site.
2. To mask the low quality of some of our assets, we would use a "screen" and "glass" theme / visual treatment to tie the teaser site and the live event site together.
Designs from Nintendo E3 2015
templates and specs
1. I created multiple wireframes which became templates that were used to produce the pages for the E3 2015 teaser and event site.
2. To accompany the wireframes, I wrote specification documents which outlined how the templates are used. It also covered the expected behaviors and scenarios based on the design.
high fidelity designs
For this project, I created high fidelity design comps to explore the visual design elements of the site. Some examples of these designs are shown below.
