{"id":247,"date":"2013-05-25T16:20:23","date_gmt":"2013-05-25T23:20:23","guid":{"rendered":"http:\/\/edwinli.com\/ux-2020-09-28-archive-dev01\/?page_id=247"},"modified":"2016-01-14T16:35:05","modified_gmt":"2016-01-15T00:35:05","slug":"process","status":"publish","type":"page","link":"https:\/\/edwinli.com\/ux-2020-09-28-archive\/temp-portfolio\/process\/","title":{"rendered":"Design Processes, Artifacts, and Work Style"},"content":{"rendered":"<h1 class=\"hidden\">Design Processes, Artifacts, and Work Style<\/h1>\n<div id=\"attachment_1100\" style=\"width: 970px\" class=\"wp-caption alignnone\"><a href=\"http:\/\/edwinli.com\/ux-2020-09-28-archive\/portfolio\/portfolio-header-image-02\/\" rel=\"attachment wp-att-1100\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-1100\" data-attachment-id=\"1100\" data-permalink=\"https:\/\/edwinli.com\/ux-2020-09-28-archive\/temp-portfolio\/portfolio-header-image-02\/\" data-orig-file=\"https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2015\/03\/portfolio-header-image-02.jpg?fit=960%2C290&amp;ssl=1\" data-orig-size=\"960,290\" data-comments-opened=\"1\" data-image-title=\"portfolio header image 02\" data-image-description=\"\" data-image-caption=\"&lt;p&gt;A collage of my work artifacts: paper and whiteboard sketches, Balsamiq Mockups prototypes, Photoshop prototypes fed into interactive on-device prototypes, HTML\/CSS prototypes, and UI specifications.&lt;\/p&gt;\n\" data-large-file=\"https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2015\/03\/portfolio-header-image-02.jpg?fit=900%2C272&amp;ssl=1\" class=\"size-full wp-image-1100\" src=\"https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2015\/03\/portfolio-header-image-02.jpg?resize=900%2C272\" alt=\"A collage of my work artifacts: paper and whiteboard sketches, Balsamiq Mockups prototypes, Photoshop prototypes fed into interactive on-device prototypes, HTML\/CSS prototypes, and UI specifications.\" width=\"900\" height=\"272\" srcset=\"https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2015\/03\/portfolio-header-image-02.jpg?w=960&amp;ssl=1 960w, https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2015\/03\/portfolio-header-image-02.jpg?resize=300%2C91&amp;ssl=1 300w, https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2015\/03\/portfolio-header-image-02.jpg?resize=250%2C76&amp;ssl=1 250w, https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2015\/03\/portfolio-header-image-02.jpg?resize=150%2C45&amp;ssl=1 150w\" sizes=\"auto, (max-width: 900px) 100vw, 900px\" \/><\/a><p id=\"caption-attachment-1100\" class=\"wp-caption-text\">A collage of my work artifacts: paper and whiteboard sketches, Balsamiq Mockups prototypes, Photoshop prototypes fed into interactive on-device prototypes, HTML\/CSS prototypes, and UI specifications.<\/p><\/div>\n<h1 class=\"hidden\">Design Processes, Artifacts, and Work Style<\/h1>\n<h2>What Am I Like As A Designer?<\/h2>\n<p>How do I work, and what am I like to work with?<\/p>\n<p>There are many ways to answer that, and here are a few, more focused questions that should shed light on that overall question:<\/p>\n<ol>\n<li>With what UX design processes am I conversant, and how flexible am I with those processes?<\/li>\n<li>What artifacts do I typically produce in my design work?<\/li>\n<li>How do I work with those around me, from other interaction designers and UX professionals to management, product management, developers, business stakeholders, marketing, legal, etc.?<\/li>\n<\/ol>\n<h2>Design Process and Artifacts<\/h2>\n<p>I believe that there is no One True User Experience Design process, but, rather, many different approaches and tools with the same goal\u2014a design that &#8220;fits&#8221; with users&#8217; behavior and how they think about their domain of activity.<\/p>\n<p>There are quite a number of processes, frameworks, and tools that have been developed and articulated to get to that goal. These include Norman and Draper&#8217;s <a href=\"http:\/\/www.amazon.com\/User-Centered-System-Design-Human-computer\/dp\/0898598729\">User-Centered Design<\/a>, Constantine and Lockwood&#8217;s <a href=\"http:\/\/www.foruse.com\/\">Usage-Centered Design<\/a>, Alan Cooper&#8217;s <a href=\"http:\/\/www.cooper.com\/\">Goal-Directed Design<\/a> (which pioneered the use of Personas), and Beyer and Holzblatt&#8217;s <a href=\"http:\/\/incontextdesign.com\/contextual-design\/\">Contextual Design<\/a>.<\/p>\n<p>I&#8217;ve used each of these and am familiar with them to varying degrees, but which one is the best to use? As with so many UX questions, the answer is, &#8220;It depends.&#8221; It depends on things like the UX team&#8217;s skills and background, the project&#8217;s timeline, the corporate environment (whether and how fully management supports UX priorities), the type of project or product, and many other factors.<\/p>\n<p>So the best approach is familiarity and expertise in as many of these approaches and tools as possible, then choosing the ones that fit any given situation.<\/p>\n<p>That said, the UX process of any particular project will generally have some subset of these general stages:<\/p>\n<ol>\n<li><span class=\"inlineFieldLabel\">Domain research.<\/span> Are there aspects of the domain that may be identified as domain structure or constraints that may influence or be taken advantage of in the ultimate design? This is a phase in which the UX team learns about the things that matter in the domain for which they are designing the product. What things matter, how can they be used\/interacted with, how they influence each other, who has what rights to see, use, or edit what, how are these things and activities related to other tools, products, or processes that will be outside the scope of your product?<\/li>\n<li><span class=\"inlineFieldLabel\">User  behavior research.<\/span> How can users current behavior in the current domain-state be described? Does that behavior suggest positives or negatives with respect to accomplishing their goals within the domain? Are there regularities that may be taken advantage of when positive or done away with when negative? What tools do they use now? How are those tools embedded in the fabric of their activity or their activity &#8220;ecosystem&#8221;?<\/li>\n<li><span class=\"inlineFieldLabel\">Market  research.<\/span> Are there solutions already out there? What\u2019s out there that is related? How well do they support users in their activities and goals? How are they strong or weak with respect to your design and experience goals?<\/li>\n<li><span class=\"inlineFieldLabel\">Digesting the data into design-useful artifacts.<\/span> This process may include diagramming, card sorting, Post-It note affinity diagrams\/sorting, and re-representing the notes and data in various ways. Products of this process may include diagrams, personas, scenarios, sketches, lists of problems, lists of requirements, usage models, content models, navigation models, task models (e.g., <a title=\"Essential Use Cases [RedBeacon]\" href=\"http:\/\/edwinli.com\/ux-2020-09-28-archive\/portfolio\/redbeacon-design-challenge\/essential-use-cases-redbeacon\/\">essential use cases<\/a>), etc. Of particular inspiration to me a this stage is a quote by Herbert Simon (from his book, <a title=\"Sciences of the Artificial, 3rd Edition on Amazon\" href=\"http:\/\/www.amazon.com\/The-Sciences-Artificial-3rd-Edition\/dp\/0262691914\/ref=sr_1_1?ie=UTF8&amp;qid=1371703909&amp;sr=8-1&amp;keywords=sciences+of+the+artificial\">Sciences of the Artificial, 3rd Edition<\/a>): <strong>\u201csolving a problem simply means representing it so as to make the solution transparent.\u201d<\/strong> This means trying many different approaches, framing and reframing the problem that you&#8217;re trying to solve in search of different ways to understand and capture the problem, choosing promising ones, creating designs to follow them, and iterating upon those, going as deeply as you need to in order to choose the most promising designs. This stage often blends and flows back and forth with the next stage, Design.\n<ol>\n<li>Sample artifacts: Digesting data for personas\n\t\t<style>\n\t\t\t#gallery-1 {\n\t\t\t\tmargin: auto;\n\t\t\t}\n\t\t\t#gallery-1 .gallery-item {\n\t\t\t\tfloat: left;\n\t\t\t\tmargin-top: 10px;\n\t\t\t\ttext-align: center;\n\t\t\t\twidth: 33%;\n\t\t\t}\n\t\t\t#gallery-1 img {\n\t\t\t\tborder: 2px solid #cfcfcf;\n\t\t\t}\n\t\t\t#gallery-1 .gallery-caption {\n\t\t\t\tmargin-left: 0;\n\t\t\t}\n\t\t\t\/* see gallery_shortcode() in wp-includes\/media.php *\/\n\t\t<\/style>\n\t\t<div data-carousel-extra='{&quot;blog_id&quot;:22,&quot;permalink&quot;:&quot;https:\/\/edwinli.com\/ux-2020-09-28-archive\/temp-portfolio\/process\/&quot;}' id='gallery-1' class='gallery galleryid-247 gallery-columns-3 gallery-size-thumbnail'><dl class='gallery-item'>\n\t\t\t<dt class='gallery-icon landscape'>\n\t\t\t\t<a href='https:\/\/edwinli.com\/ux-2020-09-28-archive\/cooper-photobook-00-mapping-personas-to-activity-dimensions-ed\/'><img loading=\"lazy\" decoding=\"async\" width=\"150\" height=\"150\" src=\"https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2013\/06\/Cooper-PhotoBook-00-mapping-personas-to-activity-dimensions-ed.jpg?resize=150%2C150&amp;ssl=1\" class=\"attachment-thumbnail size-thumbnail\" alt=\"Activity dimensions and personas on a whiteboard\" aria-describedby=\"gallery-1-348\" srcset=\"https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2013\/06\/Cooper-PhotoBook-00-mapping-personas-to-activity-dimensions-ed.jpg?resize=150%2C150&amp;ssl=1 150w, https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2013\/06\/Cooper-PhotoBook-00-mapping-personas-to-activity-dimensions-ed.jpg?zoom=2&amp;resize=150%2C150 300w, https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2013\/06\/Cooper-PhotoBook-00-mapping-personas-to-activity-dimensions-ed.jpg?zoom=3&amp;resize=150%2C150 450w\" sizes=\"auto, (max-width: 150px) 100vw, 150px\" data-attachment-id=\"348\" data-permalink=\"https:\/\/edwinli.com\/ux-2020-09-28-archive\/cooper-photobook-00-mapping-personas-to-activity-dimensions-ed\/\" data-orig-file=\"https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2013\/06\/Cooper-PhotoBook-00-mapping-personas-to-activity-dimensions-ed.jpg?fit=2592%2C1635&amp;ssl=1\" data-orig-size=\"2592,1635\" data-comments-opened=\"0\" data-image-title=\"Mapping personas to activity dimensions\" data-image-description=\"&lt;p&gt;Mapping out behavior and features for a product. At this stage, we have a set of personas already, and we need to understand how the personas might feel about each feature or how they might fall on each behavioral or attitudinal dimension. The hope is that the personas will fall into identifiable and understandable clumps across a number of those dimensions.&lt;\/p&gt;\n&lt;p&gt;Best done as a group exercise in a shared space, whatever protocol the team chooses, this is one of those design activities that is fun and calls out for whiteboards and Post-It notes.&lt;\/p&gt;\n\" data-image-caption=\"&lt;p&gt;Digesting data and understanding our personas&lt;\/p&gt;\n\" data-large-file=\"https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2013\/06\/Cooper-PhotoBook-00-mapping-personas-to-activity-dimensions-ed.jpg?fit=900%2C568&amp;ssl=1\" \/><\/a>\n\t\t\t<\/dt>\n\t\t\t\t<dd class='wp-caption-text gallery-caption' id='gallery-1-348'>\n\t\t\t\tDigesting data and understanding our personas\n\t\t\t\t<\/dd><\/dl>\n\t\t\t<br style='clear: both' \/>\n\t\t<\/div>\n<\/li>\n<li class=\"hidden\">Sample artifacts: Essential use cases<\/li>\n<li>Sample artifacts: Content Models (Usage-Centered Design)\n\t\t<style>\n\t\t\t#gallery-2 {\n\t\t\t\tmargin: auto;\n\t\t\t}\n\t\t\t#gallery-2 .gallery-item {\n\t\t\t\tfloat: left;\n\t\t\t\tmargin-top: 10px;\n\t\t\t\ttext-align: center;\n\t\t\t\twidth: 33%;\n\t\t\t}\n\t\t\t#gallery-2 img {\n\t\t\t\tborder: 2px solid #cfcfcf;\n\t\t\t}\n\t\t\t#gallery-2 .gallery-caption {\n\t\t\t\tmargin-left: 0;\n\t\t\t}\n\t\t\t\/* see gallery_shortcode() in wp-includes\/media.php *\/\n\t\t<\/style>\n\t\t<div data-carousel-extra='{&quot;blog_id&quot;:22,&quot;permalink&quot;:&quot;https:\/\/edwinli.com\/ux-2020-09-28-archive\/temp-portfolio\/process\/&quot;}' id='gallery-2' class='gallery galleryid-247 gallery-columns-3 gallery-size-thumbnail'><dl class='gallery-item'>\n\t\t\t<dt class='gallery-icon landscape'>\n\t\t\t\t<a href='https:\/\/edwinli.com\/ux-2020-09-28-archive\/edwins-sketches-003-content-model\/'><img loading=\"lazy\" decoding=\"async\" width=\"150\" height=\"150\" src=\"https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2013\/05\/Edwins-sketches-003-Content-model.gif?resize=150%2C150&amp;ssl=1\" class=\"attachment-thumbnail size-thumbnail\" alt=\"Paper sketch that includes a content model as a list of content and interactions\" aria-describedby=\"gallery-2-305\" data-attachment-id=\"305\" data-permalink=\"https:\/\/edwinli.com\/ux-2020-09-28-archive\/edwins-sketches-003-content-model\/\" data-orig-file=\"https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2013\/05\/Edwins-sketches-003-Content-model.gif?fit=3507%2C2550&amp;ssl=1\" data-orig-size=\"3507,2550\" data-comments-opened=\"0\" data-image-title=\"Map View content model, Ad Finder (Mobile App)\" data-image-description=\"&lt;p&gt;A simple content model for a mobile app&amp;#8217;s home screen. The app&amp;#8217;s home screen plots data on a map and offers ways to explore, filter, and otherwise interact with that data. &lt;\/p&gt;\n&lt;p&gt;A content model as seen in Constantine and Lockwood&amp;#8217;s Usage-Based Design is a model of what content belongs in a particular interaction context and what ways of interacting with that content should be offered. Intentionally abstract, this gives the designer both guidance and the freedom to create within that guidance&amp;#8217;s constraints.&lt;\/p&gt;\n&lt;p&gt;This content model is from a personal project, a mobile app intended as a sort of TiVo for real-time streams of geographically based mobile ads. Other stages of that project include &lt;a href=&quot;http:\/\/edwinli.com\/ux-2020-09-28-archive-dev01\/?attachment_id=303&quot; title=&quot;Sketch, Filter panels for map-based, mobile app&quot;&gt;a paper sketch from this content model&lt;\/a&gt; showing the design of translucent filter panels and &lt;a href=&quot;http:\/\/edwinli.com\/ux-2020-09-28-archive-dev01\/?attachment_id=286&quot; title=&quot;Prototype (Balsamiq Mockup), Filter drawer for mapped data&quot;&gt;a Balsamiq mockup of this same page&lt;\/a&gt;. A write-up of that project as a portfolio page is forthcoming, but you can &lt;a href=&quot;http:\/\/edwinli.com\/ux-2020-09-28-archive-dev01\/?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&lt;p&gt;For more on the Usage-Centered Design framework, check out their website, &lt;a href=&quot;http:\/\/foruse.com&quot; title=&quot;ForUse.com&quot; target=&quot;_blank&quot;&gt;ForUse.com&lt;\/a&gt;, or you can buy their book, &amp;#8220;Software for Use: A Practical Guide to the Models and Methods of Usage-Centered Design&amp;#8221; from Amazon.com (Amazon Affiliate links: &lt;a href=&quot;http:\/\/www.amazon.com\/gp\/product\/0321773721\/ref=as_li_qf_sp_asin_il_tl?ie=UTF8&amp;#038;camp=1789&amp;#038;creative=9325&amp;#038;creativeASIN=0321773721&amp;#038;linkCode=as2&amp;#038;tag=edliuxcogl-20&quot; title=&quot;Software For Use, paperback edition&quot; target=&quot;_blank&quot;&gt;paperback edition&lt;\/a&gt;, &lt;a href=&quot;http:\/\/www.amazon.com\/gp\/product\/B001EWOG7Q\/ref=as_li_qf_sp_asin_il_tl?ie=UTF8&amp;#038;camp=1789&amp;#038;creative=9325&amp;#038;creativeASIN=B001EWOG7Q&amp;#038;linkCode=as2&amp;#038;tag=edliuxcogl-20&quot; title=&quot;Software For Use, Kindle edition&quot; target=&quot;_blank&quot;&gt;Kindle edition&lt;\/a&gt;). &lt;\/p&gt;\n\" data-image-caption=\"&lt;p&gt;A simple content model for a map-based, mobile app.&lt;\/p&gt;\n\" data-large-file=\"https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2013\/05\/Edwins-sketches-003-Content-model.gif?fit=900%2C655&amp;ssl=1\" \/><\/a>\n\t\t\t<\/dt>\n\t\t\t\t<dd class='wp-caption-text gallery-caption' id='gallery-2-305'>\n\t\t\t\tA simple content model for a map-based, mobile app.\n\t\t\t\t<\/dd><\/dl><dl class='gallery-item'>\n\t\t\t<dt class='gallery-icon landscape'>\n\t\t\t\t<a href='https:\/\/edwinli.com\/ux-2020-09-28-archive\/home-page-01ed-content-model-integrated-now-coming-up-and-history-views-2\/'><img loading=\"lazy\" decoding=\"async\" width=\"150\" height=\"150\" src=\"https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2013\/06\/Home-page-01ed-Content-model-integrated-Now-Coming-Up-and-History-views1.jpg?resize=150%2C150&amp;ssl=1\" class=\"attachment-thumbnail size-thumbnail\" alt=\"Picture of a content model sketched on a whiteboard\" aria-describedby=\"gallery-2-353\" srcset=\"https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2013\/06\/Home-page-01ed-Content-model-integrated-Now-Coming-Up-and-History-views1.jpg?resize=150%2C150&amp;ssl=1 150w, https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2013\/06\/Home-page-01ed-Content-model-integrated-Now-Coming-Up-and-History-views1.jpg?zoom=2&amp;resize=150%2C150 300w, https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2013\/06\/Home-page-01ed-Content-model-integrated-Now-Coming-Up-and-History-views1.jpg?zoom=3&amp;resize=150%2C150 450w\" sizes=\"auto, (max-width: 150px) 100vw, 150px\" data-attachment-id=\"353\" data-permalink=\"https:\/\/edwinli.com\/ux-2020-09-28-archive\/home-page-01ed-content-model-integrated-now-coming-up-and-history-views-2\/\" data-orig-file=\"https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2013\/06\/Home-page-01ed-Content-model-integrated-Now-Coming-Up-and-History-views1.jpg?fit=2184%2C1668&amp;ssl=1\" data-orig-size=\"2184,1668\" data-comments-opened=\"0\" data-image-title=\"Application Home Page \u2013 Content model\" data-image-description=\"&lt;p&gt;This is a content model sketched out on a whiteboard for the home page of a web application. On the left is the model for one page\/&amp;#8221;interaction context&amp;#8221;. The red boxes are the content intended to be put on this page, in an implied order. The blue boxes represent interactions on that content. On the right is a list of tasks that users can potentially do or start from this interaction context.&lt;\/p&gt;\n&lt;p&gt;A content model as seen in Constantine and Lockwood&amp;#8217;s Usage-Based Design is a model of what content belongs in a particular interaction context and what ways of interacting with that content should be offered. Intentionally abstract, this gives the designer both guidance and the freedom to create within that guidance&amp;#8217;s constraints.&lt;\/p&gt;\n&lt;p&gt;For more on the Usage-Centered Design framework, check out their website, &lt;a href=&quot;http:\/\/foruse.com&quot; title=&quot;ForUse.com&quot; target=&quot;_blank&quot;&gt;ForUse.com&lt;\/a&gt;, or you can buy their book, &amp;#8220;Software for Use: A Practical Guide to the Models and Methods of Usage-Centered Design&amp;#8221; from Amazon.com (Amazon Affiliate links: &lt;a href=&quot;http:\/\/www.amazon.com\/gp\/product\/0321773721\/ref=as_li_qf_sp_asin_il_tl?ie=UTF8&amp;#038;camp=1789&amp;#038;creative=9325&amp;#038;creativeASIN=0321773721&amp;#038;linkCode=as2&amp;#038;tag=edliuxcogl-20&quot; title=&quot;Software For Use, paperback edition&quot; target=&quot;_blank&quot;&gt;paperback edition&lt;\/a&gt;, &lt;a href=&quot;http:\/\/www.amazon.com\/gp\/product\/B001EWOG7Q\/ref=as_li_qf_sp_asin_il_tl?ie=UTF8&amp;#038;camp=1789&amp;#038;creative=9325&amp;#038;creativeASIN=B001EWOG7Q&amp;#038;linkCode=as2&amp;#038;tag=edliuxcogl-20&quot; title=&quot;Software For Use, Kindle edition&quot; target=&quot;_blank&quot;&gt;Kindle edition&lt;\/a&gt;). &lt;\/p&gt;\n\" data-image-caption=\"&lt;p&gt;A content model created for the home page\/screen of a web application.&lt;\/p&gt;\n\" data-large-file=\"https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2013\/06\/Home-page-01ed-Content-model-integrated-Now-Coming-Up-and-History-views1.jpg?fit=900%2C687&amp;ssl=1\" \/><\/a>\n\t\t\t<\/dt>\n\t\t\t\t<dd class='wp-caption-text gallery-caption' id='gallery-2-353'>\n\t\t\t\tA content model created for the home page\/screen of a web application.\n\t\t\t\t<\/dd><\/dl>\n\t\t\t<br style='clear: both' \/>\n\t\t<\/div>\n<\/li>\n<li>Sample artifacts: Navigation Models (Usage-Centered Design)\n\t\t<style>\n\t\t\t#gallery-3 {\n\t\t\t\tmargin: auto;\n\t\t\t}\n\t\t\t#gallery-3 .gallery-item {\n\t\t\t\tfloat: left;\n\t\t\t\tmargin-top: 10px;\n\t\t\t\ttext-align: center;\n\t\t\t\twidth: 33%;\n\t\t\t}\n\t\t\t#gallery-3 img {\n\t\t\t\tborder: 2px solid #cfcfcf;\n\t\t\t}\n\t\t\t#gallery-3 .gallery-caption {\n\t\t\t\tmargin-left: 0;\n\t\t\t}\n\t\t\t\/* see gallery_shortcode() in wp-includes\/media.php *\/\n\t\t<\/style>\n\t\t<div data-carousel-extra='{&quot;blog_id&quot;:22,&quot;permalink&quot;:&quot;https:\/\/edwinli.com\/ux-2020-09-28-archive\/temp-portfolio\/process\/&quot;}' id='gallery-3' class='gallery galleryid-247 gallery-columns-3 gallery-size-thumbnail'><dl class='gallery-item'>\n\t\t\t<dt class='gallery-icon portrait'>\n\t\t\t\t<a href='https:\/\/edwinli.com\/ux-2020-09-28-archive\/2006-09-08-navigation-map-01-cleansed\/'><img loading=\"lazy\" decoding=\"async\" width=\"150\" height=\"150\" src=\"https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2013\/06\/2006-09-08-Navigation-map-01-cleansed-e1371002022184.gif?resize=150%2C150&amp;ssl=1\" class=\"attachment-thumbnail size-thumbnail\" alt=\"Sketched on paper\" aria-describedby=\"gallery-3-402\" data-attachment-id=\"402\" data-permalink=\"https:\/\/edwinli.com\/ux-2020-09-28-archive\/2006-09-08-navigation-map-01-cleansed\/\" data-orig-file=\"https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2013\/06\/2006-09-08-Navigation-map-01-cleansed-e1371002022184.gif?fit=1024%2C1325&amp;ssl=1\" data-orig-size=\"1024,1325\" data-comments-opened=\"0\" data-image-title=\"Navigation model (web app)\" data-image-description=\"&lt;p&gt;This is navigation model (here labeled &amp;#8220;screen flow map&amp;#8221;) that was worked out and sketched out on paper. Mixed into the navigation model are a few ideas where some of the interaction widgets might be used. This design is from a web application project undertaken as a long-term contractor.&lt;\/p&gt;\n&lt;p&gt;A navigation model as used in Usage-Centered Design is an model in which the various interaction contexts of a system to be designed is mapped, showing which contexts are connected to which other contexts. In a web application, it is natural and very common that most interaction contexts are web pages, though some contexts will be dialogue boxes. Thus, a web application&amp;#8217;s navigation model may be very suggestive of a &amp;#8220;site map.&amp;#8221;&lt;\/p&gt;\n&lt;p&gt;Combined with a content model, which indicates what contents and interactions are available in each interaction context, these two models can be used to specify a system&amp;#8217;s usage in a way that is specific enough to give designers and teams a sense of what using the system to be designed might be like, yet at the same time, is abstract enough to allow designers freedom to create and innovate within the models&amp;#8217; helpful constraints and guidance.&lt;\/p&gt;\n&lt;p&gt;For more on the Usage-Centered Design framework, check out their website, &lt;a href=&quot;http:\/\/foruse.com&quot; title=&quot;ForUse.com&quot; target=&quot;_blank&quot; rel=&quot;noopener&quot;&gt;ForUse.com&lt;\/a&gt;, or you can buy their book, &amp;#8220;Software for Use: A Practical Guide to the Models and Methods of Usage-Centered Design&amp;#8221; from Amazon.com (Amazon Affiliate links: &lt;a href=&quot;http:\/\/www.amazon.com\/gp\/product\/0321773721\/ref=as_li_qf_sp_asin_il_tl?ie=UTF8&amp;#038;camp=1789&amp;#038;creative=9325&amp;#038;creativeASIN=0321773721&amp;#038;linkCode=as2&amp;#038;tag=edliuxcogl-20&quot; title=&quot;Software For Use, paperback edition&quot; target=&quot;_blank&quot; rel=&quot;noopener&quot;&gt;paperback edition&lt;\/a&gt;, &lt;a href=&quot;http:\/\/www.amazon.com\/gp\/product\/B001EWOG7Q\/ref=as_li_qf_sp_asin_il_tl?ie=UTF8&amp;#038;camp=1789&amp;#038;creative=9325&amp;#038;creativeASIN=B001EWOG7Q&amp;#038;linkCode=as2&amp;#038;tag=edliuxcogl-20&quot; title=&quot;Software For Use, Kindle edition&quot; target=&quot;_blank&quot; rel=&quot;noopener&quot;&gt;Kindle edition&lt;\/a&gt;). &lt;\/p&gt;\n\" data-image-caption=\"&lt;p&gt;A navigation model for a web application&lt;\/p&gt;\n\" data-large-file=\"https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2013\/06\/2006-09-08-Navigation-map-01-cleansed-e1371002022184.gif?fit=791%2C1024&amp;ssl=1\" \/><\/a>\n\t\t\t<\/dt>\n\t\t\t\t<dd class='wp-caption-text gallery-caption' id='gallery-3-402'>\n\t\t\t\tA navigation model for a web application\n\t\t\t\t<\/dd><\/dl>\n\t\t\t<br style='clear: both' \/>\n\t\t<\/div>\n<\/li>\n<\/ol>\n<\/li>\n<li><span class=\"inlineFieldLabel\">Design.<\/span> Of course, this is an iterative and circular process with sub-processes. It can involve attempts to re-represent the problems (as mentioned in the Digesting phase), casting about for inspiration and models, brainstorming and ideation, lists and re-lists of  requirements, content models, navigation models, task models, sketches,  Balsamiq mockups, HTML, PowerPoint, even Photoshop&#8211;whatever&rsquo;s quick,&nbsp; easy, easily let-go, and supportive of  reflection. The level of fidelity used in producing prototypes will vary with the stage of the design. The further along the design is, the more likely that the prototyping will be of higher fidelity or specificity. &quot;Implementation&quot; tools that I&#8217;ve used in the design phase include: whiteboards, paper and pencil, Balsamiq Mockups, PowerPoint, HTML\/CSS (Dreamweaver), Photoshop, Axure RP Pro, and Word (i.e., for UI specifications). This is also the phase in which existing solutions such as platform guidelines, UX guidelines, product suite UI conventions, and design pattern libraries are taken into account and used as appropriate. For me, the first time designs start to take shape are in sketches. It is rare that the first explorations are in digital form. Rather, perhaps like Da Vinci (though I won&#8217;t claim any other comparisons with him), I generally explore my ideas first by drawing freehand (so, paper or whiteboard, usually). As a medium, freehand drawing is less constrained, generally takes less effort, and requires less time commitment to get ideas down, giving the freedom to explore any potential design space more widely. After some ideas or approaches solidify a little bit, that&#8217;s when I&#8217;ll switch to other prototyping tools that generally require a little more time and are a little more constraining on design possibilities.\n<ol>\n<li>Sub-processes: Idea generation, Idea exploration, Refinement, Make choices and \u201cgo deep\u201d, then repeat recursively as design problems are identified.<\/li>\n<li>Sample artifacts: sketches on paper. Paper and pencil sketching is great. It&#8217;s quick, can be done in almost any environment, is generally portable, offers just enough structure to hang imagination on and yet barely constraining it. Paper sketches can be abstract or detailed or anything in between. Together, these qualities make it especially great for jotting down inspirations, brainstorming, and quick explorations, yet don&#8217;t prevent more detailed work when necessary, though other tools may be better when doing detailed work that involves, say, particular platforms&#8217; UI standards.\n\t\t<style>\n\t\t\t#gallery-4 {\n\t\t\t\tmargin: auto;\n\t\t\t}\n\t\t\t#gallery-4 .gallery-item {\n\t\t\t\tfloat: left;\n\t\t\t\tmargin-top: 10px;\n\t\t\t\ttext-align: center;\n\t\t\t\twidth: 33%;\n\t\t\t}\n\t\t\t#gallery-4 img {\n\t\t\t\tborder: 2px solid #cfcfcf;\n\t\t\t}\n\t\t\t#gallery-4 .gallery-caption {\n\t\t\t\tmargin-left: 0;\n\t\t\t}\n\t\t\t\/* see gallery_shortcode() in wp-includes\/media.php *\/\n\t\t<\/style>\n\t\t<div data-carousel-extra='{&quot;blog_id&quot;:22,&quot;permalink&quot;:&quot;https:\/\/edwinli.com\/ux-2020-09-28-archive\/temp-portfolio\/process\/&quot;}' id='gallery-4' class='gallery galleryid-247 gallery-columns-3 gallery-size-thumbnail'><dl class='gallery-item'>\n\t\t\t<dt class='gallery-icon portrait'>\n\t\t\t\t<a href='https:\/\/edwinli.com\/ux-2020-09-28-archive\/samsung-design-challenge-2014-10-08-notes-and-sketches-03\/'><img loading=\"lazy\" decoding=\"async\" width=\"150\" height=\"150\" src=\"https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2014\/10\/Samsung-Design-Challenge-2014-10-08-Notes-and-sketches-03.jpg?resize=150%2C150&amp;ssl=1\" class=\"attachment-thumbnail size-thumbnail\" alt=\"\" aria-describedby=\"gallery-4-1015\" srcset=\"https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2014\/10\/Samsung-Design-Challenge-2014-10-08-Notes-and-sketches-03.jpg?resize=150%2C150&amp;ssl=1 150w, https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2014\/10\/Samsung-Design-Challenge-2014-10-08-Notes-and-sketches-03.jpg?zoom=2&amp;resize=150%2C150 300w, https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2014\/10\/Samsung-Design-Challenge-2014-10-08-Notes-and-sketches-03.jpg?zoom=3&amp;resize=150%2C150 450w\" sizes=\"auto, (max-width: 150px) 100vw, 150px\" data-attachment-id=\"1015\" data-permalink=\"https:\/\/edwinli.com\/ux-2020-09-28-archive\/samsung-design-challenge-2014-10-08-notes-and-sketches-03\/\" data-orig-file=\"https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2014\/10\/Samsung-Design-Challenge-2014-10-08-Notes-and-sketches-03.jpg?fit=1692%2C2196&amp;ssl=1\" data-orig-size=\"1692,2196\" data-comments-opened=\"1\" data-image-title=\"Samsung Design Challenge 2014-10-08 Notes and sketches 03\" data-image-description=\"\" data-image-caption=\"&lt;p&gt;Sketches of the Pandora Driving Mode now playing screen. Here, I iterate from v0 to v0.1 on a single page. That&amp;#8217;s part of the power of sketching&amp;#8211;fast ideation.&lt;\/p&gt;\n\" data-large-file=\"https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2014\/10\/Samsung-Design-Challenge-2014-10-08-Notes-and-sketches-03.jpg?fit=789%2C1024&amp;ssl=1\" \/><\/a>\n\t\t\t<\/dt>\n\t\t\t\t<dd class='wp-caption-text gallery-caption' id='gallery-4-1015'>\n\t\t\t\tSketches of the Pandora Driving Mode now playing screen. Here, I iterate from v0 to v0.1 on a single page. That&#8217;s part of the power of sketching&#8211;fast ideation.\n\t\t\t\t<\/dd><\/dl><dl class='gallery-item'>\n\t\t\t<dt class='gallery-icon portrait'>\n\t\t\t\t<a href='https:\/\/edwinli.com\/ux-2020-09-28-archive\/redbeacon-design-v0-home-screen-and-project-detail-page\/'><img loading=\"lazy\" decoding=\"async\" width=\"150\" height=\"150\" src=\"https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2014\/03\/RedBeacon-design-v0-home-screen-and-project-detail-page.jpg?resize=150%2C150&amp;ssl=1\" class=\"attachment-thumbnail size-thumbnail\" alt=\"\" aria-describedby=\"gallery-4-809\" srcset=\"https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2014\/03\/RedBeacon-design-v0-home-screen-and-project-detail-page.jpg?resize=150%2C150&amp;ssl=1 150w, https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2014\/03\/RedBeacon-design-v0-home-screen-and-project-detail-page.jpg?zoom=2&amp;resize=150%2C150 300w, https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2014\/03\/RedBeacon-design-v0-home-screen-and-project-detail-page.jpg?zoom=3&amp;resize=150%2C150 450w\" sizes=\"auto, (max-width: 150px) 100vw, 150px\" data-attachment-id=\"809\" data-permalink=\"https:\/\/edwinli.com\/ux-2020-09-28-archive\/redbeacon-design-v0-home-screen-and-project-detail-page\/\" data-orig-file=\"https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2014\/03\/RedBeacon-design-v0-home-screen-and-project-detail-page.jpg?fit=1429%2C1905&amp;ssl=1\" data-orig-size=\"1429,1905\" data-comments-opened=\"1\" data-image-title=\"RedBeacon design v0 &amp;#8211; home screen and project detail page\" data-image-description=\"\" data-image-caption=\"&lt;p&gt;Sketch of the home screen and project detail screen&lt;\/p&gt;\n\" data-large-file=\"https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2014\/03\/RedBeacon-design-v0-home-screen-and-project-detail-page.jpg?fit=768%2C1024&amp;ssl=1\" \/><\/a>\n\t\t\t<\/dt>\n\t\t\t\t<dd class='wp-caption-text gallery-caption' id='gallery-4-809'>\n\t\t\t\tSketch of the home screen and project detail screen\n\t\t\t\t<\/dd><\/dl><dl class='gallery-item'>\n\t\t\t<dt class='gallery-icon landscape'>\n\t\t\t\t<a href='https:\/\/edwinli.com\/ux-2020-09-28-archive\/edwins-sketches-004-filter-panels\/'><img loading=\"lazy\" decoding=\"async\" width=\"150\" height=\"150\" src=\"https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2013\/05\/Edwins-sketches-004-Filter-panels.gif?resize=150%2C150&amp;ssl=1\" class=\"attachment-thumbnail size-thumbnail\" alt=\"From my sketch notebook, a pencil sketch on paper for manipulable filters to be overlaid on a map display\" aria-describedby=\"gallery-4-303\" data-attachment-id=\"303\" data-permalink=\"https:\/\/edwinli.com\/ux-2020-09-28-archive\/edwins-sketches-004-filter-panels\/\" data-orig-file=\"https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2013\/05\/Edwins-sketches-004-Filter-panels.gif?fit=3507%2C2550&amp;ssl=1\" data-orig-size=\"3507,2550\" data-comments-opened=\"0\" data-image-title=\"Sketch, Filter panels for map-based, mobile app\" data-image-description=\"&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 a sort of TiVo for real-time streams of geographically based mobile ads. Other stages of that project include &lt;a href=&quot;http:\/\/edwinli.com\/ux-2020-09-28-archive-dev01\/?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-2020-09-28-archive-dev01\/?attachment_id=286&quot; title=&quot;Prototype (Balsamiq Mockup), Filter drawer for mapped data&quot;&gt;a Balsamiq mockup of this same page&lt;\/a&gt;. A write-up of that project as a portfolio page is forthcoming, but you can &lt;a href=&quot;http:\/\/edwinli.com\/ux-2020-09-28-archive-dev01\/?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;The beginnings of a design 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:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2013\/05\/Edwins-sketches-004-Filter-panels.gif?fit=900%2C655&amp;ssl=1\" \/><\/a>\n\t\t\t<\/dt>\n\t\t\t\t<dd class='wp-caption-text gallery-caption' id='gallery-4-303'>\n\t\t\t\tThe beginnings of a design 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.\n\t\t\t\t<\/dd><\/dl><br style=\"clear: both\" \/><dl class='gallery-item'>\n\t\t\t<dt class='gallery-icon portrait'>\n\t\t\t\t<a href='https:\/\/edwinli.com\/ux-2020-09-28-archive\/2006-09-08-search-results-page-w-zoombox-and-view-dropdown-01\/'><img loading=\"lazy\" decoding=\"async\" width=\"150\" height=\"150\" src=\"https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2013\/05\/2006-09-08-Search-results-page-w-zoombox-and-view-dropdown-01.gif?resize=150%2C150&amp;ssl=1\" class=\"attachment-thumbnail size-thumbnail\" alt=\"A very &quot;sketchy&quot;, paper sketch of a design that has a very unfinished and brainstorm-y quality\" aria-describedby=\"gallery-4-293\" data-attachment-id=\"293\" data-permalink=\"https:\/\/edwinli.com\/ux-2020-09-28-archive\/2006-09-08-search-results-page-w-zoombox-and-view-dropdown-01\/\" data-orig-file=\"https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2013\/05\/2006-09-08-Search-results-page-w-zoombox-and-view-dropdown-01.gif?fit=2550%2C3300&amp;ssl=1\" data-orig-size=\"2550,3300\" data-comments-opened=\"0\" data-image-title=\"Sketch, Search results page (web app)\" data-image-description=\"&lt;p&gt;This sketch is an example of the beauty of sketching on paper; elements and behavior can be suggested without being drawn out explicitly, and what has been drawn is clearly unfinished and\/or under consideration. The state of the lines, the lack of definition of the shapes and layout, the looseness of the lines&amp;#8211;these factors  clearly show the early state of the design without having to be explicitly labeled as such. These are factors that even Balsamiq Mockups cannot match.&lt;\/p&gt;\n&lt;p&gt;This design is from a web application project undertaken as a long-term contractor. Fuller details on the project, from user research to UX process artifacts all along the way can be discussed in person, but seem a little too sensitive (for expected NDA reasons) to be published on the web.&lt;\/p&gt;\n\" data-image-caption=\"&lt;p&gt;Somewhere between a brainstorm and an design sketch, this is an example of the flexibility of sketching on paper. The sketch is clearly more idea and suggestion than a thoroughly worked out design.&lt;\/p&gt;\n\" data-large-file=\"https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2013\/05\/2006-09-08-Search-results-page-w-zoombox-and-view-dropdown-01.gif?fit=791%2C1024&amp;ssl=1\" \/><\/a>\n\t\t\t<\/dt>\n\t\t\t\t<dd class='wp-caption-text gallery-caption' id='gallery-4-293'>\n\t\t\t\tSomewhere between a brainstorm and an design sketch, this is an example of the flexibility of sketching on paper. The sketch is clearly more idea and suggestion than a thoroughly worked out design.\n\t\t\t\t<\/dd><\/dl><dl class='gallery-item'>\n\t\t\t<dt class='gallery-icon portrait'>\n\t\t\t\t<a href='https:\/\/edwinli.com\/ux-2020-09-28-archive\/2006-09-07-zoombox-sketches-01-cleansed\/'><img loading=\"lazy\" decoding=\"async\" width=\"150\" height=\"150\" src=\"https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2013\/06\/2006-09-07-Zoombox-sketches-01-cleansed.gif?resize=150%2C150&amp;ssl=1\" class=\"attachment-thumbnail size-thumbnail\" alt=\"A paper and pencil sketch showing a few zoombox design variations\" aria-describedby=\"gallery-4-398\" data-attachment-id=\"398\" data-permalink=\"https:\/\/edwinli.com\/ux-2020-09-28-archive\/2006-09-07-zoombox-sketches-01-cleansed\/\" data-orig-file=\"https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2013\/06\/2006-09-07-Zoombox-sketches-01-cleansed.gif?fit=2550%2C3295&amp;ssl=1\" data-orig-size=\"2550,3295\" data-comments-opened=\"0\" data-image-title=\"Sketch, Task-relevant details in-context &amp;#8211; Zoomboxes\" data-image-description=\"&lt;p&gt;This sketch gives a little more detail to seed ideas sketched earlier, adding in some details into the zoomboxes-to-be that were found via user research to be the most commonly sought after in their work.&lt;\/p&gt;\n\" data-image-caption=\"&lt;p&gt;Early sketches of what I later called &amp;#8220;zoomboxes&amp;#8221;, done using pencil and paper. I designed them to provide task-relevant details on demand without forcing users to leave the context of the page they&amp;#8217;re on.&lt;\/p&gt;\n\" data-large-file=\"https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2013\/06\/2006-09-07-Zoombox-sketches-01-cleansed.gif?fit=792%2C1024&amp;ssl=1\" \/><\/a>\n\t\t\t<\/dt>\n\t\t\t\t<dd class='wp-caption-text gallery-caption' id='gallery-4-398'>\n\t\t\t\tEarly sketches of what I later called &#8220;zoomboxes&#8221;, done using pencil and paper. I designed them to provide task-relevant details on demand without forcing users to leave the context of the page they&#8217;re on.\n\t\t\t\t<\/dd><\/dl><dl class='gallery-item'>\n\t\t\t<dt class='gallery-icon portrait'>\n\t\t\t\t<a href='https:\/\/edwinli.com\/ux-2020-09-28-archive\/notifications-sketches-v0-2013-03-16_page_4\/'><img loading=\"lazy\" decoding=\"async\" width=\"150\" height=\"150\" src=\"https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2013\/05\/Notifications-sketches-v0-2013-03-16_Page_4-e1371002548796.png?resize=150%2C150&amp;ssl=1\" class=\"attachment-thumbnail size-thumbnail\" alt=\"One idea, three directions, literally, for the design--an expandable action drawer on top, below, and to the right\" aria-describedby=\"gallery-4-278\" data-attachment-id=\"278\" data-permalink=\"https:\/\/edwinli.com\/ux-2020-09-28-archive\/notifications-sketches-v0-2013-03-16_page_4\/\" data-orig-file=\"https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2013\/05\/Notifications-sketches-v0-2013-03-16_Page_4-e1371002548796.png?fit=1024%2C1395&amp;ssl=1\" data-orig-size=\"1024,1395\" data-comments-opened=\"1\" data-image-title=\"Paper Sketch, Actionable notifications for webOS v3+\" data-image-description=\"&lt;p&gt;webOS notifications were regarded as being among the best on any mobile OS when they were first introduced as part of Palm&amp;#8217;s 2009 CES webOS and Pre presentation. Their three primary user experience strengths as I saw them were that they 1) were unobtrusive and non-modal when they appeared, 2) shrink quietly into a still-visible notification area when completely ignored through user inaction, 3) can be easily recalled to larger form in a &amp;#8220;dashboard view&amp;#8221; (through a single tap).&lt;\/p&gt;\n&lt;p&gt;webOS 2.x added indicators of the numbers of notifications for each application, and webOS 3.x for tablets, added the ability to dismiss the top notification in an application&amp;#8217;s stack of notifications to see the next notification.&lt;\/p&gt;\n&lt;p&gt;Homebrew patches to webOS and some applications&amp;#8217; innovative use of their own notification space gave users the option to actually do things to an application&amp;#8217;s data directly from that notification, like delete an email (vs having to first go into the email app), while allowing users to stay &amp;#8220;in&amp;#8221; the application they were in.&lt;\/p&gt;\n&lt;p&gt;In designing a framework for actionable notifications as an evolution to webOS v3.x, I sought a standard solution to the question of how any application could offer a set of sensible actions to users from that app&amp;#8217;s notification. The idea hinged around offering a default action\u2014available directly\u2014and a set of other actions available via an expandable action drawer.&lt;\/p&gt;\n&lt;p&gt;The sketch above shows the seeds of literally three different directions for that drawer\u2014to expand as a translucent overlay over its notification, to expand as an additional row under its notification, and to expand as a vertical array of actions to the right of its notification.&lt;\/p&gt;\n&lt;p&gt;I then explored these directions more fully as Balsamiq mockups, both as interaction flows (&lt;a href=&quot;http:\/\/edwinli.com\/ux-2020-09-28-archive-dev01\/?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-2020-09-28-archive-dev01\/?attachment_id=380&quot; title=&quot;Prototype interaction flow, Action drawer below, webOS v3+ Actionable Notifications&quot;&gt;action drawer below&lt;\/a&gt;, and &lt;a href=&quot;http:\/\/edwinli.com\/ux-2020-09-28-archive-dev01\/?attachment_id=297&quot; title=&quot;Prototype interaction flow, Action drawer to the right, webOS v3+ Actionable Notifications&quot;&gt;action drawer to the right&lt;\/a&gt;), as a set of Balsamiq Mockups prototypes (e.g., &lt;a href=&quot;http:\/\/edwinli.com\/ux-2020-09-28-archive-dev01\/?attachment_id=287&quot; title=&quot;Prototype, Action drawer overlaid, webOS v3+ Actionable Notifications&quot;&gt;action drawer as overlay&lt;\/a&gt;, &lt;a href=&quot;http:\/\/edwinli.com\/ux-2020-09-28-archive-dev01\/?attachment_id=288&quot; title=&quot;Prototype, Action drawer below, webOS v3+ Actionable Notifications&quot;&gt;action drawer below&lt;\/a&gt;, &lt;a href=&quot;http:\/\/edwinli.com\/ux-2020-09-28-archive-dev01\/?attachment_id=289&quot; title=&quot;Prototype, Action drawer to the right, webOS v3+ Actionable Notifications&quot;&gt;action drawer to the right&lt;\/a&gt;), and as a &lt;a href=&quot;http:\/\/edwinli.com\/ux-2020-09-28-archive-dev01\/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;clickable PDF prototype (download)&lt;\/a&gt; (action drawer to the right).&lt;\/p&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-2020-09-28-archive-dev01\/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;webOS notifications were largely regarded as a great design, from webOS version 1.x to 2.x to 3.x. But even they could be improved. In this sketch, I explore three ways to evolve webOS notifications more &amp;#8220;actionable&amp;#8221; in a tablet.&lt;\/p&gt;\n\" data-large-file=\"https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2013\/05\/Notifications-sketches-v0-2013-03-16_Page_4-e1371002548796.png?fit=752%2C1024&amp;ssl=1\" \/><\/a>\n\t\t\t<\/dt>\n\t\t\t\t<dd class='wp-caption-text gallery-caption' id='gallery-4-278'>\n\t\t\t\twebOS notifications were largely regarded as a great design, from webOS version 1.x to 2.x to 3.x. But even they could be improved. In this sketch, I explore three ways to evolve webOS notifications more &#8220;actionable&#8221; in a tablet.\n\t\t\t\t<\/dd><\/dl><br style=\"clear: both\" \/>\n\t\t<\/div>\n<\/li>\n<li>Sample artifacts: sketches on whiteboards. Whiteboards are also great. They allow for quick, easily modifiable sketches and a quickly switchable, limited color palette. They also allow designers to literally have a &#8220;big picture&#8221; of their design. Finally, they provide great support for brainstorming, designing, or reviewing as a group.\n\t\t<style>\n\t\t\t#gallery-5 {\n\t\t\t\tmargin: auto;\n\t\t\t}\n\t\t\t#gallery-5 .gallery-item {\n\t\t\t\tfloat: left;\n\t\t\t\tmargin-top: 10px;\n\t\t\t\ttext-align: center;\n\t\t\t\twidth: 33%;\n\t\t\t}\n\t\t\t#gallery-5 img {\n\t\t\t\tborder: 2px solid #cfcfcf;\n\t\t\t}\n\t\t\t#gallery-5 .gallery-caption {\n\t\t\t\tmargin-left: 0;\n\t\t\t}\n\t\t\t\/* see gallery_shortcode() in wp-includes\/media.php *\/\n\t\t<\/style>\n\t\t<div data-carousel-extra='{&quot;blog_id&quot;:22,&quot;permalink&quot;:&quot;https:\/\/edwinli.com\/ux-2020-09-28-archive\/temp-portfolio\/process\/&quot;}' id='gallery-5' class='gallery galleryid-247 gallery-columns-3 gallery-size-thumbnail'><dl class='gallery-item'>\n\t\t\t<dt class='gallery-icon landscape'>\n\t\t\t\t<a href='https:\/\/edwinli.com\/ux-2020-09-28-archive\/home-page-02-notification-area-v0-v0-1-cleansed\/'><img loading=\"lazy\" decoding=\"async\" width=\"150\" height=\"150\" src=\"https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2013\/06\/Home-page-02-Notification-area-v0-v0-1-cleansed.jpg?resize=150%2C150&amp;ssl=1\" class=\"attachment-thumbnail size-thumbnail\" alt=\"Picture of the home page v0 sketched on a whiteboard\" aria-describedby=\"gallery-5-351\" srcset=\"https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2013\/06\/Home-page-02-Notification-area-v0-v0-1-cleansed.jpg?resize=150%2C150&amp;ssl=1 150w, https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2013\/06\/Home-page-02-Notification-area-v0-v0-1-cleansed.jpg?zoom=2&amp;resize=150%2C150 300w, https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2013\/06\/Home-page-02-Notification-area-v0-v0-1-cleansed.jpg?zoom=3&amp;resize=150%2C150 450w\" sizes=\"auto, (max-width: 150px) 100vw, 150px\" data-attachment-id=\"351\" data-permalink=\"https:\/\/edwinli.com\/ux-2020-09-28-archive\/home-page-02-notification-area-v0-v0-1-cleansed\/\" data-orig-file=\"https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2013\/06\/Home-page-02-Notification-area-v0-v0-1-cleansed.jpg?fit=3072%2C1688&amp;ssl=1\" data-orig-size=\"3072,1688\" data-comments-opened=\"0\" data-image-title=\"Application, home page sketch v0\" data-image-description=\"&lt;p&gt;Working from a content model (&lt;a href=&quot;http:\/\/edwinli.com\/ux-2020-09-28-archive-dev01\/?attachment_id=353&quot; title=&quot;Content model for application home page&quot;&gt;on a separate whiteboard in the same room&lt;\/a&gt;), this is a sketch done on a whiteboard. Pictured is version 0 of the design, and it was quickly iterated to &lt;a href=&quot;http:\/\/edwinli.com\/ux-2020-09-28-archive-dev01\/?attachment_id=352&quot; title=&quot;Whiteboard sketch of v0.1&quot;&gt;version 0.1&lt;\/a&gt;.&lt;\/p&gt;\n&lt;p&gt;Sketching on whiteboards is great: quick, easily modifiable, nimble color palette usage, and very supportive of brainstorming, designing, or reviewing as a group.&lt;\/p&gt;\n&lt;p&gt;This page was ulitmately prototyped using Axure RP Pro 6, and I produced a UI specifications document for the prototype (&lt;a href=&quot;http:\/\/edwinli.com\/ux-2020-09-28-archive-dev01\/?attachment_id=338&quot; title=&quot;UI specifications page for this home page&quot;&gt;the start of this page&amp;#8217;s documentation section&lt;\/a&gt;).&lt;\/p&gt;\n\" data-image-caption=\"&lt;p&gt;A whiteboard sketch of the home page for a web application. This sketch is version 0 of the design.&lt;\/p&gt;\n\" data-large-file=\"https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2013\/06\/Home-page-02-Notification-area-v0-v0-1-cleansed.jpg?fit=900%2C495&amp;ssl=1\" \/><\/a>\n\t\t\t<\/dt>\n\t\t\t\t<dd class='wp-caption-text gallery-caption' id='gallery-5-351'>\n\t\t\t\tA whiteboard sketch of the home page for a web application. This sketch is version 0 of the design.\n\t\t\t\t<\/dd><\/dl><dl class='gallery-item'>\n\t\t\t<dt class='gallery-icon landscape'>\n\t\t\t\t<a href='https:\/\/edwinli.com\/ux-2020-09-28-archive\/home-page-v0-1-cleansed\/'><img loading=\"lazy\" decoding=\"async\" width=\"150\" height=\"150\" src=\"https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2013\/06\/Home-page-v0-1-cleansed.jpg?resize=150%2C150&amp;ssl=1\" class=\"attachment-thumbnail size-thumbnail\" alt=\"Picture of the home page v0.1 sketched on a whiteboard\" aria-describedby=\"gallery-5-352\" srcset=\"https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2013\/06\/Home-page-v0-1-cleansed.jpg?resize=150%2C150&amp;ssl=1 150w, https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2013\/06\/Home-page-v0-1-cleansed.jpg?zoom=2&amp;resize=150%2C150 300w, https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2013\/06\/Home-page-v0-1-cleansed.jpg?zoom=3&amp;resize=150%2C150 450w\" sizes=\"auto, (max-width: 150px) 100vw, 150px\" data-attachment-id=\"352\" data-permalink=\"https:\/\/edwinli.com\/ux-2020-09-28-archive\/home-page-v0-1-cleansed\/\" data-orig-file=\"https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2013\/06\/Home-page-v0-1-cleansed.jpg?fit=2936%2C2104&amp;ssl=1\" data-orig-size=\"2936,2104\" data-comments-opened=\"0\" data-image-title=\"Application, home page sketch v0.1\" data-image-description=\"&lt;p&gt;Working from a content model (&lt;a href=&quot;http:\/\/edwinli.com\/ux-2020-09-28-archive-dev01\/?attachment_id=353&quot; title=&quot;Content model for application home page&quot;&gt;on a separate whiteboard in the same room&lt;\/a&gt;), here&amp;#8217;s a sketch done and iterated upon on a whiteboard. Pictured is version 0.1 of the design (&lt;a href=&quot;http:\/\/edwinli.com\/ux-2020-09-28-archive-dev01\/?attachment_id=351&quot; title=&quot;Application, home page sketch v0&quot;&gt;version 0&lt;\/a&gt;).&lt;\/p&gt;\n&lt;p&gt;This page was then prototyped using Axure RP Pro 6, and I produced a UI specifications document for the prototype (&lt;a href=&quot;http:\/\/edwinli.com\/ux-2020-09-28-archive-dev01\/?attachment_id=338&quot; title=&quot;UI specifications page for this home page&quot;&gt;the start of this page&amp;#8217;s documentation section&lt;\/a&gt;).&lt;\/p&gt;\n\" data-image-caption=\"&lt;p&gt;A whiteboard sketch of the home page for a web application. This sketch is version 0.1 of the design.&lt;\/p&gt;\n\" data-large-file=\"https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2013\/06\/Home-page-v0-1-cleansed.jpg?fit=900%2C645&amp;ssl=1\" \/><\/a>\n\t\t\t<\/dt>\n\t\t\t\t<dd class='wp-caption-text gallery-caption' id='gallery-5-352'>\n\t\t\t\tA whiteboard sketch of the home page for a web application. This sketch is version 0.1 of the design.\n\t\t\t\t<\/dd><\/dl><dl class='gallery-item'>\n\t\t\t<dt class='gallery-icon landscape'>\n\t\t\t\t<a href='https:\/\/edwinli.com\/ux-2020-09-28-archive\/cooper-photobook-01-functions-and-directions-ed\/'><img loading=\"lazy\" decoding=\"async\" width=\"150\" height=\"150\" src=\"https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2013\/06\/Cooper-PhotoBook-01-Functions-and-directions-ed.jpg?resize=150%2C150&amp;ssl=1\" class=\"attachment-thumbnail size-thumbnail\" alt=\"Picture of design direction explorations on a whiteboard\" aria-describedby=\"gallery-5-350\" srcset=\"https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2013\/06\/Cooper-PhotoBook-01-Functions-and-directions-ed.jpg?resize=150%2C150&amp;ssl=1 150w, https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2013\/06\/Cooper-PhotoBook-01-Functions-and-directions-ed.jpg?zoom=2&amp;resize=150%2C150 300w, https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2013\/06\/Cooper-PhotoBook-01-Functions-and-directions-ed.jpg?zoom=3&amp;resize=150%2C150 450w\" sizes=\"auto, (max-width: 150px) 100vw, 150px\" data-attachment-id=\"350\" data-permalink=\"https:\/\/edwinli.com\/ux-2020-09-28-archive\/cooper-photobook-01-functions-and-directions-ed\/\" data-orig-file=\"https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2013\/06\/Cooper-PhotoBook-01-Functions-and-directions-ed.jpg?fit=2720%2C1544&amp;ssl=1\" data-orig-size=\"2720,1544\" data-comments-opened=\"0\" data-image-title=\"Functions and design directions\" data-image-description=\"&lt;p&gt;Here I have a list of functionality that the product, a capacitive touchscreen, photo-focused tablet, should support, some sensible subset of which would fit onto the screen or screens on which we are working. Because of the expanse of the whiteboard, a couple of different design directions can be explored and reflected upon side by side, and some have already been discarded and erased.&lt;\/p&gt;\n&lt;p&gt;The &lt;a href=&quot;http:\/\/edwinli.com\/ux-2020-09-28-archive-dev01\/?attachment_id=349&quot; title=&quot;Sketching out the main screens&quot;&gt;next step&lt;\/a&gt; in this was to flesh out one of the design directions more.&lt;\/p&gt;\n&lt;p&gt;This is a picture from a group exercise during Cooper&amp;#8217;s two-day &lt;a href=&quot;http:\/\/www.cooper.com\/courses\/interaction-design.html&quot; title=&quot;Cooper&#039;s Interaction Design course&quot;&gt;Interaction Design course&lt;\/a&gt;, which I took for direct training in their Goal-Directed Design (using personas) in 2010.&lt;\/p&gt;\n\" data-image-caption=\"&lt;p&gt;Whiteboards are great for brainstorming&amp;#8211;lots of space, easy and quick to change&amp;#8230;&lt;\/p&gt;\n\" data-large-file=\"https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2013\/06\/Cooper-PhotoBook-01-Functions-and-directions-ed.jpg?fit=900%2C511&amp;ssl=1\" \/><\/a>\n\t\t\t<\/dt>\n\t\t\t\t<dd class='wp-caption-text gallery-caption' id='gallery-5-350'>\n\t\t\t\tWhiteboards are great for brainstorming&#8211;lots of space, easy and quick to change&#8230;\n\t\t\t\t<\/dd><\/dl><br style=\"clear: both\" \/><dl class='gallery-item'>\n\t\t\t<dt class='gallery-icon landscape'>\n\t\t\t\t<a href='https:\/\/edwinli.com\/ux-2020-09-28-archive\/cooper-photobook-02-main-screens-ed\/'><img loading=\"lazy\" decoding=\"async\" width=\"150\" height=\"150\" src=\"https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2013\/06\/Cooper-PhotoBook-02-Main-screens-ed.jpg?resize=150%2C150&amp;ssl=1\" class=\"attachment-thumbnail size-thumbnail\" alt=\"Picture of a sketch of a screen and various fly-in command panels\" aria-describedby=\"gallery-5-349\" srcset=\"https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2013\/06\/Cooper-PhotoBook-02-Main-screens-ed.jpg?resize=150%2C150&amp;ssl=1 150w, https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2013\/06\/Cooper-PhotoBook-02-Main-screens-ed.jpg?zoom=2&amp;resize=150%2C150 300w, https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2013\/06\/Cooper-PhotoBook-02-Main-screens-ed.jpg?zoom=3&amp;resize=150%2C150 450w\" sizes=\"auto, (max-width: 150px) 100vw, 150px\" data-attachment-id=\"349\" data-permalink=\"https:\/\/edwinli.com\/ux-2020-09-28-archive\/cooper-photobook-02-main-screens-ed\/\" data-orig-file=\"https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2013\/06\/Cooper-PhotoBook-02-Main-screens-ed.jpg?fit=2520%2C1908&amp;ssl=1\" data-orig-size=\"2520,1908\" data-comments-opened=\"0\" data-image-title=\"Sketching designs and interaction panels\" data-image-description=\"&lt;p&gt;Inspired by the &amp;#8220;chrome-less&amp;#8221; dropdown menus of webOS (versions 1.x through 3.x), in which menus can be summoned by swiping in from the relevant edges and corners of the screen, here I have part of a design of a capacitive touchscreen, photo-focused tablet, in which fly-in interaction or command panels can be summoned from each of the four sides of the screen by swiping in from the bezels. The top panel is for metadata, the right panel for sharing actions, and the bottom panel is for editing tools. Is there to be a left panel? The design definitely had room to be iterated and fleshed out more, so, maybe.&lt;\/p&gt;\n&lt;p&gt;This step fleshes out one of two designs &lt;a href=&quot;http:\/\/edwinli.com\/ux-2020-09-28-archive-dev01\/?attachment_id=350&quot; title=&quot;Exploring design directions&quot;&gt;brainstormed and sketched out on another whiteboard&lt;\/a&gt;.&lt;\/p&gt;\n&lt;p&gt;This is a picture from a group exercise during Cooper&amp;#8217;s two-day &lt;a href=&quot;http:\/\/www.cooper.com\/courses\/interaction-design.html&quot; title=&quot;Cooper&#039;s Interaction Design course&quot;&gt;Interaction Design course&lt;\/a&gt;, which I took for direct training in their Goal-Directed Design (using personas) in 2010.&lt;\/p&gt;\n\" data-image-caption=\"&lt;p&gt;Whiteboard sketch elaborating on design ideas for a touchscreen tablet for photos, using the idea of fly-in command panels&lt;\/p&gt;\n\" data-large-file=\"https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2013\/06\/Cooper-PhotoBook-02-Main-screens-ed.jpg?fit=900%2C681&amp;ssl=1\" \/><\/a>\n\t\t\t<\/dt>\n\t\t\t\t<dd class='wp-caption-text gallery-caption' id='gallery-5-349'>\n\t\t\t\tWhiteboard sketch elaborating on design ideas for a touchscreen tablet for photos, using the idea of fly-in command panels\n\t\t\t\t<\/dd><\/dl>\n\t\t\t<br style='clear: both' \/>\n\t\t<\/div>\n<\/li>\n<li>Sample artifacts: Scenarios, screen flows, storyboards, etc. These show users might use your product or how it might fit into their lives, whether showing a series of interactions in use or showing how users might progress through a set of interaction contexts (for example, screens) as they do their task or activity with your product. These can even be a sequence of screens annotated with behaviors, as I present in my <a href=\"http:\/\/edwinli.com\/ux-2020-09-28-archive\/portfolio\/pandora-driving-mode\/#sectionStoryboard\">Pandora Driving Mode&#8217;s storyboard<\/a>, or a sequence of screen mockups in the order in which they are expected to progress, as in <a href=\"http:\/\/edwinli.com\/ux-2020-09-28-archive\/portfolio\/redbeacon-design-challenge\/#sectionStoryboard\" title=\"RedBeacon Design Challenge\">RedBeacon Design Challenge: Storyboarding the New Design<\/a>.\n\t\t<style>\n\t\t\t#gallery-6 {\n\t\t\t\tmargin: auto;\n\t\t\t}\n\t\t\t#gallery-6 .gallery-item {\n\t\t\t\tfloat: left;\n\t\t\t\tmargin-top: 10px;\n\t\t\t\ttext-align: center;\n\t\t\t\twidth: 33%;\n\t\t\t}\n\t\t\t#gallery-6 img {\n\t\t\t\tborder: 2px solid #cfcfcf;\n\t\t\t}\n\t\t\t#gallery-6 .gallery-caption {\n\t\t\t\tmargin-left: 0;\n\t\t\t}\n\t\t\t\/* see gallery_shortcode() in wp-includes\/media.php *\/\n\t\t<\/style>\n\t\t<div data-carousel-extra='{&quot;blog_id&quot;:22,&quot;permalink&quot;:&quot;https:\/\/edwinli.com\/ux-2020-09-28-archive\/temp-portfolio\/process\/&quot;}' id='gallery-6' class='gallery galleryid-247 gallery-columns-3 gallery-size-thumbnail'><dl class='gallery-item'>\n\t\t\t<dt class='gallery-icon portrait'>\n\t\t\t\t<a href='https:\/\/edwinli.com\/ux-2020-09-28-archive\/samsung-design-challenge-2014-10-08-notes-and-sketches-02\/'><img loading=\"lazy\" decoding=\"async\" width=\"150\" height=\"150\" src=\"https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2014\/10\/Samsung-Design-Challenge-2014-10-08-Notes-and-sketches-02.jpg?resize=150%2C150&amp;ssl=1\" class=\"attachment-thumbnail size-thumbnail\" alt=\"\" aria-describedby=\"gallery-6-1014\" srcset=\"https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2014\/10\/Samsung-Design-Challenge-2014-10-08-Notes-and-sketches-02.jpg?resize=150%2C150&amp;ssl=1 150w, https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2014\/10\/Samsung-Design-Challenge-2014-10-08-Notes-and-sketches-02.jpg?zoom=2&amp;resize=150%2C150 300w, https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2014\/10\/Samsung-Design-Challenge-2014-10-08-Notes-and-sketches-02.jpg?zoom=3&amp;resize=150%2C150 450w\" sizes=\"auto, (max-width: 150px) 100vw, 150px\" data-attachment-id=\"1014\" data-permalink=\"https:\/\/edwinli.com\/ux-2020-09-28-archive\/samsung-design-challenge-2014-10-08-notes-and-sketches-02\/\" data-orig-file=\"https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2014\/10\/Samsung-Design-Challenge-2014-10-08-Notes-and-sketches-02.jpg?fit=1716%2C2256&amp;ssl=1\" data-orig-size=\"1716,2256\" data-comments-opened=\"1\" data-image-title=\"Samsung Design Challenge 2014-10-08 Notes and sketches 02\" data-image-description=\"\" data-image-caption=\"&lt;p&gt;A sketched storyboard for how a user might use Pandora&amp;#8217;s Driving Mode&lt;\/p&gt;\n\" data-large-file=\"https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2014\/10\/Samsung-Design-Challenge-2014-10-08-Notes-and-sketches-02.jpg?fit=779%2C1024&amp;ssl=1\" \/><\/a>\n\t\t\t<\/dt>\n\t\t\t\t<dd class='wp-caption-text gallery-caption' id='gallery-6-1014'>\n\t\t\t\tA sketched storyboard for how a user might use Pandora&#8217;s Driving Mode\n\t\t\t\t<\/dd><\/dl><dl class='gallery-item'>\n\t\t\t<dt class='gallery-icon landscape'>\n\t\t\t\t<a href='https:\/\/edwinli.com\/ux-2020-09-28-archive\/edwins-sketches-002-screen-flow\/'><img loading=\"lazy\" decoding=\"async\" width=\"150\" height=\"150\" src=\"https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2013\/05\/Edwins-sketches-002-Screen-flow.gif?resize=150%2C150&amp;ssl=1\" class=\"attachment-thumbnail size-thumbnail\" alt=\"Abstract, named screens connected and ordered by arrows showing users&#039; path.\" aria-describedby=\"gallery-6-304\" data-attachment-id=\"304\" data-permalink=\"https:\/\/edwinli.com\/ux-2020-09-28-archive\/edwins-sketches-002-screen-flow\/\" data-orig-file=\"https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2013\/05\/Edwins-sketches-002-Screen-flow.gif?fit=3507%2C2550&amp;ssl=1\" data-orig-size=\"3507,2550\" data-comments-opened=\"0\" data-image-title=\"Screen flow For a Usage Scenario (Mobile App)\" data-image-description=\"&lt;p&gt;After the development of a navigation model (Usage-Centered Design), or as part of the development of such, here I&amp;#8217;ve sketched a progression of interaction contexts or screens through which users will progress in the course of a particular usage scenario. If done as part of the development of a navigation model, scenarios of each of the main use cases might be drawn up. Then the screens implicated in each of the scenarios would be listed, mapped out, possibly combined or split up to arrive at a navigation model that encompasses all the scenarios and tries to accommodate all their screen needs as sensibly and efficiently as possible.&lt;\/p&gt;\n&lt;p&gt;This is a sketch from a personal project, a mobile app intended as a sort of TiVo for real-time streams of geographically based ads. A write-up page of that project as a portfolio page is forthcoming (or you can &lt;a href=&quot;http:\/\/edwinli.com\/ux-2020-09-28-archive-dev01\/?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;).&lt;\/p&gt;\n&lt;p&gt;For more on the Usage-Centered Design framework, check out their website, &lt;a href=&quot;http:\/\/foruse.com&quot; title=&quot;ForUse.com&quot; target=&quot;_blank&quot;&gt;ForUse.com&lt;\/a&gt;, or you can buy their book, &amp;#8220;Software for Use: A Practical Guide to the Models and Methods of Usage-Centered Design&amp;#8221; from Amazon.com (Amazon Affiliate links: &lt;a href=&quot;http:\/\/www.amazon.com\/gp\/product\/0321773721\/ref=as_li_qf_sp_asin_il_tl?ie=UTF8&amp;#038;camp=1789&amp;#038;creative=9325&amp;#038;creativeASIN=0321773721&amp;#038;linkCode=as2&amp;#038;tag=edliuxcogl-20&quot; title=&quot;Software For Use, paperback edition&quot; target=&quot;_blank&quot;&gt;paperback edition&lt;\/a&gt;, &lt;a href=&quot;http:\/\/www.amazon.com\/gp\/product\/B001EWOG7Q\/ref=as_li_qf_sp_asin_il_tl?ie=UTF8&amp;#038;camp=1789&amp;#038;creative=9325&amp;#038;creativeASIN=B001EWOG7Q&amp;#038;linkCode=as2&amp;#038;tag=edliuxcogl-20&quot; title=&quot;Software For Use, Kindle edition&quot; target=&quot;_blank&quot;&gt;Kindle edition&lt;\/a&gt;). &lt;\/p&gt;\n\" data-image-caption=\"&lt;p&gt;A sketch of the screen flow through which a user will go to get their task done.&lt;\/p&gt;\n\" data-large-file=\"https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2013\/05\/Edwins-sketches-002-Screen-flow.gif?fit=900%2C655&amp;ssl=1\" \/><\/a>\n\t\t\t<\/dt>\n\t\t\t\t<dd class='wp-caption-text gallery-caption' id='gallery-6-304'>\n\t\t\t\tA sketch of the screen flow through which a user will go to get their task done.\n\t\t\t\t<\/dd><\/dl><dl class='gallery-item'>\n\t\t\t<dt class='gallery-icon landscape'>\n\t\t\t\t<a href='https:\/\/edwinli.com\/ux-2020-09-28-archive\/incoming-calls-shouldnt-interrupt-video-recording-on-smartphones\/incoming-call-while-recording-01-flows-1-9-2013-12-55-21-pmed\/'><img loading=\"lazy\" decoding=\"async\" width=\"150\" height=\"150\" src=\"https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2013\/05\/Incoming-call-while-recording-01-Flows-1-9-2013-12-55-21-PMed.gif?resize=150%2C150&amp;ssl=1\" class=\"attachment-thumbnail size-thumbnail\" alt=\"A sketch of two options for improving iPhone phone call notifications.\" aria-describedby=\"gallery-6-220\" data-attachment-id=\"220\" data-permalink=\"https:\/\/edwinli.com\/ux-2020-09-28-archive\/incoming-calls-shouldnt-interrupt-video-recording-on-smartphones\/incoming-call-while-recording-01-flows-1-9-2013-12-55-21-pmed\/\" data-orig-file=\"https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2013\/05\/Incoming-call-while-recording-01-Flows-1-9-2013-12-55-21-PMed.gif?fit=793%2C618&amp;ssl=1\" data-orig-size=\"793,618\" data-comments-opened=\"1\" data-image-title=\"Incoming call while recording 01 Flows 1-9-2013 12-55-21 PMed\" data-image-description=\"\" data-image-caption=\"&lt;p&gt;Possible interaction flows: Incoming call during video recording. With the headset and\/or the watch connected, the phone may even optionally not show its notification so as not to occlude the recording. Alternatively, we might leave the banner there to keep the locus of users&amp;#8217; attention on the phone while they interact with the notification.&lt;\/p&gt;\n\" data-large-file=\"https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2013\/05\/Incoming-call-while-recording-01-Flows-1-9-2013-12-55-21-PMed.gif?fit=793%2C618&amp;ssl=1\" \/><\/a>\n\t\t\t<\/dt>\n\t\t\t\t<dd class='wp-caption-text gallery-caption' id='gallery-6-220'>\n\t\t\t\tPossible interaction flows: Incoming call during video recording. With the headset and\/or the watch connected, the phone may even optionally not show its notification so as not to occlude the recording. Alternatively, we might leave the banner there to keep the locus of users&#8217; attention on the phone while they interact with the notification.\n\t\t\t\t<\/dd><\/dl><br style=\"clear: both\" \/>\n\t\t<\/div>\n<\/li>\n<li>Sample artifacts: Balsamiq mockups. Balsamiq Mockups is a fantastic product aimed primarily at the ideation phase of design. Its tools and stencils support very quick creation of screens and pages, and its sketch-like quality leaves imagination free in a way that more finished-looking artifacts do not. This makes it great for not only personal ideation, but getting feedback and reflections from others. In that latter case especially, Balsamiq Mockups&#8217; clear lack of finish encourages feedback that is more &#8220;I don&#8217;t know if users will understand that arrangement&#8221; and less &#8220;I think that font needs to be Calibri&#8221;. Balsamiq Mockups output can be be shared as Mockups files, images, clickable prototypes, or clickable pdfs.\n\t\t<style>\n\t\t\t#gallery-7 {\n\t\t\t\tmargin: auto;\n\t\t\t}\n\t\t\t#gallery-7 .gallery-item {\n\t\t\t\tfloat: left;\n\t\t\t\tmargin-top: 10px;\n\t\t\t\ttext-align: center;\n\t\t\t\twidth: 33%;\n\t\t\t}\n\t\t\t#gallery-7 img {\n\t\t\t\tborder: 2px solid #cfcfcf;\n\t\t\t}\n\t\t\t#gallery-7 .gallery-caption {\n\t\t\t\tmargin-left: 0;\n\t\t\t}\n\t\t\t\/* see gallery_shortcode() in wp-includes\/media.php *\/\n\t\t<\/style>\n\t\t<div data-carousel-extra='{&quot;blog_id&quot;:22,&quot;permalink&quot;:&quot;https:\/\/edwinli.com\/ux-2020-09-28-archive\/temp-portfolio\/process\/&quot;}' id='gallery-7' class='gallery galleryid-247 gallery-columns-3 gallery-size-thumbnail'><dl class='gallery-item'>\n\t\t\t<dt class='gallery-icon portrait'>\n\t\t\t\t<a href='https:\/\/edwinli.com\/ux-2020-09-28-archive\/30-home-v0-with-projects-watermarked\/'><img loading=\"lazy\" decoding=\"async\" width=\"150\" height=\"150\" src=\"https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2014\/04\/30-Home-v0-with-projects-watermarked.png?resize=150%2C150&amp;ssl=1\" class=\"attachment-thumbnail size-thumbnail\" alt=\"\" aria-describedby=\"gallery-7-862\" data-attachment-id=\"862\" data-permalink=\"https:\/\/edwinli.com\/ux-2020-09-28-archive\/30-home-v0-with-projects-watermarked\/\" data-orig-file=\"https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2014\/04\/30-Home-v0-with-projects-watermarked.png?fit=282%2C573&amp;ssl=1\" data-orig-size=\"282,573\" data-comments-opened=\"0\" data-image-title=\"30 Home v0 with projects watermarked\" data-image-description=\"&lt;p&gt;Designed with an expanded mission, the app&amp;#8217;s home screen reflects that. Users can start or add to projects by name, taking a picture or video, scanning a UPC code, or browsing\/searching through the Home Depot catalog. Also, reflecting usage of the app as a home improvement project notebook, previously started project notes are also listed and available from the home screen.&lt;\/p&gt;\n\" data-image-caption=\"&lt;p&gt;Reconceptualizing the app as a home improvement project notebook, the home screen provides more options.&lt;\/p&gt;\n\" data-large-file=\"https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2014\/04\/30-Home-v0-with-projects-watermarked.png?fit=282%2C573&amp;ssl=1\" \/><\/a>\n\t\t\t<\/dt>\n\t\t\t\t<dd class='wp-caption-text gallery-caption' id='gallery-7-862'>\n\t\t\t\tReconceptualizing the app as a home improvement project notebook, the home screen provides more options.\n\t\t\t\t<\/dd><\/dl><dl class='gallery-item'>\n\t\t\t<dt class='gallery-icon landscape'>\n\t\t\t\t<a href='https:\/\/edwinli.com\/ux-2020-09-28-archive\/temp-portfolio\/03c-command-drawer-open\/'><img loading=\"lazy\" decoding=\"async\" width=\"150\" height=\"150\" src=\"https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2013\/05\/03c-Command-drawer-open.png?resize=150%2C150&amp;ssl=1\" class=\"attachment-thumbnail size-thumbnail\" 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.\" aria-describedby=\"gallery-7-289\" srcset=\"https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2013\/05\/03c-Command-drawer-open.png?resize=150%2C150&amp;ssl=1 150w, https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2013\/05\/03c-Command-drawer-open.png?zoom=2&amp;resize=150%2C150 300w, https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2013\/05\/03c-Command-drawer-open.png?zoom=3&amp;resize=150%2C150 450w\" sizes=\"auto, (max-width: 150px) 100vw, 150px\" data-attachment-id=\"289\" data-permalink=\"https:\/\/edwinli.com\/ux-2020-09-28-archive\/temp-portfolio\/03c-command-drawer-open\/\" data-orig-file=\"https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2013\/05\/03c-Command-drawer-open.png?fit=1239%2C974&amp;ssl=1\" 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-2020-09-28-archive-dev01\/?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-2020-09-28-archive-dev01\/?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-2020-09-28-archive-dev01\/?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-2020-09-28-archive-dev01\/?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-2020-09-28-archive-dev01\/?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-2020-09-28-archive-dev01\/?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-2020-09-28-archive-dev01\/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-2020-09-28-archive-dev01\/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:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2013\/05\/03c-Command-drawer-open.png?fit=900%2C708&amp;ssl=1\" \/><\/a>\n\t\t\t<\/dt>\n\t\t\t\t<dd class='wp-caption-text gallery-caption' id='gallery-7-289'>\n\t\t\t\tA 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.\n\t\t\t\t<\/dd><\/dl><dl class='gallery-item'>\n\t\t\t<dt class='gallery-icon landscape'>\n\t\t\t\t<a href='https:\/\/edwinli.com\/ux-2020-09-28-archive\/03b-command-drawer-open\/'><img loading=\"lazy\" decoding=\"async\" width=\"150\" height=\"150\" src=\"https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2013\/05\/03b-Command-drawer-open.png?resize=150%2C150&amp;ssl=1\" class=\"attachment-thumbnail size-thumbnail\" 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.\" aria-describedby=\"gallery-7-288\" srcset=\"https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2013\/05\/03b-Command-drawer-open.png?resize=150%2C150&amp;ssl=1 150w, https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2013\/05\/03b-Command-drawer-open.png?zoom=2&amp;resize=150%2C150 300w, https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2013\/05\/03b-Command-drawer-open.png?zoom=3&amp;resize=150%2C150 450w\" sizes=\"auto, (max-width: 150px) 100vw, 150px\" data-attachment-id=\"288\" data-permalink=\"https:\/\/edwinli.com\/ux-2020-09-28-archive\/03b-command-drawer-open\/\" data-orig-file=\"https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2013\/05\/03b-Command-drawer-open.png?fit=1239%2C974&amp;ssl=1\" data-orig-size=\"1239,974\" data-comments-opened=\"0\" data-image-title=\"Prototype, Action drawer below, 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&amp;#8217; 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 new row below the notification for which it was invoked and on which the actions will apply. The actions for this email notification stack are, from left to right: Close Action Drawer, Help (invokes pop-up labels for each of the actions&amp;#8217; icons), Mark as Read, Recycle Notification, Mark as Spam, Flag, and Delete (which is the default action).&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 to the right of 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-2020-09-28-archive-dev01\/?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-2020-09-28-archive-dev01\/?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-2020-09-28-archive-dev01\/?attachment_id=289&quot; title=&quot;Prototype, 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;one interaction flow diagram for each of these design directions: &lt;a href=&quot;http:\/\/edwinli.com\/ux-2020-09-28-archive-dev01\/?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-2020-09-28-archive-dev01\/?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-2020-09-28-archive-dev01\/?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-2020-09-28-archive-dev01\/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-2020-09-28-archive-dev01\/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 in a new row as an actionable notifications framework that evolves webOS v3.x&amp;#8217; much-lauded notification system.&lt;\/p&gt;\n\" data-large-file=\"https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2013\/05\/03b-Command-drawer-open.png?fit=900%2C708&amp;ssl=1\" \/><\/a>\n\t\t\t<\/dt>\n\t\t\t\t<dd class='wp-caption-text gallery-caption' id='gallery-7-288'>\n\t\t\t\tA Balsamiq Mockups prototype for an action drawer that opens in a new row as an actionable notifications framework that evolves webOS v3.x&#8217; much-lauded notification system.\n\t\t\t\t<\/dd><\/dl><br style=\"clear: both\" \/><dl class='gallery-item'>\n\t\t\t<dt class='gallery-icon landscape'>\n\t\t\t\t<a href='https:\/\/edwinli.com\/ux-2020-09-28-archive\/03a-command-drawer-open\/'><img loading=\"lazy\" decoding=\"async\" width=\"150\" height=\"150\" src=\"https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2013\/05\/03a-Command-drawer-open.png?resize=150%2C150&amp;ssl=1\" class=\"attachment-thumbnail size-thumbnail\" 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.\" aria-describedby=\"gallery-7-287\" srcset=\"https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2013\/05\/03a-Command-drawer-open.png?resize=150%2C150&amp;ssl=1 150w, https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2013\/05\/03a-Command-drawer-open.png?zoom=2&amp;resize=150%2C150 300w, https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2013\/05\/03a-Command-drawer-open.png?zoom=3&amp;resize=150%2C150 450w\" sizes=\"auto, (max-width: 150px) 100vw, 150px\" data-attachment-id=\"287\" data-permalink=\"https:\/\/edwinli.com\/ux-2020-09-28-archive\/03a-command-drawer-open\/\" data-orig-file=\"https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2013\/05\/03a-Command-drawer-open.png?fit=1239%2C974&amp;ssl=1\" data-orig-size=\"1239,974\" data-comments-opened=\"0\" data-image-title=\"Prototype, Action drawer overlaid, 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&amp;#8217; 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 as a translucent overlay over the notification for which it was invoked and on which the actions will apply. The actions for this email notification stack are, from left to right: Close Action Drawer, Help (invokes pop-up labels for each of the actions&amp;#8217; icons), Mark as Read, Recycle Notification, Mark as Spam, Flag, and Delete (which is the default action).&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 into a new row to expand below the relevant notification and for the action drawer to open to the right of 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-2020-09-28-archive-dev01\/?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-2020-09-28-archive-dev01\/?attachment_id=288&quot; title=&quot;Prototype, 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-2020-09-28-archive-dev01\/?attachment_id=289&quot; title=&quot;Prototype, 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;one interaction flow diagram for each of these design directions: &lt;a href=&quot;http:\/\/edwinli.com\/ux-2020-09-28-archive-dev01\/?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-2020-09-28-archive-dev01\/?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-2020-09-28-archive-dev01\/?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-2020-09-28-archive-dev01\/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-2020-09-28-archive-dev01\/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 overlay as an actionable notifications framework that evolves webOS v3.x&amp;#8217; much-lauded notification system.&lt;\/p&gt;\n\" data-large-file=\"https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2013\/05\/03a-Command-drawer-open.png?fit=900%2C708&amp;ssl=1\" \/><\/a>\n\t\t\t<\/dt>\n\t\t\t\t<dd class='wp-caption-text gallery-caption' id='gallery-7-287'>\n\t\t\t\tA Balsamiq Mockups prototype for an action drawer overlay as an actionable notifications framework that evolves webOS v3.x&#8217; much-lauded notification system.\n\t\t\t\t<\/dd><\/dl><dl class='gallery-item'>\n\t\t\t<dt class='gallery-icon portrait'>\n\t\t\t\t<a href='https:\/\/edwinli.com\/ux-2020-09-28-archive\/temp-portfolio\/03-filters-drawer\/'><img loading=\"lazy\" decoding=\"async\" width=\"150\" height=\"150\" src=\"https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2013\/05\/03-Filters-drawer.gif?resize=150%2C150&amp;ssl=1\" class=\"attachment-thumbnail size-thumbnail\" alt=\"\" aria-describedby=\"gallery-7-286\" data-attachment-id=\"286\" data-permalink=\"https:\/\/edwinli.com\/ux-2020-09-28-archive\/temp-portfolio\/03-filters-drawer\/\" data-orig-file=\"https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2013\/05\/03-Filters-drawer.gif?fit=423%2C721&amp;ssl=1\" 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-2020-09-28-archive-dev01\/?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-2020-09-28-archive-dev01\/?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-2020-09-28-archive-dev01\/?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:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2013\/05\/03-Filters-drawer.gif?fit=423%2C721&amp;ssl=1\" \/><\/a>\n\t\t\t<\/dt>\n\t\t\t\t<dd class='wp-caption-text gallery-caption' id='gallery-7-286'>\n\t\t\t\tA 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.\n\t\t\t\t<\/dd><\/dl>\n\t\t\t<br style='clear: both' \/>\n\t\t<\/div>\n<\/li>\n<li>Sample artifacts: HTML\/CSS. Sometimes, you need to communicate precisely what colors or precisely what you want something to look like in a way that is expressible in HTML and CSS\u2014whether that be a coworker in the cube next to you or a remote development team. And when that&#8217;s necessary, or when they simply prefer to get their input from their UX designer as code, sometimes that&#8217;s just the way to go.\n\t\t<style>\n\t\t\t#gallery-8 {\n\t\t\t\tmargin: auto;\n\t\t\t}\n\t\t\t#gallery-8 .gallery-item {\n\t\t\t\tfloat: left;\n\t\t\t\tmargin-top: 10px;\n\t\t\t\ttext-align: center;\n\t\t\t\twidth: 33%;\n\t\t\t}\n\t\t\t#gallery-8 img {\n\t\t\t\tborder: 2px solid #cfcfcf;\n\t\t\t}\n\t\t\t#gallery-8 .gallery-caption {\n\t\t\t\tmargin-left: 0;\n\t\t\t}\n\t\t\t\/* see gallery_shortcode() in wp-includes\/media.php *\/\n\t\t<\/style>\n\t\t<div data-carousel-extra='{&quot;blog_id&quot;:22,&quot;permalink&quot;:&quot;https:\/\/edwinli.com\/ux-2020-09-28-archive\/temp-portfolio\/process\/&quot;}' id='gallery-8' class='gallery galleryid-247 gallery-columns-3 gallery-size-thumbnail'><dl class='gallery-item'>\n\t\t\t<dt class='gallery-icon portrait'>\n\t\t\t\t<a href='https:\/\/edwinli.com\/ux-2020-09-28-archive\/temp-portfolio\/process\/ost-home-page-simple\/'><img loading=\"lazy\" decoding=\"async\" width=\"150\" height=\"150\" src=\"https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2013\/06\/OST-home-page-simple.png?resize=150%2C150&amp;ssl=1\" class=\"attachment-thumbnail size-thumbnail\" alt=\"A screenshot of a page from an HTML\/CSS prototype\" aria-describedby=\"gallery-8-331\" srcset=\"https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2013\/06\/OST-home-page-simple.png?resize=150%2C150&amp;ssl=1 150w, https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2013\/06\/OST-home-page-simple.png?zoom=2&amp;resize=150%2C150 300w, https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2013\/06\/OST-home-page-simple.png?zoom=3&amp;resize=150%2C150 450w\" sizes=\"auto, (max-width: 150px) 100vw, 150px\" data-attachment-id=\"331\" data-permalink=\"https:\/\/edwinli.com\/ux-2020-09-28-archive\/temp-portfolio\/process\/ost-home-page-simple\/\" data-orig-file=\"https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2013\/06\/OST-home-page-simple.png?fit=1034%2C1201&amp;ssl=1\" data-orig-size=\"1034,1201\" data-comments-opened=\"0\" data-image-title=\"Prototype, HTML\/CSS, Web App\" data-image-description=\"&lt;p&gt;Depending on the development team with which I&amp;#8217;m working and the product on which which I&amp;#8217;m working, I can produce prototypes using HTML\/CSS. This is a screenshot taken of one such prototype.&lt;\/p&gt;\n&lt;p&gt;As I designed this web application, I had a number of animations and other rich-interaction techniques in mind that would have to be done in JavaScript. Not being much of a JavaScript coder myself, I left that part of the design as annotations and descriptions of the desired behavior, documented in the UI specifications format that I developed and established for our team (&lt;a href=&quot;http:\/\/edwinli.com\/ux-2020-09-28-archive-dev01\/?attachment_id=337&quot; title=&quot;UI Specifications Using a Website&quot;&gt;screenshot of that UI specifications format&lt;\/a&gt;)&lt;\/p&gt;\n&lt;p&gt;I have tried to remove or replace information in the actual prototype that might serve to identify too readily the company and product for which this work was done.&lt;\/p&gt;\n\" data-image-caption=\"&lt;p&gt;A prototype done entirely in HTML and CSS for a web application.&lt;\/p&gt;\n\" data-large-file=\"https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2013\/06\/OST-home-page-simple.png?fit=882%2C1024&amp;ssl=1\" \/><\/a>\n\t\t\t<\/dt>\n\t\t\t\t<dd class='wp-caption-text gallery-caption' id='gallery-8-331'>\n\t\t\t\tA prototype done entirely in HTML and CSS for a web application.\n\t\t\t\t<\/dd><\/dl>\n\t\t\t<br style='clear: both' \/>\n\t\t<\/div>\n<\/li>\n<li>Sample artifacts: Photoshop and HTML\/CSS-Photoshop hybrids. When you need to create pixel-perfect mockups, whether to add to HTML\/CSS mockups or on their own, sometimes, Photoshop is the way to go. This can have its cost, of course. For me, sometimes HTML\/CSS is faster or a better hand-off product for the development team with which I&#8217;m working, and other times, and, other times, Photoshop is what&#8217;s called for.\n\t\t<style>\n\t\t\t#gallery-9 {\n\t\t\t\tmargin: auto;\n\t\t\t}\n\t\t\t#gallery-9 .gallery-item {\n\t\t\t\tfloat: left;\n\t\t\t\tmargin-top: 10px;\n\t\t\t\ttext-align: center;\n\t\t\t\twidth: 33%;\n\t\t\t}\n\t\t\t#gallery-9 img {\n\t\t\t\tborder: 2px solid #cfcfcf;\n\t\t\t}\n\t\t\t#gallery-9 .gallery-caption {\n\t\t\t\tmargin-left: 0;\n\t\t\t}\n\t\t\t\/* see gallery_shortcode() in wp-includes\/media.php *\/\n\t\t<\/style>\n\t\t<div data-carousel-extra='{&quot;blog_id&quot;:22,&quot;permalink&quot;:&quot;https:\/\/edwinli.com\/ux-2020-09-28-archive\/temp-portfolio\/process\/&quot;}' id='gallery-9' class='gallery galleryid-247 gallery-columns-3 gallery-size-thumbnail'><dl class='gallery-item'>\n\t\t\t<dt class='gallery-icon portrait'>\n\t\t\t\t<a href='https:\/\/edwinli.com\/ux-2020-09-28-archive\/01-drive-mode-now-playing-cafe-del-mar-v0-1-2-1\/'><img loading=\"lazy\" decoding=\"async\" width=\"150\" height=\"150\" src=\"https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2015\/02\/01-Drive-Mode-Now-Playing-Cafe-Del-Mar-v0-1-2-1.png?resize=150%2C150&amp;ssl=1\" class=\"attachment-thumbnail size-thumbnail\" alt=\"Mockup screen created in Photoshop\" aria-describedby=\"gallery-9-1075\" srcset=\"https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2015\/02\/01-Drive-Mode-Now-Playing-Cafe-Del-Mar-v0-1-2-1.png?resize=150%2C150&amp;ssl=1 150w, https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2015\/02\/01-Drive-Mode-Now-Playing-Cafe-Del-Mar-v0-1-2-1.png?zoom=2&amp;resize=150%2C150 300w, https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2015\/02\/01-Drive-Mode-Now-Playing-Cafe-Del-Mar-v0-1-2-1.png?zoom=3&amp;resize=150%2C150 450w\" sizes=\"auto, (max-width: 150px) 100vw, 150px\" data-attachment-id=\"1075\" data-permalink=\"https:\/\/edwinli.com\/ux-2020-09-28-archive\/01-drive-mode-now-playing-cafe-del-mar-v0-1-2-1\/\" data-orig-file=\"https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2015\/02\/01-Drive-Mode-Now-Playing-Cafe-Del-Mar-v0-1-2-1.png?fit=1080%2C1920&amp;ssl=1\" data-orig-size=\"1080,1920\" data-comments-opened=\"1\" data-image-title=\"01 Drive Mode &amp;#8211; Now Playing Cafe Del Mar v0-1-2-1\" data-image-description=\"&lt;p&gt;Part of my Pandora Driving Mode project, this is the screen after users have scrolled back in the song list. Users can still swipe up for a Thumbs Up, down for a Thumbs Down, left to move to the next song, right to move to the previous song, and pinch to zoom out to a station carousel. From version 0.1.2.1 of my prototype, I&amp;#8217;ve added a pane below the album cover area that is a shortcut to the currently playing song. Users can tap or swipe up from that area to go to it.&lt;\/p&gt;\n\" data-image-caption=\"&lt;p&gt;Viewing a previously played song in my Pandora Driving Mode design (0.1.2.1). Created in Photoshop, both from screenshots and with Photoshop&amp;#8217;s tools, this is a high-fidelity mockup.&lt;\/p&gt;\n\" data-large-file=\"https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2015\/02\/01-Drive-Mode-Now-Playing-Cafe-Del-Mar-v0-1-2-1.png?fit=576%2C1024&amp;ssl=1\" \/><\/a>\n\t\t\t<\/dt>\n\t\t\t\t<dd class='wp-caption-text gallery-caption' id='gallery-9-1075'>\n\t\t\t\tViewing a previously played song in my Pandora Driving Mode design (0.1.2.1). Created in Photoshop, both from screenshots and with Photoshop&#8217;s tools, this is a high-fidelity mockup.\n\t\t\t\t<\/dd><\/dl><dl class='gallery-item'>\n\t\t\t<dt class='gallery-icon portrait'>\n\t\t\t\t<a href='https:\/\/edwinli.com\/ux-2020-09-28-archive\/01-03-drive-mode-now-playing-subtle-playing-w-back-v0-1-2\/'><img loading=\"lazy\" decoding=\"async\" width=\"150\" height=\"150\" src=\"https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2015\/02\/01-03-Drive-Mode-Now-Playing-subtle-playing-w-Back-v0-1-2.png?resize=150%2C150&amp;ssl=1\" class=\"attachment-thumbnail size-thumbnail\" alt=\"\" aria-describedby=\"gallery-9-1076\" srcset=\"https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2015\/02\/01-03-Drive-Mode-Now-Playing-subtle-playing-w-Back-v0-1-2.png?resize=150%2C150&amp;ssl=1 150w, https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2015\/02\/01-03-Drive-Mode-Now-Playing-subtle-playing-w-Back-v0-1-2.png?zoom=2&amp;resize=150%2C150 300w, https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2015\/02\/01-03-Drive-Mode-Now-Playing-subtle-playing-w-Back-v0-1-2.png?zoom=3&amp;resize=150%2C150 450w\" sizes=\"auto, (max-width: 150px) 100vw, 150px\" data-attachment-id=\"1076\" data-permalink=\"https:\/\/edwinli.com\/ux-2020-09-28-archive\/01-03-drive-mode-now-playing-subtle-playing-w-back-v0-1-2\/\" data-orig-file=\"https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2015\/02\/01-03-Drive-Mode-Now-Playing-subtle-playing-w-Back-v0-1-2.png?fit=1080%2C1920&amp;ssl=1\" data-orig-size=\"1080,1920\" data-comments-opened=\"1\" data-image-title=\"01-03 Drive Mode &amp;#8211; Now Playing &amp;#8211; subtle playing w Back v0-1-2\" data-image-description=\"&lt;p&gt;Part of my Pandora Driving Mode project, this is the screen after users have scrolled back in the song list. Users can still swipe up for a Thumbs Up, down for a Thumbs Down, left to move to the next song, right to move to the previous song, and pinch to zoom out to a station carousel. From version 0.1.2 of my prototype.&lt;\/p&gt;\n\" data-image-caption=\"&lt;p&gt;The currently playing song in my Pandora Driving Mode design (v0.1.2). Created in Photoshop, both from screenshots and with Photoshop&amp;#8217;s tools, this is a high-fidelity mockup.&lt;\/p&gt;\n\" data-large-file=\"https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2015\/02\/01-03-Drive-Mode-Now-Playing-subtle-playing-w-Back-v0-1-2.png?fit=576%2C1024&amp;ssl=1\" \/><\/a>\n\t\t\t<\/dt>\n\t\t\t\t<dd class='wp-caption-text gallery-caption' id='gallery-9-1076'>\n\t\t\t\tThe currently playing song in my Pandora Driving Mode design (v0.1.2). Created in Photoshop, both from screenshots and with Photoshop&#8217;s tools, this is a high-fidelity mockup.\n\t\t\t\t<\/dd><\/dl><dl class='gallery-item'>\n\t\t\t<dt class='gallery-icon portrait'>\n\t\t\t\t<a href='https:\/\/edwinli.com\/ux-2020-09-28-archive\/temp-portfolio\/pandora-driving-mode\/00-02-right-panel-with-listening-modes-section\/'><img loading=\"lazy\" decoding=\"async\" width=\"150\" height=\"150\" src=\"https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2014\/10\/00-02-Right-panel-with-Listening-Modes-section.png?resize=150%2C150&amp;ssl=1\" class=\"attachment-thumbnail size-thumbnail\" alt=\"\" aria-describedby=\"gallery-9-987\" srcset=\"https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2014\/10\/00-02-Right-panel-with-Listening-Modes-section.png?resize=150%2C150&amp;ssl=1 150w, https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2014\/10\/00-02-Right-panel-with-Listening-Modes-section.png?zoom=2&amp;resize=150%2C150 300w, https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2014\/10\/00-02-Right-panel-with-Listening-Modes-section.png?zoom=3&amp;resize=150%2C150 450w\" sizes=\"auto, (max-width: 150px) 100vw, 150px\" data-attachment-id=\"987\" data-permalink=\"https:\/\/edwinli.com\/ux-2020-09-28-archive\/temp-portfolio\/pandora-driving-mode\/00-02-right-panel-with-listening-modes-section\/\" data-orig-file=\"https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2014\/10\/00-02-Right-panel-with-Listening-Modes-section.png?fit=1080%2C1920&amp;ssl=1\" data-orig-size=\"1080,1920\" data-comments-opened=\"1\" data-image-title=\"00-02 Right panel with Listening Modes section\" data-image-description=\"\" data-image-caption=\"&lt;p&gt;The sliding sidebar menu available from the Classic Mode Now Playing screen in my Pandora Driving Mode design (v0.1). Created in Photoshop, both from screenshots and with Photoshop&amp;#8217;s tools, this is a high-fidelity mockup.&lt;\/p&gt;\n\" data-large-file=\"https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2014\/10\/00-02-Right-panel-with-Listening-Modes-section.png?fit=576%2C1024&amp;ssl=1\" \/><\/a>\n\t\t\t<\/dt>\n\t\t\t\t<dd class='wp-caption-text gallery-caption' id='gallery-9-987'>\n\t\t\t\tThe sliding sidebar menu available from the Classic Mode Now Playing screen in my Pandora Driving Mode design (v0.1). Created in Photoshop, both from screenshots and with Photoshop&#8217;s tools, this is a high-fidelity mockup.\n\t\t\t\t<\/dd><\/dl><br style=\"clear: both\" \/><dl class='gallery-item'>\n\t\t\t<dt class='gallery-icon portrait'>\n\t\t\t\t<a href='https:\/\/edwinli.com\/ux-2020-09-28-archive\/temp-portfolio\/ost-home-page-w-zoombox-simple\/'><img loading=\"lazy\" decoding=\"async\" width=\"150\" height=\"150\" src=\"https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2013\/06\/OST-home-page-w-zoombox-simple.png?resize=150%2C150&amp;ssl=1\" class=\"attachment-thumbnail size-thumbnail\" alt=\"A screenshot prototype composed from rendered HTML\/CSS pages and components.\" aria-describedby=\"gallery-9-335\" srcset=\"https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2013\/06\/OST-home-page-w-zoombox-simple.png?resize=150%2C150&amp;ssl=1 150w, https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2013\/06\/OST-home-page-w-zoombox-simple.png?zoom=2&amp;resize=150%2C150 300w, https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2013\/06\/OST-home-page-w-zoombox-simple.png?zoom=3&amp;resize=150%2C150 450w\" sizes=\"auto, (max-width: 150px) 100vw, 150px\" data-attachment-id=\"335\" data-permalink=\"https:\/\/edwinli.com\/ux-2020-09-28-archive\/temp-portfolio\/ost-home-page-w-zoombox-simple\/\" data-orig-file=\"https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2013\/06\/OST-home-page-w-zoombox-simple.png?fit=1034%2C1496&amp;ssl=1\" 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:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2013\/06\/OST-home-page-w-zoombox-simple.png?fit=708%2C1024&amp;ssl=1\" \/><\/a>\n\t\t\t<\/dt>\n\t\t\t\t<dd class='wp-caption-text gallery-caption' id='gallery-9-335'>\n\t\t\t\tA 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.\n\t\t\t\t<\/dd><\/dl><dl class='gallery-item'>\n\t\t\t<dt class='gallery-icon portrait'>\n\t\t\t\t<a href='https:\/\/edwinli.com\/ux-2020-09-28-archive\/ost-home-page-advanced-search\/'><img loading=\"lazy\" decoding=\"async\" width=\"150\" height=\"150\" src=\"https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2013\/06\/OST-home-page-advanced-search.png?resize=150%2C150&amp;ssl=1\" class=\"attachment-thumbnail size-thumbnail\" alt=\"A prototype\/mockup\/&quot;screenshot&quot; that I was designing.\" aria-describedby=\"gallery-9-332\" srcset=\"https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2013\/06\/OST-home-page-advanced-search.png?resize=150%2C150&amp;ssl=1 150w, https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2013\/06\/OST-home-page-advanced-search.png?zoom=2&amp;resize=150%2C150 300w, https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2013\/06\/OST-home-page-advanced-search.png?zoom=3&amp;resize=150%2C150 450w\" sizes=\"auto, (max-width: 150px) 100vw, 150px\" data-attachment-id=\"332\" data-permalink=\"https:\/\/edwinli.com\/ux-2020-09-28-archive\/ost-home-page-advanced-search\/\" data-orig-file=\"https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2013\/06\/OST-home-page-advanced-search.png?fit=1034%2C1502&amp;ssl=1\" data-orig-size=\"1034,1502\" data-comments-opened=\"0\" data-image-title=\"Prototype, Hybrid HTML\/CSS\/Photoshop, Web app, advanced search\" data-image-description=\"&lt;p&gt;Creating the header, most of the contents, the table, and even the search form components using HTML\/CSS was pretty straightforward, but getting all those search form components into columns and lined up correctly with their gutters, etc. was a challenge, with some strange interactions between the floating DIVs that we were using in our design pattern library.&lt;\/p&gt;\n&lt;p&gt;So, rather than wrestle with them any longer, I went to Photoshop to compose the search form components into the columns and alignments that I wanted, then just edited them into an image to be included into the HTML for the rest of the page.&lt;\/p&gt;\n&lt;p&gt;I have tried to remove or replace information in the actual prototype that might serve to identify too readily the company and product for which this work was done.&lt;\/p&gt;\n\" data-image-caption=\"&lt;p&gt;A hybrid HTML\/CSS and Photoshop prototype. I created most of this page in HTML\/CSS, but, some alignment aspects of this screen were taking too long to troubleshoot in HTML\/CSS. So I took screenshots of them and used Photoshop to create the alignment that I wanted.&lt;\/p&gt;\n\" data-large-file=\"https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2013\/06\/OST-home-page-advanced-search.png?fit=705%2C1024&amp;ssl=1\" \/><\/a>\n\t\t\t<\/dt>\n\t\t\t\t<dd class='wp-caption-text gallery-caption' id='gallery-9-332'>\n\t\t\t\tA hybrid HTML\/CSS and Photoshop prototype. I created most of this page in HTML\/CSS, but, some alignment aspects of this screen were taking too long to troubleshoot in HTML\/CSS. So I took screenshots of them and used Photoshop to create the alignment that I wanted.\n\t\t\t\t<\/dd><\/dl>\n\t\t\t<br style='clear: both' \/>\n\t\t<\/div>\n<\/li>\n<li>Sample artifacts: Interactive prototypes, using various tools including POP (Paper on Paper), Proto.io, Invision, and Pixate. Whether using raw materials such as pictures of sketches, screens, or assets created in Photoshop or other graphic programs or their own drawing and animation tools, these prototyping tools enable designers to create truly interactive prototypes, allowing the linking up of screens, the defining of hotspots, the use of interactive UI widgets, animations, and transitions, and sensitivity to gestural input, taking your prototypes that much closer to a native, real app experience on your mobile device.\n<ul>\n<li><a href=\"https:\/\/spaces.proto.io\/project\/7C35BFF3-FCD0-BE98-A1B6-177C2C710E9E\/Pandora-Driving-Mode\/\">Pandora Driving Mode project<\/a>: An interactive prototype created with Proto.io.<\/li>\n<li>Two interactive prototypes for my RedBeacon Design Challenge project created using POP (Prototyping on Paper), a browser-based tool and mobile app allowing designers to take pictures of sketches, for instance, then link those pictures up via hotspots and gesture sensitivity to create a unique paper-prototyping\/mobile-device-usage experience. For the storyboard context for these prototypes, see <a title=\"RedBeacon Design Challenge\" href=\"http:\/\/edwinli.com\/ux-2020-09-28-archive\/portfolio\/redbeacon-design-challenge\/#sectionStoryboard\">RedBeacon Design Challenge: Storyboarding the New Design<\/a>\n<ul>\n<li><a title=\"PopApp interactive prototype (in browser)\" href=\"https:\/\/popapp.in\/w\/projects\/53bcee68d89a522132067114\/preview\/53bcf235c2ecede10acf5edc\">Start a project by typing a name and entering data<\/a><\/li>\n<li><a title=\"PopApp interactive prototype (in browser)\" href=\"https:\/\/popapp.in\/w\/projects\/53bcf3e5d89a52213206718e\/preview\/53bcf4d7e90017ca22b663aa\">Start a project by taking a picture<\/a><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<li>Sample artifacts: Video demos of prototypes. Sometimes, a storyboard or an interactive demo is best showcased via a video.\n<ul>\n<li>From my Pandora Driving Mode project, here are two demo videos of my Proto.io interactive prototype, recorded on my Android phone using AZ Recorder\u2014one demo without commentary, and the other essentially a presentation of the prototype along with rationale for its design:\n<div class=\"wp-caption\" style=\"width: 430px;\">\n<span class=\"embed-youtube\" style=\"text-align:center; display: block;\"><iframe loading=\"lazy\" class=\"youtube-player\" title=\"YouTube video player\" width=\"420\" height=\"237\" src=\"https:\/\/www.youtube.com\/embed\/99R-kpeko-I?version=3&#038;rel=0&#038;showsearch=0&#038;showinfo=1&#038;iv_load_policy=1&#038;fs=1&#038;hl=en-US&#038;autohide=2&#038;wmode=transparent\" allowfullscreen=\"true\" style=\"border:0;\" sandbox=\"allow-scripts allow-same-origin allow-popups allow-presentation allow-popups-to-escape-sandbox\"><\/iframe><\/span>\n<p class=\"wp-caption-text iframe-caption-customcss\">Driving mode prototype in action, no commentary (45 seconds). Tools used: Photoshop, Proto.io, AZ Screen Recorder.<\/p>\n<\/div>\n<div class=\"wp-caption\" style=\"width: 430px;\">\n<span class=\"embed-youtube\" style=\"text-align:center; display: block;\"><iframe loading=\"lazy\" class=\"youtube-player\" title=\"YouTube video player\" width=\"420\" height=\"237\" src=\"https:\/\/www.youtube.com\/embed\/LyH6Gl580OY?version=3&#038;rel=0&#038;showsearch=0&#038;showinfo=1&#038;iv_load_policy=1&#038;fs=1&#038;hl=en-US&#038;autohide=2&#038;wmode=transparent\" allowfullscreen=\"true\" style=\"border:0;\" sandbox=\"allow-scripts allow-same-origin allow-popups allow-presentation allow-popups-to-escape-sandbox\"><\/iframe><\/span>\n<p class=\"wp-caption-text iframe-caption-customcss\">Presentation of Driving Mode prototype (7 minutes 25 seconds). Tools used: Photoshop, Proto.io, AZ Screen Recorder.<\/p>\n<\/div>\n<\/li>\n<\/ul>\n<\/li>\n<li class=\"hidden\">Sample artifacts: Design patterns. The best way to maintain consistency of designs within a product line or company, is often to re-use solutions across that product line or company. Whether that is literally a common component like a &#8220;Save As&#8230;&#8221; dialog throughout Microsoft&#8217;s Office products or simply a separate copy of the same solution, these are called design patterns. Building and maintaining a library of these helps support that consistency, whether you are a team of one or of many, distributed around the world.<\/li>\n<li>Sample artifacts: UI specifications\n\t\t<style>\n\t\t\t#gallery-10 {\n\t\t\t\tmargin: auto;\n\t\t\t}\n\t\t\t#gallery-10 .gallery-item {\n\t\t\t\tfloat: left;\n\t\t\t\tmargin-top: 10px;\n\t\t\t\ttext-align: center;\n\t\t\t\twidth: 33%;\n\t\t\t}\n\t\t\t#gallery-10 img {\n\t\t\t\tborder: 2px solid #cfcfcf;\n\t\t\t}\n\t\t\t#gallery-10 .gallery-caption {\n\t\t\t\tmargin-left: 0;\n\t\t\t}\n\t\t\t\/* see gallery_shortcode() in wp-includes\/media.php *\/\n\t\t<\/style>\n\t\t<div data-carousel-extra='{&quot;blog_id&quot;:22,&quot;permalink&quot;:&quot;https:\/\/edwinli.com\/ux-2020-09-28-archive\/temp-portfolio\/process\/&quot;}' id='gallery-10' class='gallery galleryid-247 gallery-columns-3 gallery-size-thumbnail'><dl class='gallery-item'>\n\t\t\t<dt class='gallery-icon portrait'>\n\t\t\t\t<a href='https:\/\/edwinli.com\/ux-2020-09-28-archive\/sample-mockup-index-cp-cleansed\/'><img loading=\"lazy\" decoding=\"async\" width=\"150\" height=\"150\" src=\"https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2013\/06\/Sample-Mockup-Index-cp-cleansed.png?resize=150%2C150&amp;ssl=1\" class=\"attachment-thumbnail size-thumbnail\" alt=\"A screenshot of a web page used as a UI specifications document.\" aria-describedby=\"gallery-10-337\" srcset=\"https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2013\/06\/Sample-Mockup-Index-cp-cleansed.png?resize=150%2C150&amp;ssl=1 150w, https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2013\/06\/Sample-Mockup-Index-cp-cleansed.png?zoom=2&amp;resize=150%2C150 300w, https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2013\/06\/Sample-Mockup-Index-cp-cleansed.png?zoom=3&amp;resize=150%2C150 450w\" sizes=\"auto, (max-width: 150px) 100vw, 150px\" data-attachment-id=\"337\" data-permalink=\"https:\/\/edwinli.com\/ux-2020-09-28-archive\/sample-mockup-index-cp-cleansed\/\" data-orig-file=\"https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2013\/06\/Sample-Mockup-Index-cp-cleansed.png?fit=991%2C2871&amp;ssl=1\" data-orig-size=\"991,2871\" data-comments-opened=\"0\" data-image-title=\"UI Specifications Using a Website\" data-image-description=\"&lt;p&gt;As this team&amp;#8217;s first and primary interaction designer by training, the team did not have any standards in place for UI specifications documentation and deliverables for developer guidance. I created this specifications format to serve the need for keeping track of my work and providing guidance to which an off-shore development team could refer.&lt;\/p&gt;\n&lt;p&gt;This is a table listing each page of a web application, with a link to each page and any related components or any variations of those pages (depending on rights and permissions of users). Also included for each page are notes about how any components and data manipulation should behave and work whose behavior I could not code myself (i.e., JavaScript dependent).&lt;\/p&gt;\n&lt;p&gt;The upshot is that my HTML\/CSS or Photoshop prototypes and components were essentially key frames in the interaction behavior in my designs, with the annotations being the filler in showing how I wanted the application to go from one key frame to the next.&lt;\/p&gt;\n&lt;p&gt;This was a very long page, and what&amp;#8217;s included here in this screenshot cuts out a lot of it for brevity.&lt;\/p&gt;\n\" data-image-caption=\"&lt;p&gt;A UI specifications document done as a web page, listing and linking to all the prototyped pages, and including notes on behavioral elements on each pages.&lt;\/p&gt;\n\" data-large-file=\"https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2013\/06\/Sample-Mockup-Index-cp-cleansed.png?fit=353%2C1024&amp;ssl=1\" \/><\/a>\n\t\t\t<\/dt>\n\t\t\t\t<dd class='wp-caption-text gallery-caption' id='gallery-10-337'>\n\t\t\t\tA UI specifications document done as a web page, listing and linking to all the prototyped pages, and including notes on behavioral elements on each pages.\n\t\t\t\t<\/dd><\/dl><dl class='gallery-item'>\n\t\t\t<dt class='gallery-icon portrait'>\n\t\t\t\t<a href='https:\/\/edwinli.com\/ux-2020-09-28-archive\/pages-from-specifications-welcome-page-cleansed\/'><img loading=\"lazy\" decoding=\"async\" width=\"150\" height=\"150\" src=\"https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2013\/06\/Pages-from-Specifications-Welcome-page-cleansed-e1371068876678.png?resize=150%2C150&amp;ssl=1\" class=\"attachment-thumbnail size-thumbnail\" alt=\"A page including a prototype welcome page and many of its UI notes\" aria-describedby=\"gallery-10-338\" data-attachment-id=\"338\" data-permalink=\"https:\/\/edwinli.com\/ux-2020-09-28-archive\/pages-from-specifications-welcome-page-cleansed\/\" data-orig-file=\"https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2013\/06\/Pages-from-Specifications-Welcome-page-cleansed-e1371068876678.png?fit=1024%2C1325&amp;ssl=1\" data-orig-size=\"1024,1325\" data-comments-opened=\"0\" data-image-title=\"UI Specifications Using Axure, Welcome Page\" data-image-description=\"&lt;p&gt;Axure RP Pro 6 (&lt;a href=&quot;http:\/\/www.axure.com\/&quot;&gt;http:\/\/www.axure.com&lt;\/a&gt;) is a prototyping application that includes the ability to annotate every little bit of the UI and the ability to generate a UI specifications document from your prototype and annotations. This is one page from a document produced that way, from a web application prototype on which I was working.&lt;\/p&gt;\n&lt;p&gt;I&amp;#8217;ve tried to edit out identifying information about the intended product and the company for which I did the work.&lt;\/p&gt;\n&lt;p&gt;This document is one stage along the design process. Images from other stages are:&lt;\/p&gt;\n&lt;ul&gt;\n&lt;li&gt;&lt;a href=&quot;http:\/\/edwinli.com\/ux-2020-09-28-archive-dev01\/?attachment_id=353 &quot;&gt;the content model&lt;\/a&gt;&lt;\/li&gt;\n&lt;li&gt;&lt;a href=&quot;http:\/\/edwinli.com\/ux-2020-09-28-archive-dev01\/?attachment_id=351&quot;&gt;the v0 whiteboard sketch&lt;\/a&gt;&lt;\/li&gt;\n&lt;li&gt;&lt;a href=&quot;http:\/\/edwinli.com\/ux-2020-09-28-archive-dev01\/?attachment_id=352&quot; title=&quot;Sketch v0.1 for the application page specified here&quot;&gt;the v0.1 whiteboard sketch&lt;\/a&gt;.&lt;\/li&gt;\n&lt;\/ul&gt;\n\" data-image-caption=\"&lt;p&gt;Sample UI specifications document. Produced from a prototype done in Axure RP Pro 6.&lt;\/p&gt;\n\" data-large-file=\"https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2013\/06\/Pages-from-Specifications-Welcome-page-cleansed-e1371068876678.png?fit=791%2C1024&amp;ssl=1\" \/><\/a>\n\t\t\t<\/dt>\n\t\t\t\t<dd class='wp-caption-text gallery-caption' id='gallery-10-338'>\n\t\t\t\tSample UI specifications document. Produced from a prototype done in Axure RP Pro 6.\n\t\t\t\t<\/dd><\/dl>\n\t\t\t<br style='clear: both' \/>\n\t\t<\/div>\n<\/li>\n<\/ol>\n<\/li>\n<li><span class=\"inlineFieldLabel\">Develop.<\/span> This will interact with the Design processes as constraints and interactions between elements are identified. The way I&#8217;ve seen this work best is with heavy interaction available between development engineers and the UX team, with each being able to ask and answer questions and adjust the design as it develops.<\/li>\n<li><strong>Usability\/User  Experience testing.<\/strong> What is it like to use the product at its various stages of being designed and developed? It should be tested and evaluated all along the way, with lessons learned from testing adding to the mix of idea generation, idea exploration, \u201cgoing deep\u201d, etc. To label this as a seventh &#8220;stage&#8221; is a bit misleading, as testing should ideally be done whenever user behavior questions arise from stages 5 and 6 and as ideas and prototypes coalesce to gather feedback and information about how each design idea or prototype works for users.<\/li>\n<li><span class=\"inlineFieldLabel\">Wrap up version and release\u2026<\/span><\/li>\n<li><span class=\"inlineFieldLabel\">Repeat the processes looking towards future  versions.<\/span><\/li>\n<\/ol>\n<h2>Working with Edwin<\/h2>\n<p>While it is true that the creative processes that are part of any design effort require a certain degree of solitude and self-reflection, it is undeniably true for me personally that collaboration and feedback, especially with other designers and UX professionals, help me achieve better solutions sooner.<\/p>\n<p>Thus, I prefer environments and cultures that include a number of UX professionals, provide space and room to create your own solutions, and foster a spirit of collaboration.<\/p>\n<p>Excerpts from recommendations on <a href=\"http:\/\/www.linkedin.com\/in\/edwinli\">my LinkedIn profile<\/a> attest especially to my team focus:<\/p>\n<blockquote><p>Edwin brings a fun attitude to a team and works hard at creating a great working environment. &#8211; Paul Gilliham<\/p><\/blockquote>\n<blockquote><p>He worked with the project team collaboratively, remained open to our suggestions, and retained his flexibility under pressure. &#8211; Deanna Wells<\/p><\/blockquote>\n<blockquote><p>His deep knowledge and empathetic approach wins him fans whenever he works with a new team. &#8211; Bill Skeet<\/p><\/blockquote>\n<h3 class=\"hidden\">Dealing With Conflicts<\/h3>\n<nav>\n<h2>More About Edwin<\/h2>\n<ul class=\"navInternal\">\n<li><a href=\"\/ux\/about\/\" title=\"About Edwin\">About Edwin<\/a><\/li>\n<li><a href=\"\/ux\/resume\/\" title=\"Resume\">Resume<\/a><\/li>\n<li><a href=\"\/ux\/temp-portfolio\/\" title=\"Portfolio\">Portfolio<\/a>\n<ul>\n<li><span class=\"here\">Design Processes, Work artifacts, and Work Style<\/span><\/li>\n<li><a href=\"\/ux\/temp-portfolio\/redbeacon-design-challenge\/\" title=\"Redbeacon Design Challenge\">Redbeacon Design Challenge<\/a>\n<ul>\n<li><a href=\"\/ux\/temp-portfolio\/redbeacon-design-challenge\/essential-use-cases-redbeacon\/\" title=\"Essential Use Cases [Redbeacon]\">Essential Use Cases [Redbeacon]<\/a><\/li>\n<\/ul>\n<\/li>\n<li><a href=\"\/ux\/temp-portfolio\/pandora-driving-mode\/\" title=\"Pandora Driving Mode\">Pandora Driving Mode<\/a><\/li>\n<\/ul>\n<\/li>\n<li><a href=\"\/ux\/quest\/\" title=\"Job Quest\">Job Quest<\/a>\n<ul>\n<li><a href=\"\/ux\/quest\/ideal\/\" title=\"Ideal Job Description\">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\" title=\"LinkedIn profile\">LinkedIn profile<\/a><\/li>\n<\/ul>\n<\/nav>\n","protected":false},"excerpt":{"rendered":"<p>Design Processes, Artifacts, and Work Style Design Processes, Artifacts, and Work Style What Am I Like As A Designer? How do I work, and what am I like to work with? There are many ways to answer that, and here are a few, more focused questions that should shed light\u2026<\/p>\n<p> <a class=\"continue-reading-link\" href=\"https:\/\/edwinli.com\/ux-2020-09-28-archive\/temp-portfolio\/process\/\"><span>Continue reading<\/span><i class=\"crycon-right-dir\"><\/i><\/a> <\/p>\n","protected":false},"author":1,"featured_media":1100,"parent":231,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"templates\/template-onecolumn.php","meta":{"footnotes":""},"class_list":["post-247","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>Design Processes, Artifacts, and Work Style - Edwin Li, UX Designer - Archived<\/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-2020-09-28-archive\/temp-portfolio\/process\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Design Processes, Artifacts, and Work Style - Edwin Li, UX Designer - Archived\" \/>\n<meta property=\"og:description\" content=\"Design Processes, Artifacts, and Work Style Design Processes, Artifacts, and Work Style What Am I Like As A Designer? How do I work, and what am I like to work with? There are many ways to answer that, and here are a few, more focused questions that should shed light\u2026 Continue reading\" \/>\n<meta property=\"og:url\" content=\"https:\/\/edwinli.com\/ux-2020-09-28-archive\/temp-portfolio\/process\/\" \/>\n<meta property=\"og:site_name\" content=\"Edwin Li, UX Designer - Archived\" \/>\n<meta property=\"article:modified_time\" content=\"2016-01-15T00:35:05+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2015\/03\/portfolio-header-image-02.jpg?fit=960%2C290&ssl=1\" \/>\n\t<meta property=\"og:image:width\" content=\"960\" \/>\n\t<meta property=\"og:image:height\" content=\"290\" \/>\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=\"12 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/edwinli.com\\\/ux-2020-09-28-archive\\\/temp-portfolio\\\/process\\\/\",\"url\":\"https:\\\/\\\/edwinli.com\\\/ux-2020-09-28-archive\\\/temp-portfolio\\\/process\\\/\",\"name\":\"Design Processes, Artifacts, and Work Style - Edwin Li, UX Designer - Archived\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/edwinli.com\\\/ux-2020-09-28-archive\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/edwinli.com\\\/ux-2020-09-28-archive\\\/temp-portfolio\\\/process\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/edwinli.com\\\/ux-2020-09-28-archive\\\/temp-portfolio\\\/process\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/i0.wp.com\\\/edwinli.com\\\/ux-2020-09-28-archive\\\/wp-content\\\/uploads\\\/sites\\\/22\\\/2015\\\/03\\\/portfolio-header-image-02.jpg?fit=960%2C290&ssl=1\",\"datePublished\":\"2013-05-25T23:20:23+00:00\",\"dateModified\":\"2016-01-15T00:35:05+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/edwinli.com\\\/ux-2020-09-28-archive\\\/temp-portfolio\\\/process\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/edwinli.com\\\/ux-2020-09-28-archive\\\/temp-portfolio\\\/process\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/edwinli.com\\\/ux-2020-09-28-archive\\\/temp-portfolio\\\/process\\\/#primaryimage\",\"url\":\"https:\\\/\\\/i0.wp.com\\\/edwinli.com\\\/ux-2020-09-28-archive\\\/wp-content\\\/uploads\\\/sites\\\/22\\\/2015\\\/03\\\/portfolio-header-image-02.jpg?fit=960%2C290&ssl=1\",\"contentUrl\":\"https:\\\/\\\/i0.wp.com\\\/edwinli.com\\\/ux-2020-09-28-archive\\\/wp-content\\\/uploads\\\/sites\\\/22\\\/2015\\\/03\\\/portfolio-header-image-02.jpg?fit=960%2C290&ssl=1\",\"width\":960,\"height\":290,\"caption\":\"A collage of my work artifacts: 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-2020-09-28-archive\\\/temp-portfolio\\\/process\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/edwinli.com\\\/ux-2020-09-28-archive\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Portfolio\",\"item\":\"https:\\\/\\\/edwinli.com\\\/ux-2020-09-28-archive\\\/temp-portfolio\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Design Processes, Artifacts, and Work Style\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/edwinli.com\\\/ux-2020-09-28-archive\\\/#website\",\"url\":\"https:\\\/\\\/edwinli.com\\\/ux-2020-09-28-archive\\\/\",\"name\":\"Edwin Li, UX Designer - Archived\",\"description\":\"Seeing the world through UX-colored glasses\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/edwinli.com\\\/ux-2020-09-28-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":"Design Processes, Artifacts, and Work Style - Edwin Li, UX Designer - Archived","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-2020-09-28-archive\/temp-portfolio\/process\/","og_locale":"en_US","og_type":"article","og_title":"Design Processes, Artifacts, and Work Style - Edwin Li, UX Designer - Archived","og_description":"Design Processes, Artifacts, and Work Style Design Processes, Artifacts, and Work Style What Am I Like As A Designer? How do I work, and what am I like to work with? There are many ways to answer that, and here are a few, more focused questions that should shed light\u2026 Continue reading","og_url":"https:\/\/edwinli.com\/ux-2020-09-28-archive\/temp-portfolio\/process\/","og_site_name":"Edwin Li, UX Designer - Archived","article_modified_time":"2016-01-15T00:35:05+00:00","og_image":[{"width":960,"height":290,"url":"https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2015\/03\/portfolio-header-image-02.jpg?fit=960%2C290&ssl=1","type":"image\/jpeg"}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"12 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/edwinli.com\/ux-2020-09-28-archive\/temp-portfolio\/process\/","url":"https:\/\/edwinli.com\/ux-2020-09-28-archive\/temp-portfolio\/process\/","name":"Design Processes, Artifacts, and Work Style - Edwin Li, UX Designer - Archived","isPartOf":{"@id":"https:\/\/edwinli.com\/ux-2020-09-28-archive\/#website"},"primaryImageOfPage":{"@id":"https:\/\/edwinli.com\/ux-2020-09-28-archive\/temp-portfolio\/process\/#primaryimage"},"image":{"@id":"https:\/\/edwinli.com\/ux-2020-09-28-archive\/temp-portfolio\/process\/#primaryimage"},"thumbnailUrl":"https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2015\/03\/portfolio-header-image-02.jpg?fit=960%2C290&ssl=1","datePublished":"2013-05-25T23:20:23+00:00","dateModified":"2016-01-15T00:35:05+00:00","breadcrumb":{"@id":"https:\/\/edwinli.com\/ux-2020-09-28-archive\/temp-portfolio\/process\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/edwinli.com\/ux-2020-09-28-archive\/temp-portfolio\/process\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/edwinli.com\/ux-2020-09-28-archive\/temp-portfolio\/process\/#primaryimage","url":"https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2015\/03\/portfolio-header-image-02.jpg?fit=960%2C290&ssl=1","contentUrl":"https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2015\/03\/portfolio-header-image-02.jpg?fit=960%2C290&ssl=1","width":960,"height":290,"caption":"A collage of my work artifacts: 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-2020-09-28-archive\/temp-portfolio\/process\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/edwinli.com\/ux-2020-09-28-archive\/"},{"@type":"ListItem","position":2,"name":"Portfolio","item":"https:\/\/edwinli.com\/ux-2020-09-28-archive\/temp-portfolio\/"},{"@type":"ListItem","position":3,"name":"Design Processes, Artifacts, and Work Style"}]},{"@type":"WebSite","@id":"https:\/\/edwinli.com\/ux-2020-09-28-archive\/#website","url":"https:\/\/edwinli.com\/ux-2020-09-28-archive\/","name":"Edwin Li, UX Designer - Archived","description":"Seeing the world through UX-colored glasses","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/edwinli.com\/ux-2020-09-28-archive\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"}]}},"jetpack_shortlink":"https:\/\/wp.me\/PcpW5x-3Z","jetpack_sharing_enabled":true,"jetpack_likes_enabled":true,"jetpack-related-posts":[],"_links":{"self":[{"href":"https:\/\/edwinli.com\/ux-2020-09-28-archive\/wp-json\/wp\/v2\/pages\/247","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/edwinli.com\/ux-2020-09-28-archive\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/edwinli.com\/ux-2020-09-28-archive\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/edwinli.com\/ux-2020-09-28-archive\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/edwinli.com\/ux-2020-09-28-archive\/wp-json\/wp\/v2\/comments?post=247"}],"version-history":[{"count":137,"href":"https:\/\/edwinli.com\/ux-2020-09-28-archive\/wp-json\/wp\/v2\/pages\/247\/revisions"}],"predecessor-version":[{"id":1232,"href":"https:\/\/edwinli.com\/ux-2020-09-28-archive\/wp-json\/wp\/v2\/pages\/247\/revisions\/1232"}],"up":[{"embeddable":true,"href":"https:\/\/edwinli.com\/ux-2020-09-28-archive\/wp-json\/wp\/v2\/pages\/231"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/edwinli.com\/ux-2020-09-28-archive\/wp-json\/wp\/v2\/media\/1100"}],"wp:attachment":[{"href":"https:\/\/edwinli.com\/ux-2020-09-28-archive\/wp-json\/wp\/v2\/media?parent=247"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}