I went into UX design because I want to connect people with technology in meaningful and productive ways. Good UX design should account for a user’s emotional state and reactions, which may be true for video games more than any other software. The immersion that games offer presents an opportunity for a deeper connection than a music search or hardware companion app can accomplish, and that’s the challenge I’m looking for.
App personalities & developer guidelines
I realized a problem as we developed the Hound voice assistant at SoundHound: we had a dozen developers writing voice interactions that are presented through a unified interface. The more humans interact vocally with objects the more we expect them to act like a person, and without a consistent voice a UI might appear kind of crazy. I tasked myself with creating an interaction “style guide” for developers so that all voice assistant features would feel consistent. To achieve this, I first constructed models of several possible personalities, using a common and simple psychological method, to explore and contrast patterns of behavior.
Personality models
The personality model, exploring the butler, assistant, and friend. This is the shorter “radio edit” version, intended for presentation in a meeting.
Hound Personality Model (Radio Edit) [PDF, 10MB]
Developer’s style guide
Integrated update notifications
The integrated modification system was a great addition to Fallout 4, but it did not have all the features of a modern distribution platform. It introduced modding to a larger audience, including console players, that may not understand how mods differ from the base experience. Consumers expect to be notified of service-based changes – software updates, new email, instant messages – while the Bethesda.net mod system requires the user to open the mod menu to see wether there are updates.
Notification proposal
I suggested, via their forum, designs for update notifications in the main menu, including a user story and alternative designs.
FO4 Mod Update Notifications [PDF, 2.9MB]
A rich interface
Designing the recent content screen update for SoundHound presented the opportunity to improve interaction with meaningful transitions, rather than load up the UI with slick but wasteful animations. It was also a chance to address a design difficulty with SoundHound: a vast diversity of artist and album photos. I’d long ago created a scheme for photo cropping that worked well with random photos, but it was still challenging to avoid clashing with the various colors and tones – let alone look good with them. Instead of working around the colors, I opted to work with them by designing UIs that would sample the primary image’s colors and adapt the UI to them.
Prototype animation
A continuous series of animations to express hierarchy – and look cool.
Gallery prototype animations [YouTube]
Color sampling
A presentation on the advantages, risks, design, and possible implementations of color-sampled UI palettes.
Color Sampling for SoundHound [PDF, 11MB]
Final UI specs
After finalizing the design, in this case with a design director and UI designer, I make UI specs in different ways depending on a developer’s needs. These iOS specs are the format I most commonly use, as they are quick for the dev to work with and express the UI clearly to non-technical stakeholders. This is just the doc for an individual song’s screen; separate specifications are provided for artist and album screens, and a whole other set for Android (in this case, produced by the UI designer).
Track Page iOS Specs [PDF, 5.4MB]
The Boosted app
Boosted needed a refreshed app to improve its look and support added features, especially to keep public product updates going during the secret development of the V2 board. We had to keep our ambitions modest with all the resources tied up in hardware development, so we focused on features that required minimal server work and zero firmware changes.
Creating consistent terminology
TP-LINK Research America was developing a new range extender as the first in a line of products specifically designed for the North American market. This product line was meant to raise the stature of TP-LINK’s brand beyond the common perception of “affordable and functional, though not polished or innovative.” However, schedule and hardware requirements for the first range extender required the use of an older codebase from another device; even worse, the web management code was a big heap of purpose-built C with most of the HTML intertwined along the way. There was no way any significant interaction changes were going to happen.
How could we improve the product experience given these restrictions? One was to divert people to the companion mobile app, which covered setup nicely. I also saw the opportunity for a more fundamental approach to ensure the quality of the product from all angles: consistent terminology for features and management.
Terminology guide
The existing UI was a mess of mixed terms and ambiguous wording. Time to clean it up!
TP-LINK Terminology Presentation [PDF]
Mobile app interactions
TP-LINK feature flow
There are many, many possible cases when dealing with wireless devices and naive users. This is just the process for adding a range extender in the TP-LINK management app.
TP-LINK Add Device Interaction [PDF]
Hound results
Hound’s voice engine, Terrier, is genuinely unique and far beyond the abilities of the Nuance engine that powers many voice features. I was looking for features to capitalize on the engine’s abilities and push Hound beyond the UI of a single-task Siri clone. Unfortunately, few of these features made it into the final app.
Compacting results: The power of Hound’s speech engine allows for complex queries, but interaction should really focus on a chain of tasks related to one goal. Finding a restaurant may not be the only task If I want dinner tonight; I may also want to see if the weather is good for walking, request a ride service if it’s not, or ask some friends to join me. Instead of discarding the previous results, a compact history of queries is available just off-screen for quick reference or action.
News notifications: Hound presents a simple, monolithic interface to a very wide and increasingly deep feature set. Queries are also server-based, so it’s possible to add or significantly change features without updating the client app. How do we make sure that users know about new stuff? A low-key but clearly-stated notification would appear in the results area at every launch, then be moved to the sidebar when a query is run; the notification would disappear after viewing or a set time period.