Design Challenge: Take the successful Blancspot iPhone experience and bring it to the iPad, taking advantage of the larger screen and existing interaction paradigm of the iPad platform. Created a fully interactive Flash prototype to show off how the iPhone experience would be transfered to this new platform.

PlayMode Experience on iPad

The iPad version of Blancspot takes advantage of the very large screen of the iPad and really makes the Blancspot cinematic experience shine. A large, rich visual world sets Blancspot apart from all other news application running on the iPad.

ReaderMode Experience on iPad

ReaderMode on the iPad uses a unique two scrolling column approach that allows users to simultaneously read the news story and see relevant Tweets on the same screen. All of this is overlaid on the image to still keep the user connected with the strong visual the prompted their interaction in the first place.

Sharing via Facebook on iPad

Redesigned the Facebook sharing UX to be inline with standard iPad navigation style taking advantage of modal windows to focus the user on a singular action, but without taking them totally out of context from their previous state.

Design Challenge: Create a new way of experiencing news on mobile devices, integrating imagery, audio, motion and social networking. Did all concept, design work and would ultimately led the development team that built this iPhone app.

PlayMode Experience on iPhone

This is the signature cinematic experience of the Blancspot app built with a focus on a singular large image animated with a Ken Burns effect, set to contemporary music curated for each news channel. This is the starting point of the experience, automatically dropping the user into a stream of events happening in real-time with information about their friends activity integrated into the headline bar.

Dashboard Experience on iPhone

The Dashboard is the aggregate view of news, displaying all news channels for Blancspot, including the unique personal channels - Suggested, Friend's Activity and My Channel. Each personal channel offers a unique way of individual news consumption. "Suggested" news stories are stories your personal network have specifically recommended to you, "Friend's Activity" is news stories you friends are view currently and "My Channel" is both a personal news browser history, as well as stories set to be read later by the user.

ReaderMode Experience on iPhone

After tapping on the headline bar in PlayMode, the user is taken to ReaderMode to view the news story of interest. Here the user can read, view Tweets related to this event or share via email, Twitter, Facebook or Blancspot's unique 'Suggest' feature.

Design Challenge: Create a framework for the web version of the Reset Generation game to be housed in, that also gave the user quick access to specific gaming features - Rankings, Player Page, Player of the Day, Trophies, News and Event, etc.

Home page - Reset Generation.com

 The main goal for the home page was to create a comfortable place for users to play Reset Generation. The secondary goals for the site where to promote the game in general as well as promote N-Gage in general. One of the interesting things we did to support this, was embedded the game widget in a Nokia device frame that could be changed on the backend to promote whatever was the latest N-Gage compatible device.

 Rankings - Reset Generation.com

Rankings was bay far the most popular feature on N-Gage and Reset Generation would have some of the most active leaderboards of all N-Gage games. To avoid user having to sift through tons of boards and stats, we limited the number of stats we tracked for rankings, but added a "Belt" system that allowed players to earn belts if they were the current leader in a specific event i.e. Princess Rescued, best specific hero, etc. This allowed user to have unique reward, but not leave it locked to one player, like the top five in ranking boards tend to be.

Player Page - Reset Generation.com

Since Reset Generation was built to be a multiplayer game, Player Pages were critical to the success of the game. In addition to the expect features of stats, belts, achievements and hero art, we added a replay system that allowed users to watch all their past matches or the matches of others to learn tips and tricks on how to improve their game play. This was a first of it's kind for a mobile game.

Design Challenge: Create an international (translated in 11 languages) marketing site for the new Virtua Fighter 4 game franchise that showed off the new characters, stages and fighting styles. Even though this site was designed in 2002, over 8 years ago, it is still in use today - www.virtua-fighter-4.com

Virtua Fighter 4 - Intro

Clearly dated by todays standards of web design, this site, like many at the time contains the now ultra annoying "Skip Intro" button, but at the time, motion graphics on the web was something to actually sit through and enjoy.

 Virtua Fighter 4 - Home

The website's landing page was intentionally sparse to create maximum visual space for the game art and not add any additional elements to detract from rich character art. The site was divided intro three core areas - Characters, Fighting Styles and Stages, since each Fighter had a unique style, and a specific stage. The user could then cross navigate these areas, for example learning about a specific fighting style - Vale Tudo, would lead the user to Vanessa, where they would learn she fights on the Harbor stage.

 Virtua Fighter 4 - Character (Akira)

Virtua Fighter 4 - Stage (Temple)

The art direction and style established here would go on to be used in the follow up game the franchise - Virtua Fight 4 Evo and also used in print and other ad campaigns. The site was very well received by the notoriously picky AM2 development team, headed by the well known game designer Yu Suzuki.

 Ovi Organizer - Noteboard

In early 2008 IDEO was tasked by Nokia to research how users schedule and organize their personal lives. The research was done in five countries with 20 people providing in-depth access to their lives allowing the researchers to learn a great deal about a these people’s radically different methods of organizing their lives. The main findings are - Plans are often not concrete, people would write down things like, “Go shopping”, or “Try new restaurant”.

Ovi Organizer - IA

 Ovi Organizer - Note Creation

Communication is coordination - what we do and where we do it are often highly influenced by who we communicate with. Lastly, pretty much every person’s calendar/note system involved lot’s of duplication as they moved from written notes to digital communication tools. The solutions for this product covered nearly every Nokia platform, PC Web, Mobile Web, S60 Devices, S40 Devices and the new Linux OS - Maemo.

Ovi Organizer - Mobile Web UI

Design Challenge: Evolve the N-Gage games platform, taking what was successful (social connected games) and bring that to the new Nokia Maemo (Linux) platform. The design challenge included building a full new UI and UX for a platform that itself was not finished, creating moving target for design to hit. An additional goal was to find holes and limitation in the new platform that the various services would need resolved before final release. Unfortunately games would be cut as a key service for this device and much of this would would be shelved, awaiting a new device. 



Concept wire frames for Games on Maemo

This project would last four "Sprints" (not true agile development), each lasting about two weeks. During each iteration the design was simplified to shorten development time and to align with both the overall device UX and the other Nokia Services (Messaging, Music, Imagery, etc). The above image was made using a new technique for the team, (a variation on paper prototype), hand drawing UI on stickies cut to screen aspect ratio. This allowed us to quickly manipulate order and arrangement to iterate on the design with user feedback. New concepts could be made rapidly and inserted into the design and tested with users.

Detail wireframe (first pass) for Games on Maemo 

This was the first wire frame done to aligned the games service UX with the device UX. As we iterated on the design we removed extraneous features and improved consistency within our own service and consistency with the other services. We also found holes in the overall UX of the device, specifically with how native, vs. downloaded apps were to be handled. These lead to significant changes to the device UX paradigm.

Detail wireframe (Second pass) for Games on Maemo 

This final iteration was done to further align with device requirements and other services to create a completely seamless experience for our service with others. At this stage we were meeting with our own development team sizing the amount of development work this would be and preparing for building interactive flash prototypes to be tested with users in short user research studies. Unfortunately at this stage the games service as pulled as a key selling point for this device and the device itself was delayed. 

Portrait wireframe for Games on Maemo 

In designing our portrait solution for Games on Maemo, we chose to use a combination of limiting data visualization (Game library goes from 9 to 6 displayed games) and curated stacking of elements, (Games above social info). We felt this gaves us the best balance of information and consistency.