Call of Duty: Black Ops 4 (PC) Quick Look at the User Experience

Call of Duty: Black Ops 4 recently came out and I’ve found myself unexpectedly drawn into it. Though I loved Infinite Warfare’s single player story, it didn’t seem like many people stuck with the multiplayer. I was skeptical about Black Ops 4’s exclusively multiplayer approach, but it seems like the refocused approach is just what the series needed.

Aside from the gameplay, I first noticed how Black Ops 4 use of menus and icons in new ways from the previous Call of Duty games. Some of it works well, but other parts feel like they have some unnecessary friction. You’ll immediately hit some of these on the homepage.

Black Ops Homepage

The center of the screen is dedicated to the primary functions of the game: the training mode, a theater mode for viewing old matches, the store for in-game transactions, and the three primary multiplayer modes; Multiplayer, Blackout, and Zombies. Above each multiplayer mode is a callout to a specific playlist within that mode. For example, “Quads” allows you to play Blackout in a team of four.

There’s a bit of unnecessary friction caused by how sparse and stark the top menus are, but it’s also the kind of friction that will easy be resolved by the player’s natural exploration. No doubt Activision researched the menu layout extensively and determined that this configuration fit the problems they sought to solve. As is, it’s usable, but doesn’t do a lot to engage players who may be unfamiliar with everything the game has to offer. Furthermore, once you get into some of the more complex modes like Zombies the menu structure becomes a significant hindrance. Maybe I’ll revisit the information architecture and different approaches to the home menu in the future.

Another key component throughout the game is the footer toolbar, which provides access to core systems and areas throughout the game.

Footer toolbar

Unfortunately, the icons are a bit nondescript and unclear. On console the releases they’re replaced with prompts with hotkeys and text calling out each action, but on PC the player must hover over each to decipher their meaning.

Quit Icon Chat Icon Friends Icon Social Icon Settings Icon Player Account Link

Left to right the icons are Quit, Chat, Friends, Social, Settings, and Player Account. Quit and Chat are both represented by fairly standard icons, the IEC power symbol and a ubiquitous chat bubble respectively. Things get hairier when you get to the Friends and Social icons. Settings uses the common cog, which is also easy to recognize.

Things get weird with the remaining three items. One individual humanoid icon represents Friends, while two humanoid icons, one solid fill and another hollow, represent Social. Strangely, the word “PLAYER” is all we have for Player Account. Why not use three distinct icons? You can see where the problem starts. All three concepts often share similar icons; individuals or humanoids in silhouette, grouped in different ways to imply relationships. On their own these concepts can be useful, but when you need all three icons next to each other it’s a fine line between reinforcing your pattern or adding in extra confusion.

You can address this issue many different ways depending on audience you’re targeting and the device they’re using, but all three concepts can be replaced with clear, unique icons. For this scenario, we’ll target savvy first-person shooter fans. You can create as many different icon sets as there are different types of gamers, but given Call of Duty Black Ops 4’s emphasis on intense combat it’s safe to assume FPS players are one important demographic for Activision. Here’s one quick mock-up demonstrating some other icon ideas you can use to differentiate Friends, Social, and Player:

Same footer, but with icons redesigned for Social and Player Account

First, Friends takes the icon Social was using. The menu is listed as “Friends” plural, so illustrating two players is a useful design. The social icon is redone to demonstrate many users connecting, with a simple circle made up of round circles. We’re re-emphasizing the pattern from Friends, by using the solid and hollow circle heads as the nodes around the circle. Finally, the “PLAYER” text is replaced with a dog tag icon. Shooters often use dog tags to represent player profiles. In fact, in Call of Duty’s own Kill Confirmed mode dog tags drop from dead players and act as an objective to be retrieved by the team. And to tie all three together, the dog tag brings back the silhouette of an individual player.

These are just a few ideas and recommendations based on my own observations. Big budget games like Call of Duty often use extensive user research and UX design, so I imagine the team came to these icons based on the different problems they were hoping to solve. I believe in giving teams like this the benefit of the doubt in their design work, even if there’s some friction in my own experience.

The Wii U and Its Clutter: A Premature Hardware Post-Mortem

This last week I was just gifted a Sega Saturn and decided to re-arrange my gaming area to put the Nintendo 64, Sega Saturn and Sega Dreamcast near my up-scaler. Partially because of this addition and partially because of its relative disuse, I unplugged my Wii U and moved it to a different TV. It’s been awhile since I moved it and it really struck me how much clutter the Wii U brings with it.

First you have the unavoidable essentials that come with all modern consoles: HDMI, AC adapter for the console, and a USB cable to charge the Pro controller. Technically, you can use a Wii U with only these cables, but you will miss out on many GamePad specific games and experiences. To expand to the full feature set, you’re going to be including a second AC adapter for the GamePad and a sensor bar for Wii Remotes. If you have shelf space to burn, you can add a charging dock for the GamePad as well.

Already there are some possible improvements. Why doesn’t the Wii U GamePad use the same cable as the controllers? The GamePad could at least pull its power directly from the Wii U rather than from the wall. Better yet, the Wii U could also send the GamePad’s video over this magical cable rather than using WiFi. And the sensor bar need not be wired at all. Nyko has sold a wireless sensor bar for almost a decade; the Nintendo version could have improved on the Nyko version by being rechargeable and intelligently sleeping/waking when the console asked for it.

A mess of Wii U accessories and cables
Ew, Gross.

If you only play your Wii U casually and mostly buy physical copies of games, you probably only have as much clutter as comes with the Wii U. If you use your Wii U more frequently and purchase digital games, you will feel compelled to introduce more clutter into your house to compensate for at least two of the hardware’s main shortcomings: the network connection and storage space.

Since the Wii U prioritizes the GamePad’s connection for its 5.0 GHz WiFi, many will be forced to get a USB to ethernet adapter to overcome the congested world of 2.4GHz WiFi. Not to mention the Nintendo Network’s bad speeds. If you’ve been buying your games digitally, you’re going to need an external hard drive to store anything over the Wii U Deluxe’s 32GB of storage. Nintendo only recommends external desktop drives with their own power supplies, so there’s another power socket in addition to the hard drive’s USB cable.

There are only so many ways to handle WiFi problems, so the least Nintendo could have done would be to include a dedicated ethernet port. If the Wii U could send video to the GamePad over a wired cable, that would at least give some users the option to free up the 5.0GHz antenna if they live in an area with congested wireless. On the the further ends of possibility, the Wii U could use a more complex antenna or wireless protocol method to ensure that the Wii U and the GamePad both had full use of the wireless spectrum.

The storage problem has a range of solutions. Sony’s PlayStations 3 and 4 allow the user to swap in their own 2.5" hard drives to replace their smaller stock sizes. That doesn’t fit the Wii U’s compact design, but the Wii U’s design could have alleviated the problem by supporting game storage on SDXC cards, which can reach 256GB at affordable prices. The Wii U also could have supported USB 3.0 to allow portable external drives as the Xbox One does. Finally, the Wii U could have simply shipped with a larger storage model for enthusiasts to purchase or upgrade to.

Joyplus Handy Boy Accessory on a Game Boy
It’s like it wants to hug your face.

Cables and clutter aren’t always deal breakers for people. The plethora of plastic snap-ons for the Wii didn’t stop the console from flying off the shelves. And people buy new accessories for their consoles everyday hoping to make their lives easier. But I do think that the Wii U’s clutter demonstrates some of the reasons the Wii U has been such a historic failure for Nintendo.

First, the clutter demonstrates Nintendo’s faulty assumptions and the missed design opportunities they lead to. For example, the assumption that 2.4 GHz would be sufficient for the Wii U’s network connection sets off a series problems that require clutter to fix or end up driving away people. For every one person that seeks out an ethernet adapter because Netflix keeps buffering, I suspect at least a hundred more will just turn off their Wii U instead.

Second, the clutter shows that the Wii U lacks a strong concept to unify player experiences. Most Wii accessories centered around the Wii Remote Controller, as did the gameplay revolution the Wii hoped to bring about. By comparison the Wii U has a tablet GamePad for dual screen play, a Pro controller for mainstream games, support for Wii Remote Controllers for Wii games and many modern games, plus all the cables to support these controllers. It’s not never clear how you should expect to play a game until the game tells you that you’re using the wrong controller.

Wii console organizer
Console War Crimes.

Since the release and commercial failure of the Wii U, Nintendo has changed significantly. Nintendo consolidated its console and handheld hardware divisions, longtime CEO and president Satoru Iwata passed away, and the entire internal structure of the company has shifted. I believe that the next Nintendo console can learn from the Wii U’s mistakes. But more than anything, I hope that Nintendo realizes that their new play experiences have a real world cost that must be overcome. Players welcomed the original Wii’s plastic steering wheels and Nunchucks because the accessible, fun game experiences overcame the real world cost of storing the clutter in a whicker basket next to the couch. Players paid the premium price for the PlayStation 4 because of its 1080p resolution and Blu-ray Player. For most players, Wii U never overcame the cost of its clutter.

Gunpei Yokoi famously designed the Game Boy with older, more common parts to keep costs down and improve battery life. The Wii was the closest Nintendo has come to Yokoi’s philosophy since the Virtual Boy, and the Wii U could have taken more than it did from the Wii and the Game Boy. Shipping with last generation hardware at current generation prices, the Wii U only used as much of the Yokoi philosophy as directly benefitted Nintendo’s bottom line. All the solutions I’ve suggested would raise the cost of Wii U production and thus lower Nintendo’s profits. But the Wii U has never been cheap enough to justify its thrift, as the Wii was. And the Wii U’s old hardware does not improve the user experience, as the Game Boy’s battery savings did.

Going forward, I don’t believe that Nintendo’s next console needs to be a sleek, high-end machine like the PlayStation 4 to succeed. I believe that the Nintendo NX needs just a strong philosophy that guides the design of the console, its accessories, and the games that play on it. And please let me charge all the controllers with the same cable.

DIVA Collections Rebuild

Research, Wireframes, Prototypes, User Interface Design, Front-end Development

After redesigning the DIVA Collections area in 2013, the platform began to gain more popularity and visibility in the academic sphere. Several items in DIVA Collections began to draw traffic from social media sites and it soon became apparent that the DIVA backend needed to be rebuilt to meet the needs of the modern web. We realized that this also gave as an opportunity to substantially improve the service for users and collection owners alike. With this in mind, we began the process of rebuilding DIVA from the ground up.

It was important for me to consider the core requirements of current DIVA Collections while also letting my imagination see where we could expand our offerings. I began research by engaging with collection owners and seeing where DIVA wasn’t meeting their current needs. I sketched out how they envisioned their current workflow and what they desired from their workflow in OmniGraffle. Following these meetings, I paired with our digitization technician to interview users and potential users, such as university librarians, and faculty who could incorporate DIVA items into their curriculum. Working with DIVA’s lead developer, we began to re-imagine DIVA as a three application suite covering the three basic cores of DIVA: collections management, curation of digital assets, and public display.

Workflow with boxes describing each step in the proposed process.
This early pass began to place portions of collection owner's workflows within our larger understanding of the 2016 DIVA suite. Subsequent workflows would begin to reveal the complexity of application we were tackling.

From this research we established desired functionality and began creating wireframes to experiment and test where that functionality would live. We focused on these wireframes in workshops resulting in fast iterative designs in Balsamiq, Adobe XD, and Adobe Comp. These wireframes were quickly built into prototypes in Balsamiq or HTML to begin testing with stakeholders and the wider DIVA team, where our ideas were challenged and stretched further.

Balsamiq Mockup of DIVA Asset Queue concept
Early on we established the concept of queues to allow workflows that scaled with the size of the organization using the application

Wireframe of DIVA Collections Dashboard navigation HTML prototype of DIVA Collections Dashboard navigation
Ideas started in wireframes and moved to HTML prototypes for testing.

As the new DIVA Collection tools enter development this Fall, I look forward to building on the interfaces we created for the 2013 refresh with modern responsive techniques and a more engaging experience for users. Primary to this is the ability for users to create their own exhibitions of DIVA items from their own user curated collections, with full support for sharing across social networks. We also hope to implement a robust communications system that allows collection owners to keep their fans and patrons aware of recent additions and upcoming exhibitions.

Screenshot of Photoshop Mockup for new DIVA 2016 public view
Building on the decisions that motivated my 2013 redesign, I’ve begun to consider refinements and improvements for the new rebuild. This Photoshop render shows a cleaner grid based layout. The in-page navigation is first attempt to improve on user’s impressions that the larger DIVA collections could be hard to digest.

Nintendo Remembers 3DS Virtual Console Exists

Screenshot of Pokémon Yellow
Pokémon Yellow has this delightful frame when played on a Super Game Boy.

This Saturday will be a special occasion for the Nintendo 3DS: Pokémon Red, Blue, and Yellow will be the first Virtual Console releases on the 3DS in over a year. If you live in Europe or Japan, it’s been even longer since your last 3DS Virtual Console release. Nintendo may have had a good reason for killing the 3DS Virtual Console, but I’ve been disappointed by the decline of such a promising ecosystem.

I loved the the original Wii Virtual Console, despite it not being as capable as many PC emulators. The Wii Shop Channel had a diverse catalog and the prices usually beat the cost of the original cartridges. The promise of the original Wii was a console that would bring in new audiences to gaming, while providing more involved experiences for dedicated gamers. The nature of the Virtual Console exemplifies these ideals. Virtual Console games were cheaper and more accessible than hunting for old cartridges like a collector so that anyone could try a few games, putting Super Mario Bros. 3 back in the hands of grandmas everywhere. Nintendo’s Satoru Iwata hoped that the Wii would redefine backwards compatibility for hardcore gamers, saying that playing, “the first Excitebike, EarthBound or Punch-Out, should make us all feel young again, at least for a while.”

Slide from E3 Announcing the Wii game console, then known as the Nintendo Revolution
Would “Revolution U” have been as confusing?

But since the peak of the Wii, the Virtual Console has only declined. While the Wii launched with a large number of titles across many platforms and continued to grow, the 3DS Virtual Console launched with very few games and only supports a handful of platforms. One of those platforms isn’t even available to most 3DS owners; early 3DS adopters were given free GBA Virtual Console titles that have never been released to anyone else. The Super Nintendo, Sega Genesis, and other home platforms would be good fit for the 3DS’ hardware, but the 3DS Virtual Console only goes as far as NES games.

Then there are the technical issues. The original Wii had its share of technical drawbacks and glitches of course, but the biggest flaws were the lack of more advanced emulator features like Save States. The 3DS includes a reasonable facsimile of this feature, but lacks others. Game Boy games are only available in a drab green color scheme without access to the Game Boy Color or Super Game Boy palettes. Additionally, Pokémon Red, Blue and Yellow will be the first 3DS Virtual Console games to be able to use Game Link functionality over wireless. Of course these new features would take time to develop and implement, but if that’s a concern Nintendo should adjust the pricing model accordingly. The HD remake craze has rewarded faithful and considerate ports of games. It’s also a shame that the 3DS doesn’t allow you to remap buttons like the Wii U does.

Picture from Nintendo Patent filing demonstrating an ugly touch screen device
I guess I’ll play whatever this thing is.

As they plan their next console generation, Nintendo needs to make some decisions about how they’ll handle the future of the Virtual Console, if at all. If you visit the comment section on any Nintendo blog, you’ll see at least a few gamers suggesting that future of the Virtual Console is something similar to Sony’s PlayStation Now. PlayStation Now is sort of like Netflix meets Sega Channel. Pay for a monthly subscription or for a timed rental and Sony streams PlayStation 3 to your PlayStation 4, 3, Vita, and some special TV sets. I like the convenience of PlayStation Now and in my tests it’s always been a technical marvel.

After some adjustments, this approach could be compatible with Nintendo’s catalog, but one of the worst parts of PS Now is that you don’t own access to the games in anyway. Once I cancelled my PS Now subscription, my system was filled with husks of the old games I had tried. The Virtual Console already has generally anti-consumer ownership issues — like forcing you to pay extra to upgrade a Wii Virtual Console game to your Wii U — and a streaming service would just complicate the issue. The original Wii Virtual Console had 29 title delisted. They’re still available to people that purchased them, but a subscription service would need to address that issue somehow. Streaming services also require constant internet connections, which would really cut into my time with Mario’s Picross.

Slide from Nintendo of Japan presentation on the Nintendo 3DS Virtual Console

My dream Virtual Console wouldn’t be streaming based, but would have a subscription model closer to the Humble Monthly game service. Single games are still available for individual purchase, but the subscription service would guarantee a fresh feed of titles to try and a curated experience to highlight sleeper hits. While the dream Virtual Console would feature improvements on the technical backend, I’d be more excited if each game had a tighter Miiverse integration with collectible stamps and GIF recording. And of course, purchasing a game on one Nintendo platform should give me access on all of them with transferable save states.

Even without my daydream feature set, I think the Virtual Console can fulfill the promise it set out to achieve. Many classic games are still fun to play today and others are at least appeal to nostalgia. The next generation of game developers cutting their teeth on Super Mario Maker will also need access to the classic games that have become the keystones of the medium. While technical improvements are definitely needed for the Virtual Console to grow, it needs a steady stream of releases to even exist.

The Talk Show: Live From WWDC 2015

I just finished watching John Gruber’s The Talk Show: Live From WWDC 2015 video. Phil Schiller’s candor was almost as refreshing as his quick and dry sense of humor. I’m not an expert on Apple’s internal personalities, so my only glimpses into these people has been through the keynote events. Watching Schiller roll with audience reactions and banter with Gruber brought Apple down to Earth in a way that you don’t see in their events. Overall, the interview was more in-depth and satisfying that I could have imagined.

The Hole Story

The Hole Story won Grand Prize at the Girls Make Games Demo Day Competition in 2014 and was recently released on Here’s the premise:

After digging up a strange portal in her backyard, budding young archaeologist Wendy falls through time into a strange new land. She quickly discovers that her best chance of returning home is to rescue Alonna, a princess who has gone missing from the kingdom. Her goal in mind, Wendy sets about resolving the problem the best way she knows how – by digging of course!
I only just bought it, but from what I’ve played it’s clear that this is a very charming game by a group of talented students. I’m looking forward to playing the rest of it and seeing what else these designers will make.

iLearn Video App

Conception, Research, Wireframes, Prototypes User Interface Design, Graphic Design, Accessibility Design

The iLearn Video App allows students, faculty, and staff to quickly add video to iLearn Video. Though iLearn and the iLearn Video functionality were both designed to be reasonably responsive, the process of logging into iLearn through the university portal and navigating to your courses before uploading a video can be cumbersome. Similarly, the process of getting video onto a computer from a tablet or smartphone isn’t well understood by many users. The iLearn Video App would ease the process by allowing your device to be authenticated once and remain associated with your account for all future video uploads. Any videos would be added directly to your iLearn account, where they could be called on later to turn in assignments or add to your course.

Three sequential screenshots demonstrating three interfaces from the iOS iLearn Video App

The iLearn Video app icon

iLearn Video

Conception, Research, Wireframes, Prototypes, User Interface Design, Graphic Design

Universities have always had a need for video and the spread of video cameras through webcams, tablets, and smartphones has increased the amount of video that faculty and students generate themselves. Unfortunately, learning management systems rarely have support for these kinds of borne videos. The iLearn Video project aimed to add robust video support to San Francisco State University’s Moodle based LMS, iLearn.

Moodle's file picker dialog modified with new functionality.
Early wireframes like these helped guide technical discussions with the developers, while also helping engage stakeholders in the project.
Screenshot of iLearn Video upload interface
The final upload user interface at it exists in iLearn today.
Walla logo
iLearn Video was a long project and went through a few names before we settled on the final one. Originally, the project started with a San Francisco themed branding, "Presidio." After that, we went with "Walla," a reference to the act of actors having inaudible conversations in the backgrounds of film. I quickly created lightweight branding around each of the different names to help the project have a sense of wholeness.
iLearn Video logo
The final logo was a simplification of my work on the iLearn logo with a clean, "video" tagline. We hoped to create a logo that would look good on the web and in print.

Wii U: Wireless N vs. Ethernet Adapter

I originally posted this in September 2014 on a different site. With the impending release of Splatoon, I felt that now would be a good time to update it and post it again.

I had always believed that my Wireless N network was the superior way for the Wii U to connect to the Internet. Nintendo supports USB 2.0 to ethernet adapters, but I assumed that these would suffer from USB 2.0’s poor data speeds and therefore be inferior when Wireless N was available (though the Wii U is capable of dual-band Wireless N, it reserves the 5.0 GHz band for communication with the GamePad, so the network connection is limited to 2.4 GHz). But when my Monster Hunter 3U download failed twice, I ordered Monoprice’s Wii U ethernet adapter to give it a shot. My Wii U is very close to a wired switch, so running a cable isn’t an issue.

I got the adapter, ran some speed tests, and was surprised to find that the ethernet adapter provided nearly twice the download speed of my WiFi connection. With several tests via, I found I was only getting ~9.1 Mbps (1.1 MB/s) down and ~5.1 Mbps (640 kB/s) up over Wireless N. When I plugged in the ethernet adapter, I was getting ~19.6 Mbps (or 2.5 MB/s) down, ~4.9 Mbps (611 kB/s) up. Multiple tests showed that there was some variation in the upload speed, but the ethernet had a more consistent download graph without the spikes and valleys of the WiFi connection.

Your mileage may vary so I recommend running your own test. has the only speed test that I can find so far that works in the Wii U’s browser. If your 2.4Ghz band is congested and you find your Wii U downloads over WiFi frequently failing like I did, you may find the USB adapter to be pretty useful. You’ll also notice a benefit in games like Super Smash Brothers and Mario Kart 8. This weekend I found that I had a silky smooth connection during the Splatoon Global Testfire stress tests with only a few hiccups. I imagine the servers will be in even better shape with the official release on May 29, 2015.

DIVA Collections Redesign

Research, Wireframes, Prototypes, User Interface Design, Front-end Development

DIVA Collections have become an integral part of San Francisco State University’s archives, allowing the researchers, faculty, students, and the community at large to access rich digital resources. After their initial introduction in 2009, the user interface and back-end only received minimal attention even as the use of collections expanded. In 2013, I was assigned to revisit DIVA’s user interface with modern web best practices like responsive design. It was also a prime opportunity to address some common user feedback like adding support for HTML5 video and supporting better branding for individual collections.

Mockup of DIVA collections page
The redesigned DIVA collection area introduced a large area available for branding. This early mockup demonstrates how it might be used to show an introductory video for the collection.

DIVA Collection Folder
Each collection features several sub-collections, allowing users to curate their content. This mockup demonstrates an early idea of how to add rich media to the DIVA collections.

Fresca Redesign

Research, Wireframes, User Interface Design

Fresca came from the need for a California State University system-wide research expert database. It sought to create one convenient listing for researchers and the public to find experts working in fields they’re interested in. The original design was intentionally sparse, but this caused many of the more advanced features to be lost in a sea of sameness. The application needed some bold design elements to direct users’ usage without sacrificing the advanced functionality.

Wireframe of Fresca
This early Fresca prototype demonstrated how browsing for faculty would be re-designed to work more like a robust application.
Screenshot from live Fresca
This live screenshot of Fresca shows the evolution of the browsing concept to a much richer interaction with an attractive interface.
Mockup from Fresca front page development
This mockup of the Fresca front page came as part of a second phase update. We wanted to prominently feature updates and user profiles to give the site more life, while also giving more information about Fresca.