{"id":231,"date":"2013-05-02T09:56:07","date_gmt":"2013-05-02T17:56:07","guid":{"rendered":"http:\/\/edwinli.com\/ux-v1-archive\/?page_id=231"},"modified":"2015-03-06T15:54:50","modified_gmt":"2015-03-06T23:54:50","slug":"portfolio","status":"publish","type":"page","link":"https:\/\/edwinli.com\/ux-v1-archive\/portfolio\/","title":{"rendered":"Portfolio"},"content":{"rendered":"<h1 class=\"hidden\">Portfolio<\/h1>\n<h2>Should an Interaction Design Portfolio Showcase Final Products? If Not That, Then What?<\/h2>\n<p>As an interaction designer, showing a portfolio of your work can be a bit of a perplexing challenge. The shipped product represents not just your skills as an interaction designer, but the skills and work of user experience researchers, visual designers, developers, marketers, and many other stakeholders.<\/p>\n<p>What, then, would best showcase the work and work style of an interaction designer?<\/p>\n<p>Maybe the answer lies in reversing that question: what might a prospective client, employer, or co-worker want to learn about an interaction designer in deciding whether their team and this designer would be a good fit?<\/p>\n<p>Here are a couple of key questions and answers to address that:<\/p>\n<dl>\n<dt>How does Edwin work, and what is he like to work with?<\/dt>\n<dd>Check out my <a title=\"Design Processes, Artifacts, and Work Style\" href=\"http:\/\/edwinli.com\/ux-v1-archive\/portfolio\/process\/\">Design Processes, Artifacts, and Work Style<\/a>.<\/dd>\n<dt>What kinds of projects has Edwin done for employers or clients?<\/dt>\n<dd>You can always refer to my <a title=\"Resume\" href=\"http:\/\/edwinli.com\/ux-v1-archive\/resume\/\">resume<\/a>, but for a more targeted answer to that question, my work history and experience include products in these categories (shown in more detail on my <a title=\"Design Processes, Artifacts, and Work Style\" href=\"http:\/\/edwinli.com\/ux-v1-archive\/portfolio\/process\/\">Design Processes, Artifacts, and Work Style<\/a> page):<\/p>\n<p>Here is an overview:<\/p>\n<ul>\n<li>\n<div id=\"attachment_335\" style=\"width: 217px\" class=\"wp-caption alignright\"><a href=\"http:\/\/edwinli.com\/ux-v1-archive\/portfolio\/ost-home-page-w-zoombox-simple\/\" rel=\"attachment wp-att-335\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-335\" data-attachment-id=\"335\" data-permalink=\"https:\/\/edwinli.com\/ux-v1-archive\/portfolio\/ost-home-page-w-zoombox-simple\/\" data-orig-file=\"https:\/\/edwinli.com\/ux-v1-archive\/wp-content\/uploads\/sites\/17\/2013\/06\/OST-home-page-w-zoombox-simple.png\" data-orig-size=\"1034,1496\" data-comments-opened=\"0\" data-image-title=\"Hybrid HTML\/CSS and Photoshop prototype &amp;#8211; home page with expanded zoombox\" data-image-description=\"&lt;p&gt;For this particular remote development team, the best way to provide guidance was with HTML\/CSS prototypes. To illustrate a keyframe in the interaction, however, it was easier to put together a Photoshop prototype composing the final look that I wanted using rendered HTML components whose positioning and look would have taken me much longer to do in just HTML\/CSS.&lt;\/p&gt;\n&lt;p&gt;I&amp;#8217;ve taken effort to cleanse this image of identifying information regarding the specific product and company for which this work was done.&lt;\/p&gt;\n\" data-image-caption=\"&lt;p&gt;A prototype for a web application, composed in Photoshop from rendered HTML\/CSS page components, showing a keyframe in the interaction that was more easily done in Photoshop than in just HTML\/CSS.&lt;\/p&gt;\n\" data-large-file=\"https:\/\/edwinli.com\/ux-v1-archive\/wp-content\/uploads\/sites\/17\/2013\/06\/OST-home-page-w-zoombox-simple-708x1024.png\" class=\"size-medium wp-image-335\" src=\"http:\/\/edwinli.com\/ux-v1-archive\/wp-content\/uploads\/sites\/2\/2013\/06\/OST-home-page-w-zoombox-simple-207x300.png\" alt=\"A screenshot prototype composed from rendered HTML\/CSS pages and components.\" width=\"207\" height=\"300\" srcset=\"https:\/\/edwinli.com\/ux-v1-archive\/wp-content\/uploads\/sites\/17\/2013\/06\/OST-home-page-w-zoombox-simple-207x300.png 207w, https:\/\/edwinli.com\/ux-v1-archive\/wp-content\/uploads\/sites\/17\/2013\/06\/OST-home-page-w-zoombox-simple-708x1024.png 708w, https:\/\/edwinli.com\/ux-v1-archive\/wp-content\/uploads\/sites\/17\/2013\/06\/OST-home-page-w-zoombox-simple-624x902.png 624w, https:\/\/edwinli.com\/ux-v1-archive\/wp-content\/uploads\/sites\/17\/2013\/06\/OST-home-page-w-zoombox-simple.png 1034w\" sizes=\"auto, (max-width: 207px) 100vw, 207px\" \/><\/a><p id=\"caption-attachment-335\" class=\"wp-caption-text\">A prototype for a web application, composed in Photoshop from rendered HTML\/CSS page components, showing a keyframe in the interaction that was more easily done in Photoshop than as just HTML\/CSS.<\/p><\/div>\n<p>Web applications:<\/p>\n<ul>\n<li>Business applications for: a specialized CRM domain (on SalesForce.com&#8217;s Force.com platform), order management, license management, service contract management, Yahoo Ad management<\/li>\n<\/ul>\n<\/li>\n<li>Java-based enterprise applications<\/li>\n<li>Software applications (Microsoft Office, user research on a part of it)<\/li>\n<li>Academic projects included: mobile phone software, TV remote control hardware and software, encylopedia software.<\/li>\n<\/ul>\n<p>Showing examples of these in a public portfolio can be problematic, for those reasons noted above as well as the fact that these examples are usually protected by non-disclosure agreements (NDAs) with employers and clients, who usually own the intellectual rights for those designs.<\/p>\n<p>Sharing these in more controlled ways may be acceptable, however. This can be done in an in-person interview, of course, but we may be able to arrange something else if that is too inconvenient. Please contact me for arrangements.<\/p>\n<\/dd>\n<dt class=\"clearboth\">What kind of design or product vision does Edwin offer? On what kinds of projects might Edwin be interested in working, given the right opportunity?<\/dt>\n<dd>I&#8217;ll include in my portfolio here a showcase of my design work from publishable professional work and personal projects. I explore themes and issues of interest in my personal  projects, and they may involve multiple iterations and phases, or they may be one-shot designs. <\/dd>\n<dd>\n<ul>\n<li>\n<div style=\"width: 310px\" class=\"wp-caption alignright\"><iframe loading=\"lazy\" width=\"300\" height=\"225\" src=\"https:\/\/www.youtube-nocookie.com\/embed\/99R-kpeko-I?rel=0\" frameborder=\"0\" allowfullscreen><\/iframe><\/p>\n<p class=\"wp-caption-text iframe-caption-customcss\">Driving mode prototype in action (45 seconds). Tools used: Photoshop, Proto.io, AZ Screen Recorder.<\/p>\n<\/div>\n<p>    \t\t<span class=\"inlineFieldLabel\"><a href=\"http:\/\/edwinli.com\/ux-v1-archive\/portfolio\/pandora-driving-mode\/\" title=\"Pandora Driving Mode\">Pandora Driving Mode<\/a> (2014):<\/span> In October 2014, I accepted a challenge to redesign Pandora&#8217;s mobile app or to add features at my discretion. After a quick heuristic evaluation, I focused on the core experience of Pandora&#8217;s mobile app&#8212;specifically, its Now Playing screen where users are probably spending most of their time, and that screen&#8217;s usage while on the go. I chose two areas in which I wanted to improve the app&#8217;s user experience.<\/p>\n<ul>\n<li>The first area was the Now Playing screen&#8217;s lack of any indication of what station users were listening to and it&#8217;s lack of any way to navigate directly to other stations. With Pandora&#8217;s app design of the time, users had to leave this screen, going up to the app&#8217;s home screen to change stations.<\/li>\n<li>The second area was the amount of visual attention and hand-eye coordination needed to interact with that screen. I felt it important to support users when they need to prioritize those resources for other activities like driving, riding a bicycle, running, or working out.\n<ul>\n<li>A  side benefit of this minimization, it turned out, is that it led towards a design that might translate well to the kind of incidental use cases expected in wearables such as smartwatches.<\/li>\n<\/ul>\n<\/li>\n<li>A full write-up of the design process with all the artifacts produced along the way is at the <a href=\"http:\/\/edwinli.com\/ux-v1-archive\/portfolio\/pandora-driving-mode\/\" title=\"Pandora Driving Mode\">Pandora Driving Mode<\/a> page, which includes both the abbreviated video demo seen to the right, and a video presentation of the prototype&#8217;s design.<\/li>\n<\/ul>\n<\/li>\n<li>\n<div id=\"attachment_939\" style=\"width: 310px\" class=\"wp-caption alignright\"><a href=\"http:\/\/edwinli.com\/ux-v1-archive\/wp-content\/uploads\/sites\/2\/2014\/04\/RedBeacon-Home-before-after-v0-02.png\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-939\" data-attachment-id=\"939\" data-permalink=\"https:\/\/edwinli.com\/ux-v1-archive\/portfolio\/redbeacon-home-before-after-v0-02\/\" data-orig-file=\"https:\/\/edwinli.com\/ux-v1-archive\/wp-content\/uploads\/sites\/17\/2014\/04\/RedBeacon-Home-before-after-v0-02.png\" data-orig-size=\"510,500\" data-comments-opened=\"0\" data-image-title=\"RedBeacon Home before-after v0-02\" data-image-description=\"\" data-image-caption=\"&lt;p&gt;The new design expands the app from a service request submitter to a home improvement project notebook.&lt;\/p&gt;\n\" data-large-file=\"https:\/\/edwinli.com\/ux-v1-archive\/wp-content\/uploads\/sites\/17\/2014\/04\/RedBeacon-Home-before-after-v0-02.png\" class=\"size-medium wp-image-939\" src=\"http:\/\/edwinli.com\/ux-v1-archive\/wp-content\/uploads\/sites\/2\/2014\/04\/RedBeacon-Home-before-after-v0-02-300x294.png\" alt=\"The new design expands the app from a service request submitter to a home improvement project notebook.\" width=\"300\" height=\"294\" srcset=\"https:\/\/edwinli.com\/ux-v1-archive\/wp-content\/uploads\/sites\/17\/2014\/04\/RedBeacon-Home-before-after-v0-02-300x294.png 300w, https:\/\/edwinli.com\/ux-v1-archive\/wp-content\/uploads\/sites\/17\/2014\/04\/RedBeacon-Home-before-after-v0-02.png 510w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><p id=\"caption-attachment-939\" class=\"wp-caption-text\">The new design expands the app from a service request submitter to a home improvement project notebook.<\/p><\/div>\n<p><a href=\"http:\/\/edwinli.com\/ux-v1-archive\/portfolio\/redbeacon-design-challenge\/\">RedBeacon design challenge<\/a> (2013): Redbeacon.com was looking for an interaction designer. In exploring the fit between my mindset, skills, and their needs, they offered a design challenge. This is my response, showing me to be more &#8220;user experience designer&#8221; than &#8220;interaction designer&#8221;\u2014as RedBeacon defines them.<\/p>\n<ul>\n<li>Web-viewable prototypes:\n<ul>\n<li><a title=\"PopApp interactive prototype (in browser)\" href=\"https:\/\/popapp.in\/w\/projects\/53bcee68d89a522132067114\/preview\/53bcf235c2ecede10acf5edc\">Web Prototype: Start Project by Typing<\/a><\/li>\n<li><a title=\"PopApp interactive prototype (in browser)\" href=\"https:\/\/popapp.in\/w\/projects\/53bcf3e5d89a52213206718e\/preview\/53bcf4d7e90017ca22b663aa\">Web Prototype: Start Project by Taking a Picture<\/a><\/li>\n<\/ul>\n<\/li>\n<li>While our fit was not ultimately right, I learned through this process one company&#8217;s distinction between a &#8220;user experience designer&#8221; and an &#8220;interaction designer.&#8221; Where I had understood the terms and roles to be interchangeable, their hiring manager drew a distinction between them, with user experience designers being more wholistic, providing designs for higher level aspects of products and services\u2014e.g,, how a product or service might fit into users&#8217; lives\u2014where interaction designers are more focused on the details of screen designs and the coding of those screens.<\/li>\n<\/ul>\n<\/li>\n<li style=\"margin-top: 5rem;\">\n<div id=\"attachment_289\" style=\"width: 310px\" class=\"wp-caption alignright\"><a href=\"http:\/\/edwinli.com\/ux-v1-archive\/portfolio\/03c-command-drawer-open\/\" rel=\"attachment wp-att-289\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-289\" data-attachment-id=\"289\" data-permalink=\"https:\/\/edwinli.com\/ux-v1-archive\/portfolio\/03c-command-drawer-open\/\" data-orig-file=\"https:\/\/edwinli.com\/ux-v1-archive\/wp-content\/uploads\/sites\/17\/2013\/05\/03c-Command-drawer-open.png\" data-orig-size=\"1239,974\" data-comments-opened=\"0\" data-image-title=\"Prototype, Action drawer to the right, webOS v3+ Actionable Notifications\" data-image-description=\"&lt;p&gt;This prototype is an exploration of one design direction for evolving webOS v3.x&amp;#8217; much-lauded notification system, arguably one of the best available in any mobile OS since webOS\u2019 debut at CES 2009.&lt;\/p&gt;\n&lt;p&gt;Striving to make webOS&amp;#8217; notifications actionable\u2014that is, giving users the ability to take action on the app&amp;#8217;s content about which they were notified directly from the notification without having to first open the related app and leaving the one they&amp;#8217;re in\u2014the proposed solution is to offer a default action that is directly available (i.e., as a tap target) and a set of actions that are available upon the expansion of an action drawer.&lt;\/p&gt;\n&lt;p&gt;In this prototype, the action drawer opens (with smooth animation) as a vertical array to the right of the notification for which it was invoked and on which the actions will apply. The actions for this email notification stack are, from top to bottom: Flag, Mark as Spam, Recycle Notification, Mark as Read, and Help (invokes pop-up labels for each of the actions&amp;#8217; icons). Delete (which is the default action), and the Close Drawer button (triangle) are in the same places where they were prior to expanding the drawer, for reasons of interface stabilty.&lt;\/p&gt;\n&lt;p&gt;I had two other design directions (literally) that I wanted to explore\u2014for the action drawer to open as a translucent overlay over the relevant notification and for the action drawer to open into a new row to expand below the relevant notification.&lt;\/p&gt;\n&lt;p&gt;Artifacts from other UX stages of this project include:&lt;\/p&gt;\n&lt;ul&gt;\n&lt;li&gt;&lt;a href=&quot;http:\/\/edwinli.com\/ux-v1-archive\/?attachment_id=278&quot; title=&quot;Paper Sketch, Actionable notifications for webOS v3+&quot;&gt;a paper sketch&lt;\/a&gt;, in which the seeds of these three directions were brainstormed&lt;\/li&gt;\n&lt;li&gt;three sets of Balsamiq Mockups prototypes, from which this prototype comes. Samples from the other two: &lt;a href=&quot;http:\/\/edwinli.com\/ux-v1-archive\/?attachment_id=287&quot; title=&quot;Prototype, Action drawer overlaid, webOS v3+ Actionable Notifications&quot;&gt;action drawer as overlay&lt;\/a&gt; and &lt;a href=&quot;http:\/\/edwinli.com\/ux-v1-archive\/?attachment_id=288&quot; title=&quot;Prototype, Action drawer below, webOS v3+ Actionable Notifications&quot;&gt;action drawer to expand below&lt;\/a&gt;)&lt;\/li&gt;\n&lt;li&gt;one interaction flow diagram for each of these design directions: &lt;a href=&quot;http:\/\/edwinli.com\/ux-v1-archive\/?attachment_id=296&quot; title=&quot;Prototype interaction flow, Action drawer overlaid, webOS v3+ Actionable Notifications&quot;&gt;action drawer as overlay&lt;\/a&gt;, &lt;a href=&quot;http:\/\/edwinli.com\/ux-v1-archive\/?attachment_id=380&quot; title=&quot;Prototype interaction flow, Action drawer below, webOS v3+ Actionable Notifications&quot;&gt;action drawer to expand below&lt;\/a&gt;, and &lt;a href=&quot;http:\/\/edwinli.com\/ux-v1-archive\/?attachment_id=297&quot; title=&quot;Prototype interaction flow, Action drawer to the right, webOS v3+ Actionable Notifications&quot;&gt;action drawer to expand to the right&lt;\/a&gt;&lt;\/li&gt;\n&lt;li&gt;&lt;a href=&quot;http:\/\/edwinli.com\/ux-v1-archive\/wp-content\/uploads\/sites\/2\/2013\/05\/Improved-Notifications-v0-1-Clickable-prototype.pdf&quot; title=&quot;Improved Notifications v0-1 Clickable prototype&quot;&gt;a clickable PDF prototype (download; action drawer to the right)&lt;\/a&gt;.&lt;\/li&gt;\n&lt;\/ul&gt;\n&lt;p&gt;As a fan of webOS, I did this as a personal project. I will write a fuller article about the project, but my &lt;a href=&quot;http:\/\/edwinli.com\/ux-v1-archive\/wp-content\/uploads\/sites\/2\/2013\/05\/Improving-Notifications-Phase-One-Actionable-Notifications-Design-Vision-v0-1.pdf&quot; title=&quot;Actionable Notifications for webOS 3.x+: Vision and Design&quot;&gt;39-page design vision document&lt;\/a&gt; is available now. In it, I document the process that I followed from rationale to sketches and a couple of iterations of prototypes produced in Balsamiq Mockups.&lt;\/p&gt;\n\" data-image-caption=\"&lt;p&gt;A Balsamiq Mockups prototype for an action drawer that opens vertically to the right as an actionable notifications framework that evolves webOS v3.x&amp;#8217; much-lauded notification system.&lt;\/p&gt;\n\" data-large-file=\"https:\/\/edwinli.com\/ux-v1-archive\/wp-content\/uploads\/sites\/17\/2013\/05\/03c-Command-drawer-open-1024x805.png\" class=\"size-medium wp-image-289\" src=\"http:\/\/edwinli.com\/ux-v1-archive\/wp-content\/uploads\/sites\/2\/2013\/05\/03c-Command-drawer-open-300x235.png\" alt=\"The prototype shows the frame of the HP Touchpad, the status bar from within an application, the notification area dropped down, and the action drawer opened.\" width=\"300\" height=\"235\" \/><\/a><p id=\"caption-attachment-289\" class=\"wp-caption-text\">A Balsamiq Mockups prototype for an action drawer that opens vertically to the right as an actionable notifications framework that evolves webOS v3.x&#8217; much-lauded notification system.<\/p><\/div>\n<p><span class=\"inlineFieldLabel\">Notifications<\/span> (personal project): Expanding them from siloed, single-mobile-device notifications to multiple-device, cross-platform, coordinated, system-wide Personal Digital Infrastructure (PDI) notifications. That&#8217;s the theme, and it will involve a number of iterations and phases. Here&#8217;s what&#8217;s available now:<\/p>\n<ul>\n<li>Actionable notifications for webOS v3.x+: webOS notifications are arguably among the best of the best in any mobile OS. I aim to make them better.\n<p>I will write a fuller article about the project, but my <a title=\"Actionable Notifications for webOS 3.x+: Vision and Design\" href=\"http:\/\/edwinli.com\/ux-v1-archive\/wp-content\/uploads\/sites\/2\/2013\/05\/Improving-Notifications-Phase-One-Actionable-Notifications-Design-Vision-v0-1.pdf\">39-page design vision document<\/a> (PDF, 5 MB) is available now. In it, I document the process that I followed from rationale to sketches and a couple of iterations of prototypes produced in Balsamiq Mockups. I also have <a title=\"Improved Notifications v0-1 Clickable prototype\" href=\"http:\/\/edwinli.com\/ux-v1-archive\/wp-content\/uploads\/sites\/2\/2013\/05\/Improved-Notifications-v0-1-Clickable-prototype.pdf\">a clickable prototype<\/a> (PDF, 940 KB) of one of the design options.<\/li>\n<\/ul>\n<\/li>\n<li class=\"clearboth\"><span class=\"inlineFieldLabel\">Mobile Apps<\/span>\n<ul>\n<li>\n<div id=\"attachment_286\" style=\"width: 186px\" class=\"wp-caption alignright\"><a href=\"http:\/\/edwinli.com\/ux-v1-archive\/portfolio\/03-filters-drawer\/\" rel=\"attachment wp-att-286\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-286\" data-attachment-id=\"286\" data-permalink=\"https:\/\/edwinli.com\/ux-v1-archive\/portfolio\/03-filters-drawer\/\" data-orig-file=\"https:\/\/edwinli.com\/ux-v1-archive\/wp-content\/uploads\/sites\/17\/2013\/05\/03-Filters-drawer.gif\" data-orig-size=\"423,721\" data-comments-opened=\"0\" data-image-title=\"Prototype (Balsamiq Mockup), Filter drawer for mapped data\" data-image-description=\"&lt;p&gt;My process often goes from a content model to a paper sketch to a prototype made in Balsamiq Mockups to a set of prototypes in Balsamiq Mockups (to show an scenario of use or an interaction flow). This is an example from the Balsamiq Mockup prototype stage, fleshing out in greater fidelity what was sketched earlier.&lt;\/p&gt;\n&lt;p&gt;This is the map screen of a mobile app on which geographically-based classified ads are mapped. The interaction goal here is to allow useful default filters to be in effect, but to also allow dynamic filtering and real-time exploration of the set of results.&lt;\/p&gt;\n&lt;p&gt;Taking inspiration from Schneiderman&amp;#8217;s &amp;#8220;&lt;a href=&quot;http:\/\/www.cs.umd.edu\/hcil\/spotfire\/&quot; title=&quot;Schneiderman&#039;s article&quot;&gt;Dynamic queries, starfield displays, and the path to Spotfire&lt;\/a&gt;&amp;#8221; work, the design uses panels of manipulable filters that are translucent to allow users to see the effects of real-time manipulation of those filters on the result set. For reasons of space, those filter panels are not normally visible, but can be made visible by tapping a visible drop-down target (labeled &amp;#8220;Filters&amp;#8221;, of course), balancing the competing constraints of real-estate, occlusion, and less than constant usage.&lt;\/p&gt;\n&lt;p&gt;This is a sketch from a personal project, a mobile app intended as an intelligent DVR for real-time streams of geographically based mobile ads. Other stages of that project include &lt;a href=&quot;http:\/\/edwinli.com\/ux-v1-archive\/?attachment_id=305&quot; title=&quot;Map View content model, Ad Finder (Mobile App)&quot;&gt;a content model for this screen&lt;\/a&gt; and &lt;a href=&quot;http:\/\/edwinli.com\/ux-v1-archive\/?attachment_id=303&quot; title=&quot;Sketch, Filter panels for map-based, mobile app&quot;&gt;a paper sketch of this page&lt;\/a&gt;. A write-up of this project as a portfolio page is forthcoming, but you can &lt;a href=&quot;http:\/\/edwinli.com\/ux-v1-archive\/?attachment_id=232&quot; title=&quot;Location-Based Classifieds Mobile App, Motivation and design v0-1&quot;&gt;download the 21 page report&lt;\/a&gt; now.&lt;\/p&gt;\n\" data-image-caption=\"&lt;p&gt;A prototype made in Balsamiq Mockups for a map-based, mobile app that is intended to support dynamic queries and results exploration (as described by Schneiderman). The then-standard webOS floating heading (here, &amp;#8220;Locations&amp;#8221;) is elaborated with a magnifying glass and a &amp;#8220;Filters&amp;#8221; section. Each of those summon translucent dropdown panels.&lt;\/p&gt;\n\" data-large-file=\"https:\/\/edwinli.com\/ux-v1-archive\/wp-content\/uploads\/sites\/17\/2013\/05\/03-Filters-drawer.gif\" class=\"size-medium wp-image-286\" src=\"http:\/\/edwinli.com\/ux-v1-archive\/wp-content\/uploads\/sites\/2\/2013\/05\/03-Filters-drawer-176x300.gif\" alt=\"A prototype made in Balsamiq Mockups for a map-based, mobile app that is intended to support dynamic queries and results exploration (as described by Schneiderman). The then-standard webOS floating heading (here, &quot;Locations&quot;) is elaborated with a magnifying glass and a &quot;Filters&quot; section. Each of those summon translucent dropdown panels.\" width=\"176\" height=\"300\" \/><\/a><p id=\"caption-attachment-286\" class=\"wp-caption-text\">A prototype made in Balsamiq Mockups for a map-based, mobile app that is intended to support dynamic queries and results exploration (as described by Schneiderman). The then-standard webOS floating heading (here, &#8220;Locations&#8221;) is elaborated with a magnifying glass and a &#8220;Filters&#8221; section. Each of those summon translucent dropdown panels.<\/p><\/div>\n<p>A mobile app that serves as an intelligent and searchable &#8220;DVR&#8221; app for real-time streams of location-based classified ads. Classified ad systems like Craigslist are a real-time stream of ads that users might have to constantly scan or spend a lot of time rewinding and scanning forward to the present in order to be sure not to miss anything. Why not create an intelligent DVR for that stream, &#8220;recording&#8221; the most recent version of ads that users are likely to be interested?<\/p>\n<p>&#8230;Even better, if the ads have a geographical component, why not just map those and be able to show users what&#8217;s nearby or near a location of interest?<\/p>\n<p>A write-up of this project as a portfolio page is forthcoming, but you can <a title=\"Location-Based Classifieds Mobile App, Motivation and design v0-1\" href=\"http:\/\/edwinli.com\/ux-v1-archive\/?attachment_id=232\">download the 21 page report<\/a> now.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/dd>\n<\/dl>\n<nav>\n<h2>More About Edwin<\/h2>\n<ul class=\"navInternal\">\n<li><a href=\"http:\/\/edwinli.com\/ux-v1-archive\/about\/\" title=\"About Edwin\">About Edwin<\/a><\/li>\n<li><a href=\"http:\/\/edwinli.com\/ux-v1-archive\/resume\/\" title=\"Resume\">Resume<\/a><\/li>\n<li><span class=\"here\">Portfolio<\/span>\n<ul>\n<li><a href=\"http:\/\/edwinli.com\/ux-v1-archive\/portfolio\/process\/\">Design Processes, Work artifacts, and Work Style<\/a><\/li>\n<li><a href=\"http:\/\/edwinli.com\/ux-v1-archive\/portfolio\/redbeacon-design-challenge\/\">Redbeacon Design Challenge<\/a>\n<ul>\n<li><a href=\"http:\/\/edwinli.com\/ux-v1-archive\/portfolio\/redbeacon-design-challenge\/essential-use-cases-redbeacon\/\">Essential Use Cases [Redbeacon]<\/a><\/li>\n<\/ul>\n<\/li>\n<li><a href=\"http:\/\/edwinli.com\/ux-v1-archive\/pandora-driving-mode\/\">Pandora Driving Mode<\/a><\/li>\n<\/ul>\n<\/li>\n<li><a href=\"http:\/\/edwinli.com\/ux-v1-archive\/quest\/\">Job Quest<\/a>\n<ul>\n<li><a href=\"http:\/\/edwinli.com\/ux-v1-archive\/quest\/ideal\/\">Ideal Job Description<\/a>: What I am looking for in a company, role, and work environment, presented as a job description. Are you what I&#8217;m looking for?<\/li>\n<\/ul>\n<\/li>\n<li><a href=\"http:\/\/www.linkedin.com\/in\/edwinli\">LinkedIn profile<\/a><\/li>\n<\/ul>\n<\/nav>\n","protected":false},"excerpt":{"rendered":"<p>Portfolio Should an Interaction Design Portfolio Showcase Final Products? If Not That, Then What? As an interaction designer, showing a portfolio of your work can be a bit of a perplexing challenge. The shipped product represents not just your skills as an interaction designer, but the skills and work of user experience researchers, visual designers, [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":1091,"parent":0,"menu_order":4,"comment_status":"closed","ping_status":"closed","template":"page-templates\/full-width.php","meta":{"footnotes":""},"class_list":["post-231","page","type-page","status-publish","has-post-thumbnail","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.8 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Portfolio - [v1 Archive] UX-Colored Glasses<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/edwinli.com\/ux-v1-archive\/portfolio\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Portfolio - [v1 Archive] UX-Colored Glasses\" \/>\n<meta property=\"og:description\" content=\"Portfolio Should an Interaction Design Portfolio Showcase Final Products? If Not That, Then What? As an interaction designer, showing a portfolio of your work can be a bit of a perplexing challenge. The shipped product represents not just your skills as an interaction designer, but the skills and work of user experience researchers, visual designers, [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/edwinli.com\/ux-v1-archive\/portfolio\/\" \/>\n<meta property=\"og:site_name\" content=\"[v1 Archive] UX-Colored Glasses\" \/>\n<meta property=\"article:modified_time\" content=\"2015-03-06T23:54:50+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/edwinli.com\/ux-v1-archive\/wp-content\/uploads\/sites\/17\/2015\/03\/UxD-Banner-v02-base-WP-Nirvana-ratio-1920x580-DSC_2392ed02.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1920\" \/>\n\t<meta property=\"og:image:height\" content=\"580\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/edwinli.com\\\/ux-v1-archive\\\/portfolio\\\/\",\"url\":\"https:\\\/\\\/edwinli.com\\\/ux-v1-archive\\\/portfolio\\\/\",\"name\":\"Portfolio - [v1 Archive] UX-Colored Glasses\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/edwinli.com\\\/ux-v1-archive\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/edwinli.com\\\/ux-v1-archive\\\/portfolio\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/edwinli.com\\\/ux-v1-archive\\\/portfolio\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/edwinli.com\\\/ux-v1-archive\\\/wp-content\\\/uploads\\\/sites\\\/17\\\/2015\\\/03\\\/UxD-Banner-v02-base-WP-Nirvana-ratio-1920x580-DSC_2392ed02.jpg\",\"datePublished\":\"2013-05-02T17:56:07+00:00\",\"dateModified\":\"2015-03-06T23:54:50+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/edwinli.com\\\/ux-v1-archive\\\/portfolio\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/edwinli.com\\\/ux-v1-archive\\\/portfolio\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/edwinli.com\\\/ux-v1-archive\\\/portfolio\\\/#primaryimage\",\"url\":\"https:\\\/\\\/edwinli.com\\\/ux-v1-archive\\\/wp-content\\\/uploads\\\/sites\\\/17\\\/2015\\\/03\\\/UxD-Banner-v02-base-WP-Nirvana-ratio-1920x580-DSC_2392ed02.jpg\",\"contentUrl\":\"https:\\\/\\\/edwinli.com\\\/ux-v1-archive\\\/wp-content\\\/uploads\\\/sites\\\/17\\\/2015\\\/03\\\/UxD-Banner-v02-base-WP-Nirvana-ratio-1920x580-DSC_2392ed02.jpg\",\"width\":1920,\"height\":580,\"caption\":\"Minded to design for ecosystems of usage across multiple devices and the cloud, this is Edwin with a sampling of the prototyping artifacts that he employs: paper and whiteboard sketches, Balsamiq Mockups prototypes, Photoshop prototypes fed into interactive on-device prototypes, HTML\\\/CSS prototypes, and UI specifications.\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/edwinli.com\\\/ux-v1-archive\\\/portfolio\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/edwinli.com\\\/ux-v1-archive\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Portfolio\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/edwinli.com\\\/ux-v1-archive\\\/#website\",\"url\":\"https:\\\/\\\/edwinli.com\\\/ux-v1-archive\\\/\",\"name\":\"[v1 Archive] UX-Colored Glasses\",\"description\":\"Edwin Li on User Experience\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/edwinli.com\\\/ux-v1-archive\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Portfolio - [v1 Archive] UX-Colored Glasses","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/edwinli.com\/ux-v1-archive\/portfolio\/","og_locale":"en_US","og_type":"article","og_title":"Portfolio - [v1 Archive] UX-Colored Glasses","og_description":"Portfolio Should an Interaction Design Portfolio Showcase Final Products? If Not That, Then What? As an interaction designer, showing a portfolio of your work can be a bit of a perplexing challenge. The shipped product represents not just your skills as an interaction designer, but the skills and work of user experience researchers, visual designers, [&hellip;]","og_url":"https:\/\/edwinli.com\/ux-v1-archive\/portfolio\/","og_site_name":"[v1 Archive] UX-Colored Glasses","article_modified_time":"2015-03-06T23:54:50+00:00","og_image":[{"width":1920,"height":580,"url":"https:\/\/edwinli.com\/ux-v1-archive\/wp-content\/uploads\/sites\/17\/2015\/03\/UxD-Banner-v02-base-WP-Nirvana-ratio-1920x580-DSC_2392ed02.jpg","type":"image\/jpeg"}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/edwinli.com\/ux-v1-archive\/portfolio\/","url":"https:\/\/edwinli.com\/ux-v1-archive\/portfolio\/","name":"Portfolio - [v1 Archive] UX-Colored Glasses","isPartOf":{"@id":"https:\/\/edwinli.com\/ux-v1-archive\/#website"},"primaryImageOfPage":{"@id":"https:\/\/edwinli.com\/ux-v1-archive\/portfolio\/#primaryimage"},"image":{"@id":"https:\/\/edwinli.com\/ux-v1-archive\/portfolio\/#primaryimage"},"thumbnailUrl":"https:\/\/edwinli.com\/ux-v1-archive\/wp-content\/uploads\/sites\/17\/2015\/03\/UxD-Banner-v02-base-WP-Nirvana-ratio-1920x580-DSC_2392ed02.jpg","datePublished":"2013-05-02T17:56:07+00:00","dateModified":"2015-03-06T23:54:50+00:00","breadcrumb":{"@id":"https:\/\/edwinli.com\/ux-v1-archive\/portfolio\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/edwinli.com\/ux-v1-archive\/portfolio\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/edwinli.com\/ux-v1-archive\/portfolio\/#primaryimage","url":"https:\/\/edwinli.com\/ux-v1-archive\/wp-content\/uploads\/sites\/17\/2015\/03\/UxD-Banner-v02-base-WP-Nirvana-ratio-1920x580-DSC_2392ed02.jpg","contentUrl":"https:\/\/edwinli.com\/ux-v1-archive\/wp-content\/uploads\/sites\/17\/2015\/03\/UxD-Banner-v02-base-WP-Nirvana-ratio-1920x580-DSC_2392ed02.jpg","width":1920,"height":580,"caption":"Minded to design for ecosystems of usage across multiple devices and the cloud, this is Edwin with a sampling of the prototyping artifacts that he employs: paper and whiteboard sketches, Balsamiq Mockups prototypes, Photoshop prototypes fed into interactive on-device prototypes, HTML\/CSS prototypes, and UI specifications."},{"@type":"BreadcrumbList","@id":"https:\/\/edwinli.com\/ux-v1-archive\/portfolio\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/edwinli.com\/ux-v1-archive\/"},{"@type":"ListItem","position":2,"name":"Portfolio"}]},{"@type":"WebSite","@id":"https:\/\/edwinli.com\/ux-v1-archive\/#website","url":"https:\/\/edwinli.com\/ux-v1-archive\/","name":"[v1 Archive] UX-Colored Glasses","description":"Edwin Li on User Experience","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/edwinli.com\/ux-v1-archive\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"}]}},"jetpack_shortlink":"https:\/\/wp.me\/PcLjz8-3J","jetpack_sharing_enabled":true,"jetpack_likes_enabled":true,"jetpack-related-posts":[],"_links":{"self":[{"href":"https:\/\/edwinli.com\/ux-v1-archive\/wp-json\/wp\/v2\/pages\/231","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/edwinli.com\/ux-v1-archive\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/edwinli.com\/ux-v1-archive\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/edwinli.com\/ux-v1-archive\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/edwinli.com\/ux-v1-archive\/wp-json\/wp\/v2\/comments?post=231"}],"version-history":[{"count":99,"href":"https:\/\/edwinli.com\/ux-v1-archive\/wp-json\/wp\/v2\/pages\/231\/revisions"}],"predecessor-version":[{"id":1100,"href":"https:\/\/edwinli.com\/ux-v1-archive\/wp-json\/wp\/v2\/pages\/231\/revisions\/1100"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/edwinli.com\/ux-v1-archive\/wp-json\/wp\/v2\/media\/1091"}],"wp:attachment":[{"href":"https:\/\/edwinli.com\/ux-v1-archive\/wp-json\/wp\/v2\/media?parent=231"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}