\n\t\t\t\tMods V2: A user-generated content system\t\t\t<\/h3>\n\t\t\n\t\t\n\t\t\t<\/p>\nUpdating Bethesda’s mod system was a multi-year project packed with design and engineering challenges. \u00a0I was the primary designer from the earliest analysis to the final release; this included all design for the website, plus UX guidance and UI examples for in-game implementation.<\/p>\n
The design was guided by several core principals:<\/p>\n
\n- A presentation authors can be proud of<\/strong>\n
\n- Mod pages should look as polished as those of our own games<\/li>\n
- Updated UI, better mobile support, preview mode, localization<\/li>\n<\/ul>\n<\/li>\n
- A modern UGC system<\/strong>\n
\n- Provide features that authors, players, and admins expect to manage content<\/li>\n
- Curated lists, metadata draft system, accessibility improvements, admin tools<\/li>\n<\/ul>\n<\/li>\n
- An approachable experience<\/strong>\n
\n- Build a system for new players and seasoned gamers<\/li>\n
- Mixes, load order management, Creations Marketplace<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n
\u00a0<\/p>\n
Initial discussions<\/h4><\/div><\/div>![\"\"](\"https:\/\/neurostyle.net\/storyteller\/wp-content\/uploads\/2024\/09\/image-2-267x300.png\")
<\/a><\/p>\nThe earliest discussions focused on the website’s home page, which was a major destination and engagement point on the V1 site. \u00a0What content does it display? \u00a0How does navigation and identity work across sites? \u00a0This is a brief document to help the product team flesh out those answers.<\/p>\n
![\"download-24\"](\"https:\/\/neurostyle.net\/storyteller\/wp-content\/uploads\/2016\/05\/download-24.png\")
\u00a0 Mods Early Wireframes<\/a>\u00a0[PDF, 4.4MB]<\/span><\/h5>\n\u00a0<\/p><\/div>
<\/div>Creator UX competitive analysis<\/h4><\/div><\/div>![\"a](\"https:\/\/neurostyle.net\/storyteller\/wp-content\/uploads\/2024\/09\/image-300x121.png\")
<\/a><\/p>\nAn early step was looking at the experience of creators on popular platforms. \u00a0Why develop for one platform over another? \u00a0What are some drawbacks and friction points?<\/p>\n
\u00a0 Creator UX Competitive Analysis<\/a>\u00a0[PDF, 1.5MB]<\/span><\/h5>\n\u00a0<\/p><\/div>
<\/div>Mid-project UX review<\/h4><\/div><\/div>\n\n\n\nThere is a desire to model an open-world modding experience on Roblox: it is propelled by broad and engaging user-generated content, and is very popular and profitable. This has a fundamental UX obstacle.<\/em><\/span><\/h4>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\nI returned to Mods V2 after a period of working on other projects, so I performed a “UX regroup” to review the state of designs. \u00a0This included a look at depths of engagement to help prioritize features, a review of goals and in-flight features, and looking at the UX of in-game content systems.<\/p>\n
\u00a0 Mods UX Regroup<\/a>\u00a0[PDF]<\/span><\/h5>\n\u00a0<\/p><\/div>
<\/div>UI designs for production<\/h4><\/div><\/div>\n\t\t\t\n\t\t\t\t![\"\"](\"https:\/\/neurostyle.net\/storyteller\/wp-content\/uploads\/2024\/09\/image-4-150x150.png\")
<\/a>\n\t\t\t<\/div>\n\t\t\t\t\n\t\t\t\tFeatured mods\n\t\t\t\t<\/figcaption><\/figure>\n\t\t\t\n\t\t\t\t![\"\"](\"https:\/\/neurostyle.net\/storyteller\/wp-content\/uploads\/2024\/09\/image-5-150x150.png\")
<\/a>\n\t\t\t<\/div>\n\t\t\t\t\n\t\t\t\tA mod’s details\n\t\t\t\t<\/figcaption><\/figure>\n\t\t\t\n\t\t\t\t![\"\"](\"https:\/\/neurostyle.net\/storyteller\/wp-content\/uploads\/2024\/09\/image-7-150x150.png\")
<\/a>\n\t\t\t<\/div>\n\t\t\t\t\n\t\t\t\tLocalization for mod authors\n\t\t\t\t<\/figcaption><\/figure>\n\t\t\t\n\t\t\t\t![\"\"](\"https:\/\/neurostyle.net\/storyteller\/wp-content\/uploads\/2024\/09\/image-8-150x150.png\")
<\/a>\n\t\t\t<\/div>\n\t\t\t\t\n\t\t\t\tThe automated translation workflow with messaging\n\t\t\t\t<\/figcaption><\/figure>\n\t\t\t\n\t\t\t\t![\"\"](\"https:\/\/neurostyle.net\/storyteller\/wp-content\/uploads\/2024\/09\/image-6-150x150.png\")
<\/a>\n\t\t\t<\/div>\n\t\t\t\t\n\t\t\t\tLayout notes for developers\n\t\t\t\t<\/figcaption><\/figure>\n\t\t<\/div>\n\nThe early UI was built in Sketch, but I transitioned to Figma once we created our design system in it.\u00a0 Most designs were built in five mobile layouts.<\/p>\n
\u00a0<\/p><\/div>
<\/div>Playlists, a major feature<\/h4><\/div><\/div>Playlists (AKA mixes or collections) address a number of UX challenges when consuming mods, especially for new users: players can install a group of mods and<\/em> the configuration metadata that can make or break the stability of an installation.<\/p>\nThe earliest looks:<\/strong>\u00a0 A wireframe packed with concepts for discussion.<\/p>\n![\"\"](\"https:\/\/neurostyle.net\/storyteller\/wp-content\/uploads\/2024\/09\/World-page-wireframe-Copy-scaled-e1727244266923-161x300.jpg\")
<\/a><\/p>\nInitial interaction mockups:<\/strong>\u00a0 Once the site’s UI had been established, I returned to the feature and presented some mockups to refine content and interactions for both web and in-game interfaces.<\/p>\n![\"\"](\"https:\/\/neurostyle.net\/storyteller\/wp-content\/uploads\/2024\/09\/add-to-playlist-300x252.jpg\")
<\/a><\/p>\n\u00a0 Playlists UX Exploration<\/a>\u00a0[PDF, 10MB]<\/span><\/h5>\nIn-game content management:<\/strong> \u00a0Consuming mixes in-game is fairly straightforward UX, but customization is a complex set of concepts and interactions. \u00a0While our team didn’t build the in-game UI, I created a feature overview and list of interactions to help the game studio understand it and determine the level of effort and development needs.<\/p>\n![\"\"](\"https:\/\/neurostyle.net\/storyteller\/wp-content\/uploads\/2024\/09\/Mod-playlist-quick-mix-300x169.jpg\")
<\/a><\/p>\n\u00a0 Skyrim In-Game Content Management<\/a>\u00a0[PDF, 1.6MB]<\/span><\/h5><\/div><\/div>\t\t<\/div>\n\n\t\t\n\t\t\t\t\t\n\t\t\t\tApp personalities & developer guidelines\t\t\t<\/h3>\n\t\t\n\t\t\n\t\t\t<\/p>\nI realized a problem as we developed the Hound voice assistant at SoundHound:\u00a0 we had a dozen developers writing voice interactions that are presented through a unified interface.\u00a0 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.\u00a0 I tasked myself with creating an interaction \u201cstyle guide\u201d for developers so that all voice assistant features would feel consistent.\u00a0 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.<\/p>\n
Personality models<\/h4><\/div><\/div>![\"Hound-Personality-Model-(Radio-Edit)-5\"](\"https:\/\/neurostyle.net\/storyteller\/wp-content\/uploads\/2016\/05\/Hound-Personality-Model-Radio-Edit-5-256x192.jpg\")
<\/a><\/p>\nThe personality model, exploring the butler, assistant, and friend. \u00a0This is the shorter “radio edit”\u00a0version, intended for presentation in a meeting.<\/p>\n
\u00a0 Hound Personality Model (Radio Edit)<\/a>\u00a0[PDF, 10MB]<\/span><\/h5><\/div><\/div>Developer’s style guide<\/h4><\/div><\/div>![\"Hound-Response-Style-Guide-6\"](\"https:\/\/neurostyle.net\/storyteller\/wp-content\/uploads\/2016\/05\/Hound-Response-Style-Guide-6-300x240.jpg\")
<\/a><\/p>\nThe style guide, intended as a reference for developers.<\/p>\n
\u00a0 Hound\u00a0Response Style Guide<\/a>\u00a0[PDF]<\/span><\/h5><\/div><\/div>
\t\t<\/div>\n\n\t\t\n\t\t\t\t\t\n\t\t\t\tIntegrated update notifications\t\t\t<\/h3>\n\t\t\n\t\t\n\t\t\t
The integrated modification system was a great addition to Fallout 4<\/em>, but it did not have all the features of a modern distribution platform. \u00a0It introduced modding to a larger audience, including console players, that may not understand how mods differ from the base experience. \u00a0Consumers 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.<\/p>\nNotification proposal<\/h4><\/div><\/div>![\"\"](\"https:\/\/neurostyle.net\/storyteller\/wp-content\/uploads\/2016\/06\/FO4-Mod-Notifications-Samples-7-icons-444-300x169.jpg\")
\u00a0\u00a0<\/a>![\"\"](\"https:\/\/neurostyle.net\/storyteller\/wp-content\/uploads\/2016\/06\/FO4-Mod-Notifications-Samples-8-icons-interaction-300x169.jpg\")
<\/a><\/p>\nI suggested, via their forum,\u00a0designs for update notifications in the main menu, including a user story and alternative designs.<\/p>\n
\u00a0 FO4 Mod Update Notifications<\/a>\u00a0[PDF, 2.9MB]<\/span><\/h5><\/div><\/div>\t\t<\/div>\n\n\t\t\n\t\t\t\t\t\n\t\t\t\tA rich interface\t\t\t<\/h3>\n\t\t\n\t\t\n\t\t\t<\/p>\nDesigning 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.<\/p>\n
Prototype animation<\/h4><\/div><\/div>A continuous series of animations to express hierarchy – and look cool.<\/p>\n
![\"globe-24\"](\"https:\/\/neurostyle.net\/storyteller\/wp-content\/uploads\/2016\/05\/globe-24.png\")
\u00a0 Gallery prototype animations<\/a>\u00a0[YouTube]<\/span><\/h5><\/div><\/div>Color sampling<\/h4><\/div><\/div>![\"Color-Sampling-for-SoundHound-cover\"](\"https:\/\/neurostyle.net\/storyteller\/wp-content\/uploads\/2016\/06\/Color-Sampling-for-SoundHound-cover-300x183.jpg\")
\u00a0\u00a0![\"Color-Sampling-for-SoundHound-thumb\"](\"https:\/\/neurostyle.net\/storyteller\/wp-content\/uploads\/2016\/06\/Color-Sampling-for-SoundHound-thumb-300x183.jpg\")
<\/a><\/p>\nA presentation on the advantages, risks, design, and possible implementations of color-sampled UI palettes.<\/p>\n
\u00a0 Color Sampling for SoundHound<\/a>\u00a0[PDF, 11MB]<\/span><\/h5><\/div><\/div>Final UI specs<\/h4><\/div><\/div>![](\"https:\/\/neurostyle.net\/storyteller\/wp-content\/uploads\/2016\/06\/UI-Layout-specs-for-devs-300x169.png\")
<\/a><\/p>\nAfter 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. \u00a0These 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. \u00a0This is just the doc for an individual song’s screen; separate specifications are provided for artist and album screens, and a whole other\u00a0set for Android (in this case, produced by the UI designer).<\/p>\n
\u00a0 Track Page iOS Specs<\/a>\u00a0[PDF, 5.4MB]<\/span><\/h5><\/div><\/div>\t\t<\/div>\n\n\t\t\n\t\t\t\t\t\n\t\t\t\tThe Boosted app\t\t\t<\/h3>\n\t\t\n\t\t\n\t\t\t<\/p>\nBoosted needed a refreshed app to improve its look and support added\u00a0features, especially to keep public product updates going during the secret development of the V2 board. \u00a0We 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.<\/p>\n
\n\t\t\t\n\t\t\t\t![\"\"](\"https:\/\/neurostyle.net\/storyteller\/wp-content\/uploads\/2016\/06\/Boosted-Feed-1-Home-169x300.jpg\")
<\/a>\n\t\t\t<\/div><\/figure>\n\t\t\t\n\t\t\t\t![\"\"](\"https:\/\/neurostyle.net\/storyteller\/wp-content\/uploads\/2016\/06\/A1.2-Feed-Home-UI-open-169x300.jpg\")
<\/a>\n\t\t\t<\/div><\/figure>\n\t\t\t\n\t\t\t\t![\"\"](\"https:\/\/neurostyle.net\/storyteller\/wp-content\/uploads\/2016\/06\/Boosted-Feed-2-Spot-169x300.jpg\")
<\/a>\n\t\t\t<\/div><\/figure>\n\t\t<\/div>\n<\/p>\n
\n\t\t<\/div>\n\n\t\t\n\t\t\t\t\t
\n\t\t\t\tCreating consistent terminology\t\t\t<\/h3>\n\t\t\n\t\t\n\t\t\t<\/p>\nTP-LINK Research America was developing a new range extender as the first in a line of products specifically designed for the North American market. \u00a0This 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.”<\/em> \u00a0However, schedule and hardware requirements for the\u00a0first 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. \u00a0There was no way any significant interaction changes were going to happen.<\/p>\nHow could we improve the product experience given these restrictions? \u00a0One was to divert people to the companion\u00a0mobile app, which covered setup nicely. \u00a0I also saw the opportunity\u00a0for a more fundamental approach\u00a0to ensure the quality of the product from all angles: \u00a0consistent terminology for features and management.<\/p>\n
Terminology guide<\/h4><\/div><\/div>![\"Emilio](\"https:\/\/neurostyle.net\/storyteller\/wp-content\/uploads\/2016\/06\/Emilio-Gonzalez-Terminology-presentation-300x169.jpg\")
<\/a><\/p>\nThe existing UI was a mess of mixed terms and ambiguous wording. \u00a0Time to clean it up!<\/p>\n
\u00a0 TP-LINK Terminology Presentation<\/a>\u00a0[PDF]<\/span><\/h5><\/div><\/div>\t\t<\/div>\n\n\t\t\n\t\t\t\t\t\n\t\t\t\tMobile app interactions\t\t\t<\/h3>\n\t\t\n\t\t\n\t\t\t<\/p>\nTP-LINK feature flow<\/h4><\/div><\/div>![\"TPLINK-flow\"](\"https:\/\/neurostyle.net\/storyteller\/wp-content\/uploads\/2016\/06\/TPLINK-flow-300x168.jpg\")
\u00a0\u00a0![\"TPLINK-screens\"](\"https:\/\/neurostyle.net\/storyteller\/wp-content\/uploads\/2016\/06\/TPLINK-screens-300x169.jpg\")
<\/a><\/p>\nThere are many, many possible cases when dealing with wireless devices\u00a0and<\/em> naive users. \u00a0This is just the process for adding a range extender in the TP-LINK management app.<\/p>\n\u00a0 TP-LINK Add Device Interaction<\/a>\u00a0[PDF]<\/span><\/h5><\/div><\/div>Hound results<\/h4><\/div><\/div>Hound’s voice engine, Terrier, is genuinely unique and far beyond the abilities of the Nuance engine that powers many voice features. \u00a0I was looking for features to capitalize on the engine’s abilities and push Hound beyond the UI of a\u00a0single-task Siri clone. \u00a0Unfortunately, few of these features made it into the final app.<\/p>\n
Updating Bethesda’s mod system was a multi-year project packed with design and engineering challenges. \u00a0I was the primary designer from the earliest analysis to the final release; this included all design for the website, plus UX guidance and UI examples for in-game implementation.<\/p>\n
The design was guided by several core principals:<\/p>\n
- \n
- A presentation authors can be proud of<\/strong>\n
- \n
- Mod pages should look as polished as those of our own games<\/li>\n
- Updated UI, better mobile support, preview mode, localization<\/li>\n<\/ul>\n<\/li>\n
- A modern UGC system<\/strong>\n
- \n
- Provide features that authors, players, and admins expect to manage content<\/li>\n
- Curated lists, metadata draft system, accessibility improvements, admin tools<\/li>\n<\/ul>\n<\/li>\n
- An approachable experience<\/strong>\n
- \n
- Build a system for new players and seasoned gamers<\/li>\n
- Mixes, load order management, Creations Marketplace<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n
\u00a0<\/p>\n
Initial discussions<\/h4><\/div><\/div>
<\/a><\/p>\nThe earliest discussions focused on the website’s home page, which was a major destination and engagement point on the V1 site. \u00a0What content does it display? \u00a0How does navigation and identity work across sites? \u00a0This is a brief document to help the product team flesh out those answers.<\/p>\n
\u00a0 Mods Early Wireframes<\/a>\u00a0[PDF, 4.4MB]<\/span><\/h5>\n\u00a0<\/p><\/div>
<\/div>Creator UX competitive analysis<\/h4><\/div><\/div>
<\/a><\/p>\nAn early step was looking at the experience of creators on popular platforms. \u00a0Why develop for one platform over another? \u00a0What are some drawbacks and friction points?<\/p>\n
\u00a0 Creator UX Competitive Analysis<\/a>\u00a0[PDF, 1.5MB]<\/span><\/h5>\n\u00a0<\/p><\/div>
<\/div>Mid-project UX review<\/h4><\/div><\/div>
\n\n\n\nThere is a desire to model an open-world modding experience on Roblox: it is propelled by broad and engaging user-generated content, and is very popular and profitable. This has a fundamental UX obstacle.<\/em><\/span><\/h4>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
I returned to Mods V2 after a period of working on other projects, so I performed a “UX regroup” to review the state of designs. \u00a0This included a look at depths of engagement to help prioritize features, a review of goals and in-flight features, and looking at the UX of in-game content systems.<\/p>\n
\u00a0 Mods UX Regroup<\/a>\u00a0[PDF]<\/span><\/h5>\n\u00a0<\/p><\/div>
<\/div>UI designs for production<\/h4><\/div><\/div>
\n\t\t\t \n\t\t\t\t<\/a>\n\t\t\t<\/div>\n\t\t\t\t\n\t\t\t\tFeatured mods\n\t\t\t\t<\/figcaption><\/figure> \n\t\t\t \n\t\t\t\t<\/a>\n\t\t\t<\/div>\n\t\t\t\t\n\t\t\t\tA mod’s details\n\t\t\t\t<\/figcaption><\/figure> \n\t\t\t \n\t\t\t\t<\/a>\n\t\t\t<\/div>\n\t\t\t\t\n\t\t\t\tLocalization for mod authors\n\t\t\t\t<\/figcaption><\/figure> \n\t\t\t \n\t\t\t\t<\/a>\n\t\t\t<\/div>\n\t\t\t\t\n\t\t\t\tThe automated translation workflow with messaging\n\t\t\t\t<\/figcaption><\/figure> \n\t\t\t \n\t\t\t\t<\/a>\n\t\t\t<\/div>\n\t\t\t\t\n\t\t\t\tLayout notes for developers\n\t\t\t\t<\/figcaption><\/figure>\n\t\t<\/div>\n\n The early UI was built in Sketch, but I transitioned to Figma once we created our design system in it.\u00a0 Most designs were built in five mobile layouts.<\/p>\n
\u00a0<\/p><\/div>
<\/div>Playlists, a major feature<\/h4><\/div><\/div>
Playlists (AKA mixes or collections) address a number of UX challenges when consuming mods, especially for new users: players can install a group of mods and<\/em> the configuration metadata that can make or break the stability of an installation.<\/p>\n
The earliest looks:<\/strong>\u00a0 A wireframe packed with concepts for discussion.<\/p>\n
<\/a><\/p>\nInitial interaction mockups:<\/strong>\u00a0 Once the site’s UI had been established, I returned to the feature and presented some mockups to refine content and interactions for both web and in-game interfaces.<\/p>\n
<\/a><\/p>\n\u00a0 Playlists UX Exploration<\/a>\u00a0[PDF, 10MB]<\/span><\/h5>\nIn-game content management:<\/strong> \u00a0Consuming mixes in-game is fairly straightforward UX, but customization is a complex set of concepts and interactions. \u00a0While our team didn’t build the in-game UI, I created a feature overview and list of interactions to help the game studio understand it and determine the level of effort and development needs.<\/p>\n
<\/a><\/p>\n\u00a0 Skyrim In-Game Content Management<\/a>\u00a0[PDF, 1.6MB]<\/span><\/h5><\/div><\/div>\t\t<\/div>\n\n\t\t\n\t\t\t\t\t\n\t\t\t\tApp personalities & developer guidelines\t\t\t<\/h3>\n\t\t\n\t\t
\n\t\t\t<\/p>\nI realized a problem as we developed the Hound voice assistant at SoundHound:\u00a0 we had a dozen developers writing voice interactions that are presented through a unified interface.\u00a0 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.\u00a0 I tasked myself with creating an interaction \u201cstyle guide\u201d for developers so that all voice assistant features would feel consistent.\u00a0 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.<\/p>\n
Personality models<\/h4><\/div><\/div>
<\/a><\/p>\nThe personality model, exploring the butler, assistant, and friend. \u00a0This is the shorter “radio edit”\u00a0version, intended for presentation in a meeting.<\/p>\n
\u00a0 Hound Personality Model (Radio Edit)<\/a>\u00a0[PDF, 10MB]<\/span><\/h5><\/div><\/div>Developer’s style guide<\/h4><\/div><\/div>
<\/a><\/p>\nThe style guide, intended as a reference for developers.<\/p>\n
\u00a0 Hound\u00a0Response Style Guide<\/a>\u00a0[PDF]<\/span><\/h5><\/div><\/div>
\t\t<\/div>\n\n\t\t\n\t\t\t\t\t\n\t\t\t\tIntegrated update notifications\t\t\t<\/h3>\n\t\t\n\t\t
\n\t\t\t
The integrated modification system was a great addition to Fallout 4<\/em>, but it did not have all the features of a modern distribution platform. \u00a0It introduced modding to a larger audience, including console players, that may not understand how mods differ from the base experience. \u00a0Consumers 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.<\/p>\nNotification proposal<\/h4><\/div><\/div>
\u00a0\u00a0<\/a><\/a><\/p>\nI suggested, via their forum,\u00a0designs for update notifications in the main menu, including a user story and alternative designs.<\/p>\n
\u00a0 FO4 Mod Update Notifications<\/a>\u00a0[PDF, 2.9MB]<\/span><\/h5><\/div><\/div>\t\t<\/div>\n\n\t\t\n\t\t\t\t\t\n\t\t\t\tA rich interface\t\t\t<\/h3>\n\t\t\n\t\t
\n\t\t\t<\/p>\nDesigning 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.<\/p>\n
Prototype animation<\/h4><\/div><\/div>
A continuous series of animations to express hierarchy – and look cool.<\/p>\n
\u00a0 Gallery prototype animations<\/a>\u00a0[YouTube]<\/span><\/h5><\/div><\/div>Color sampling<\/h4><\/div><\/div>
\u00a0\u00a0<\/a><\/p>\nA presentation on the advantages, risks, design, and possible implementations of color-sampled UI palettes.<\/p>\n
\u00a0 Color Sampling for SoundHound<\/a>\u00a0[PDF, 11MB]<\/span><\/h5><\/div><\/div>Final UI specs<\/h4><\/div><\/div>
<\/a><\/p>\nAfter 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. \u00a0These 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. \u00a0This is just the doc for an individual song’s screen; separate specifications are provided for artist and album screens, and a whole other\u00a0set for Android (in this case, produced by the UI designer).<\/p>\n
\u00a0 Track Page iOS Specs<\/a>\u00a0[PDF, 5.4MB]<\/span><\/h5><\/div><\/div>\t\t<\/div>\n\n\t\t\n\t\t\t\t\t\n\t\t\t\tThe Boosted app\t\t\t<\/h3>\n\t\t\n\t\t
\n\t\t\t<\/p>\nBoosted needed a refreshed app to improve its look and support added\u00a0features, especially to keep public product updates going during the secret development of the V2 board. \u00a0We 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.<\/p>\n
\n\t\t\t \n\t\t\t\t<\/a>\n\t\t\t<\/div><\/figure>\n\t\t\t \n\t\t\t\t<\/a>\n\t\t\t<\/div><\/figure>\n\t\t\t \n\t\t\t\t<\/a>\n\t\t\t<\/div><\/figure>\n\t\t<\/div>\n<\/p>\n
\n\t\t<\/div>\n\n\t\t\n\t\t\t\t\t
\n\t\t\t\tCreating consistent terminology\t\t\t<\/h3>\n\t\t\n\t\t
\n\t\t\t<\/p>\nTP-LINK Research America was developing a new range extender as the first in a line of products specifically designed for the North American market. \u00a0This 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.”<\/em> \u00a0However, schedule and hardware requirements for the\u00a0first 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. \u00a0There was no way any significant interaction changes were going to happen.<\/p>\n
How could we improve the product experience given these restrictions? \u00a0One was to divert people to the companion\u00a0mobile app, which covered setup nicely. \u00a0I also saw the opportunity\u00a0for a more fundamental approach\u00a0to ensure the quality of the product from all angles: \u00a0consistent terminology for features and management.<\/p>\n
Terminology guide<\/h4><\/div><\/div>
<\/a><\/p>\nThe existing UI was a mess of mixed terms and ambiguous wording. \u00a0Time to clean it up!<\/p>\n
\u00a0 TP-LINK Terminology Presentation<\/a>\u00a0[PDF]<\/span><\/h5><\/div><\/div>\t\t<\/div>\n\n\t\t\n\t\t\t\t\t\n\t\t\t\tMobile app interactions\t\t\t<\/h3>\n\t\t\n\t\t
\n\t\t\t<\/p>\nTP-LINK feature flow<\/h4><\/div><\/div>
\u00a0\u00a0<\/a><\/p>\nThere are many, many possible cases when dealing with wireless devices\u00a0and<\/em> naive users. \u00a0This is just the process for adding a range extender in the TP-LINK management app.<\/p>\n
\u00a0 TP-LINK Add Device Interaction<\/a>\u00a0[PDF]<\/span><\/h5><\/div><\/div>Hound results<\/h4><\/div><\/div>
Hound’s voice engine, Terrier, is genuinely unique and far beyond the abilities of the Nuance engine that powers many voice features. \u00a0I was looking for features to capitalize on the engine’s abilities and push Hound beyond the UI of a\u00a0single-task Siri clone. \u00a0Unfortunately, few of these features made it into the final app.<\/p>\n
![\"Compacting-Results\"](\"https:\/\/neurostyle.net\/storyteller\/wp-content\/uploads\/2016\/06\/Compacting-Results-300x240.png\")
<\/a><\/p>\n![\"App-Instruction-Flows\"](\"https:\/\/neurostyle.net\/storyteller\/wp-content\/uploads\/2016\/06\/App-Instruction-Flows-300x188.png\")
<\/a><\/p>\n