{"id":999,"date":"2020-05-10T21:44:44","date_gmt":"2020-05-10T21:44:44","guid":{"rendered":"http:\/\/amitavasen.com\/portfolio\/?p=999"},"modified":"2020-09-16T19:26:06","modified_gmt":"2020-09-16T19:26:06","slug":"case-study-liveweave-com-online-coding-tool","status":"publish","type":"post","link":"https:\/\/amitavasen.com\/portfolio\/2020\/05\/10\/case-study-liveweave-com-online-coding-tool\/","title":{"rendered":"Case Study: Liveweave.com &#8211; A cloud-based code editor &#038; design tool"},"content":{"rendered":"\r\n<h3>Product: <a href=\"https:\/\/liveweave.com\/\">Liveweave.com<\/a><\/h3>\r\n<hr \/>\r\n<h3>Understand<\/h3>\r\n<p><\/p>\r\n<p><\/p>\r\n<h4>Goal<\/h4>\r\n<p>Build an easy to use online coding tool to learn, practice, share and test HTML, CSS, and JavaScript code. This tool is similar to Google Docs editor, but instead with a focus on coding\/programming.<\/p>\r\n<p><\/p>\r\n<p><\/p>\r\n<p><em>Audience\/Target users:<\/em><\/p>\r\n<p><\/p>\r\n<p><\/p>\r\n<ul class=\"wp-block-list\">\r\n<li>School Teachers<\/li>\r\n<li>Students (School and University)<\/li>\r\n<li>Web design and development professionals<\/li>\r\n<\/ul>\r\n<p><\/p>\r\n<p><\/p>\r\n<h4>Problems<\/h4>\r\n<p><\/p>\r\n<p><\/p>\r\n<ul class=\"wp-block-list\">\r\n<li>Most web apps require \u201clogin\u201d to even try to write a code<\/li>\r\n<li>A complicated sign-up\/registration\/validation process may be required<\/li>\r\n<li>To test HTML, CSS and JavaScript code locally, you have to click \u201crefresh\u201d in the\u00a0browser every time<\/li>\r\n<li>Will have to email the HTML, CSS or JavaScript code in order to download and continue\u00a0to use it later\u00a0<\/li>\r\n<li>To share the test code with peers, the only way to do it is to \u201ccheck-in\u201d the test code or\u00a0email it, which is very cumbersome. It is also not a secure way.<\/li>\r\n<li>While there may be some online coding tools to write and test HTML, CSS, and JavaScript code, most don\u2019t \u201cfeel\u201d like a proper IDE (Integrated Development Environment) as they don\u2019t have common features like \u201ccode-hinting\u201d, etc.<\/li>\r\n<li>The only way to test \u201cresponsive\u201d design in a local environment is to use the built-in browser features like \u201cDeveloper Tools\u201d which is quite \u201cintimidating\u201d for beginners.\u00a0<\/li>\r\n<li>Users would like to have the choice to keep their work either private or public.\u00a0\u00a0<\/li>\r\n<li>A collaboration feature is almost non-existent in similar freemium online coding tools, where the teachers can share\/help students with their work, in real-time. This feature is also not possible while teaching coding in local computer\/systems.<\/li>\r\n<li>Users have to switch between the HTML, CSS, and JavaScript files every time, instead of able to see all 3 codes at the same time.<\/li>\r\n<\/ul>\r\n<h4>Design\/Process Strategy<\/h4>\r\n<p><a href=\"http:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2020\/08\/Design-Process-1.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1024\" src=\"http:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2020\/08\/Design-Process-1.png\" alt=\"\" width=\"1239\" height=\"520\" srcset=\"https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2020\/08\/Design-Process-1.png 1239w, https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2020\/08\/Design-Process-1-300x126.png 300w, https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2020\/08\/Design-Process-1-1024x430.png 1024w, https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2020\/08\/Design-Process-1-768x322.png 768w, https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2020\/08\/Design-Process-1-370x155.png 370w, https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2020\/08\/Design-Process-1-1040x436.png 1040w\" sizes=\"auto, (max-width: 1239px) 100vw, 1239px\" \/><\/a><\/p>\r\n<p>&nbsp;<\/p>\r\n<p><\/p>\r\n<hr \/>\r\n<h3>Research<\/h3>\r\n<p><\/p>\r\n<p><\/p>\r\n<p><em>1:1 Interviews directly with users:<\/em><\/p>\r\n<p><\/p>\r\n<p><\/p>\r\n<ul>\r\n<li>I interviewed several teachers, and a few students and web designers to understand what are their goals over a period of 4-5 weeks.<\/li>\r\n<li>The interview duration ranged from 30 mins to 45 mins.<\/li>\r\n<\/ul>\r\n<p><\/p>\r\n<p><\/p>\r\n<p><em>Focus groups: <\/em><\/p>\r\n<ul>\r\n<li>I conducted focus groups with teachers and a few students to understand their \u201cfeelings\u201d and \u201cexpectations\u201d for building an online coding tool.<\/li>\r\n<li>These sessions typically were 1.5 to 2 hours long.<\/li>\r\n<li>Audience size for a session: 4 to 6 users (from the same school district\/college)<\/li>\r\n<\/ul>\r\n<p><\/p>\r\n<p><\/p>\r\n<p><\/p>\r\n<p><\/p>\r\n<p><em>Surveys:<\/em><\/p>\r\n<p><\/p>\r\n<p><\/p>\r\n<ul>\r\n<li>I sent out a few surveys to several web designers from different online communities (Linkedin, Github, StackOverflow, Behance, University professors).<\/li>\r\n<li>Quite a few users responded back. <a href=\"https:\/\/surveys.google.com\/\">Google Forms<\/a> were used for these surveys.<\/li>\r\n<\/ul>\r\n<p>&nbsp;<\/p>\r\n<hr \/>\r\n<p><\/p>\r\n<h3>Analyze<\/h3>\r\n<h4>Research Analysis<\/h4>\r\n<ul>\r\n<li>Users want a &#8220;no-login&#8221; coding tool where they can practice learning HTML, CSS, and JavaScript.<\/li>\r\n<li>Users can save their code\/work in the cloud so that they can access it later from home or school\/office.<\/li>\r\n<li>Users can view their saved work in both a &#8220;tile&#8221; and &#8220;list&#8221; layout. &#8220;List&#8221; is easier to search while &#8220;Tile&#8221; is easier to get a preview of the work.<\/li>\r\n<li>Users would like to have an auto-complete\/code-hinting feature to learn about various attribute\/command options in HTML, CSS and JavaScript.<\/li>\r\n<li>Users would like to &#8220;clean&#8221; and &#8220;auto-format&#8221; their code for easier maintenance.<\/li>\r\n<li>Users would like to &#8220;share&#8221; their work with their peers, and social platforms.<\/li>\r\n<li>Users would like to &#8220;download&#8221; their work and send it via email.<\/li>\r\n<li>Users would like to add CSS and JavaScript libraries to leverage various design and interaction features.<\/li>\r\n<li>Users would like to have a &#8220;collaboration&#8221; feature where the teacher can share\/demo work with students in real-time.<\/li>\r\n<\/ul>\r\n<h4>User Persona<\/h4>\r\n<p>Based on the background of the users I came across the following two Personas.\u00a0<\/p>\r\n<p><em>1. Katy Gates, a school teacher who also has an interest in designing websites<\/em><\/p>\r\n<p><a href=\"http:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2020\/08\/Persona-1.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1012\" src=\"http:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2020\/08\/Persona-1.png\" alt=\"\" width=\"1440\" height=\"1051\" srcset=\"https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2020\/08\/Persona-1.png 1440w, https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2020\/08\/Persona-1-300x219.png 300w, https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2020\/08\/Persona-1-1024x747.png 1024w, https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2020\/08\/Persona-1-768x561.png 768w, https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2020\/08\/Persona-1-370x270.png 370w, https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2020\/08\/Persona-1-1040x759.png 1040w\" sizes=\"auto, (max-width: 1440px) 100vw, 1440px\" \/><\/a><\/p>\r\n<p>&nbsp;<\/p>\r\n<p><em>2. Phil Adams, a mathematician who also loves teaching web development and programming<\/em><\/p>\r\n<p><a href=\"http:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2020\/08\/Persona-2.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1013\" src=\"http:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2020\/08\/Persona-2.png\" alt=\"\" width=\"1432\" height=\"1049\" srcset=\"https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2020\/08\/Persona-2.png 1432w, https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2020\/08\/Persona-2-300x220.png 300w, https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2020\/08\/Persona-2-1024x750.png 1024w, https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2020\/08\/Persona-2-768x563.png 768w, https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2020\/08\/Persona-2-370x271.png 370w, https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2020\/08\/Persona-2-1040x762.png 1040w\" sizes=\"auto, (max-width: 1432px) 100vw, 1432px\" \/><\/a><\/p>\r\n<p>&nbsp;<\/p>\r\n<hr \/>\r\n<h3>Design &amp; Prototype<\/h3>\r\n<h4>User Flow\u00a0<\/h4>\r\n<h4><a href=\"http:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2020\/05\/Userflow.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone  wp-image-1081\" src=\"http:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2020\/05\/Userflow.png\" alt=\"\" width=\"1243\" height=\"691\" srcset=\"https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2020\/05\/Userflow.png 1202w, https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2020\/05\/Userflow-300x167.png 300w, https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2020\/05\/Userflow-1024x569.png 1024w, https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2020\/05\/Userflow-768x427.png 768w, https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2020\/05\/Userflow-850x472.png 850w\" sizes=\"auto, (max-width: 1243px) 100vw, 1243px\" \/><\/a><\/h4>\r\n<h4>Site Map<\/h4>\r\n<p><a href=\"http:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2020\/08\/SiteMap.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1023\" src=\"http:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2020\/08\/SiteMap.png\" alt=\"\" width=\"1244\" height=\"598\" srcset=\"https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2020\/08\/SiteMap.png 1244w, https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2020\/08\/SiteMap-300x144.png 300w, https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2020\/08\/SiteMap-1024x492.png 1024w, https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2020\/08\/SiteMap-768x369.png 768w, https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2020\/08\/SiteMap-370x178.png 370w, https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2020\/08\/SiteMap-1040x500.png 1040w\" sizes=\"auto, (max-width: 1244px) 100vw, 1244px\" \/><\/a><\/p>\r\n<h4>\u00a0<\/h4>\r\n<h4>Wireframe<\/h4>\r\n<h4><em>Editor page &#8211; Basic Concept and First pencil sketch<\/em><\/h4>\r\n<figure id=\"attachment_1190\" aria-describedby=\"caption-attachment-1190\" style=\"width: 1782px\" class=\"wp-caption alignnone\"><a href=\"https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2020\/05\/mockup1.png\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-1190 size-full\" src=\"https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2020\/05\/mockup1.png\" alt=\"\" width=\"1782\" height=\"955\" srcset=\"https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2020\/05\/mockup1.png 1782w, https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2020\/05\/mockup1-300x161.png 300w, https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2020\/05\/mockup1-1024x549.png 1024w, https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2020\/05\/mockup1-768x412.png 768w, https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2020\/05\/mockup1-1536x823.png 1536w, https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2020\/05\/mockup1-850x456.png 850w\" sizes=\"auto, (max-width: 1782px) 100vw, 1782px\" \/><\/a><figcaption id=\"caption-attachment-1190\" class=\"wp-caption-text\">Default layout<\/figcaption><\/figure>\r\n<p>&nbsp;<\/p>\r\n<h4><em>Editor page &#8211; Final\u00a0<\/em><\/h4>\r\n<p><a href=\"https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2020\/05\/layout-default.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1175\" src=\"https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2020\/05\/layout-default.png\" alt=\"\" width=\"2321\" height=\"1236\" srcset=\"https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2020\/05\/layout-default.png 2321w, https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2020\/05\/layout-default-300x160.png 300w, https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2020\/05\/layout-default-1024x545.png 1024w, https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2020\/05\/layout-default-768x409.png 768w, https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2020\/05\/layout-default-1536x818.png 1536w, https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2020\/05\/layout-default-2048x1091.png 2048w, https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2020\/05\/layout-default-850x453.png 850w\" sizes=\"auto, (max-width: 2321px) 100vw, 2321px\" \/><\/a><\/p>\r\n<p>&nbsp;<\/p>\r\n<h4><em>Dashboard page &#8211; First Sketch \/ Wireframe<\/em><\/h4>\r\n<figure id=\"attachment_1192\" aria-describedby=\"caption-attachment-1192\" style=\"width: 1792px\" class=\"wp-caption alignnone\"><a href=\"https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2020\/05\/mockup3.png\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-1192 size-full\" src=\"https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2020\/05\/mockup3.png\" alt=\"\" width=\"1792\" height=\"1114\" srcset=\"https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2020\/05\/mockup3.png 1792w, https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2020\/05\/mockup3-300x186.png 300w, https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2020\/05\/mockup3-1024x637.png 1024w, https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2020\/05\/mockup3-768x477.png 768w, https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2020\/05\/mockup3-1536x955.png 1536w, https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2020\/05\/mockup3-850x528.png 850w\" sizes=\"auto, (max-width: 1792px) 100vw, 1792px\" \/><\/a><figcaption id=\"caption-attachment-1192\" class=\"wp-caption-text\">Dashboard (Tile format)<\/figcaption><\/figure>\r\n<h4><em>Dashboard page &#8211; Final<\/em><\/h4>\r\n<p><a href=\"http:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2020\/08\/Dashboard.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1033\" src=\"http:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2020\/08\/Dashboard.png\" alt=\"\" width=\"1753\" height=\"1163\" srcset=\"https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2020\/08\/Dashboard.png 1753w, https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2020\/08\/Dashboard-300x199.png 300w, https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2020\/08\/Dashboard-1024x679.png 1024w, https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2020\/08\/Dashboard-768x510.png 768w, https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2020\/08\/Dashboard-1536x1019.png 1536w, https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2020\/08\/Dashboard-370x245.png 370w, https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2020\/08\/Dashboard-1040x690.png 1040w\" sizes=\"auto, (max-width: 1753px) 100vw, 1753px\" \/><\/a><\/p>\r\n<p>&nbsp;<\/p>\r\n<h4><em>User Registration Page<\/em><\/h4>\r\n<figure id=\"attachment_1199\" aria-describedby=\"caption-attachment-1199\" style=\"width: 1040px\" class=\"wp-caption alignnone\"><a href=\"https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2020\/05\/register.png\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-1199 size-full\" src=\"https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2020\/05\/register.png\" alt=\"\" width=\"1040\" height=\"749\" srcset=\"https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2020\/05\/register.png 1040w, https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2020\/05\/register-300x216.png 300w, https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2020\/05\/register-1024x737.png 1024w, https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2020\/05\/register-768x553.png 768w, https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2020\/05\/register-850x612.png 850w\" sizes=\"auto, (max-width: 1040px) 100vw, 1040px\" \/><\/a><figcaption id=\"caption-attachment-1199\" class=\"wp-caption-text\">Registration page mockup<\/figcaption><\/figure>\r\n<p><a href=\"https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2020\/05\/Registration.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1169\" src=\"https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2020\/05\/Registration.png\" alt=\"\" width=\"1352\" height=\"855\" srcset=\"https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2020\/05\/Registration.png 1352w, https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2020\/05\/Registration-300x190.png 300w, https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2020\/05\/Registration-1024x648.png 1024w, https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2020\/05\/Registration-768x486.png 768w, https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2020\/05\/Registration-850x538.png 850w\" sizes=\"auto, (max-width: 1352px) 100vw, 1352px\" \/><\/a><\/p>\r\n<p>&nbsp;<\/p>\r\n<h4><em>Login Page<\/em><\/h4>\r\n<p><a href=\"https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2020\/05\/Login.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1170\" src=\"https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2020\/05\/Login.png\" alt=\"\" width=\"1356\" height=\"864\" srcset=\"https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2020\/05\/Login.png 1356w, https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2020\/05\/Login-300x191.png 300w, https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2020\/05\/Login-1024x652.png 1024w, https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2020\/05\/Login-768x489.png 768w, https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2020\/05\/Login-850x542.png 850w\" sizes=\"auto, (max-width: 1356px) 100vw, 1356px\" \/><\/a><\/p>\r\n<p>&nbsp;<\/p>\r\n<h4><em>Error handling for form elements<\/em><\/h4>\r\n<p><a href=\"https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2020\/05\/error-handling-1.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1171\" src=\"https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2020\/05\/error-handling-1.png\" alt=\"\" width=\"717\" height=\"647\" srcset=\"https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2020\/05\/error-handling-1.png 717w, https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2020\/05\/error-handling-1-300x271.png 300w\" sizes=\"auto, (max-width: 717px) 100vw, 717px\" \/><\/a><\/p>\r\n<p>&nbsp;<\/p>\r\n<h4><em>Multiple Layouts<\/em><\/h4>\r\n<ul>\r\n<li>Users wanted multiple types of layouts\u00a0<\/li>\r\n<li>Some layouts focus more on designers (HTML, CSS, and Preview panels), while others focus more on engineers (JavaScript, and Preview panels)<\/li>\r\n<li>The layouts can be changed by the users in real-time (dynamically)<\/li>\r\n<\/ul>\r\n<p>&nbsp;<\/p>\r\n<p>The following layout is easier when users are testing the &#8220;responsive&#8221; design (especially in landscape mode) of the page\/code.<\/p>\r\n<p><a href=\"https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2020\/05\/layout3.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1172\" src=\"https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2020\/05\/layout3.png\" alt=\"\" width=\"2558\" height=\"1241\" srcset=\"https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2020\/05\/layout3.png 2558w, https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2020\/05\/layout3-300x146.png 300w, https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2020\/05\/layout3-1024x497.png 1024w, https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2020\/05\/layout3-768x373.png 768w, https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2020\/05\/layout3-1536x745.png 1536w, https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2020\/05\/layout3-2048x994.png 2048w, https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2020\/05\/layout3-850x412.png 850w\" sizes=\"auto, (max-width: 2558px) 100vw, 2558px\" \/><\/a><\/p>\r\n<p>&nbsp;<\/p>\r\n<p>The following layout is easier when users are testing the &#8220;responsive&#8221; design (especially in portrait mode) of the page\/code. It is also a preferred layout for a multi-monitor setup.<\/p>\r\n<figure id=\"attachment_1191\" aria-describedby=\"caption-attachment-1191\" style=\"width: 1783px\" class=\"wp-caption alignnone\"><a href=\"https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2020\/05\/mockup2.png\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-1191 size-full\" src=\"https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2020\/05\/mockup2.png\" alt=\"\" width=\"1783\" height=\"960\" srcset=\"https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2020\/05\/mockup2.png 1783w, https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2020\/05\/mockup2-300x162.png 300w, https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2020\/05\/mockup2-1024x551.png 1024w, https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2020\/05\/mockup2-768x414.png 768w, https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2020\/05\/mockup2-1536x827.png 1536w, https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2020\/05\/mockup2-850x458.png 850w\" sizes=\"auto, (max-width: 1783px) 100vw, 1783px\" \/><\/a><figcaption id=\"caption-attachment-1191\" class=\"wp-caption-text\">A different layout (preferred by users with dual monitors)<\/figcaption><\/figure>\r\n<p><a href=\"https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2020\/05\/layout2.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1174\" src=\"https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2020\/05\/layout2.png\" alt=\"\" width=\"2557\" height=\"1117\" srcset=\"https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2020\/05\/layout2.png 2557w, https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2020\/05\/layout2-300x131.png 300w, https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2020\/05\/layout2-1024x447.png 1024w, https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2020\/05\/layout2-768x335.png 768w, https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2020\/05\/layout2-1536x671.png 1536w, https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2020\/05\/layout2-2048x895.png 2048w, https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2020\/05\/layout2-850x371.png 850w\" sizes=\"auto, (max-width: 2557px) 100vw, 2557px\" \/><\/a><\/p>\r\n<p>&nbsp;<\/p>\r\n<h4><em>Top bar (Primary navigation)<\/em><\/h4>\r\n<p>Based on the User Research data and analysis, the top-bar\u00a0 has the &#8220;most important&#8221; and &#8220;most popular&#8221; navigation elements<\/p>\r\n<ul>\r\n<li>Tools menu &#8211; Users can select options<\/li>\r\n<li>Library menu &#8211; Users can select an external CSS or JavaScript library<\/li>\r\n<li>Tidy All &#8211; Users can auto-format code (HTML, CSS and JavaScript)<\/li>\r\n<li>Download &#8211; Users can download code in .ZIP format<\/li>\r\n<li>Team Up &#8211; Users can collaborate (and perform code pairing) with other users in real-time<\/li>\r\n<li>Save &#8211; Users can save the code in the cloud<\/li>\r\n<\/ul>\r\n<p><a href=\"https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2020\/05\/Top-bar.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1177\" src=\"https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2020\/05\/Top-bar.png\" alt=\"\" width=\"1370\" height=\"46\" srcset=\"https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2020\/05\/Top-bar.png 1370w, https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2020\/05\/Top-bar-300x10.png 300w, https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2020\/05\/Top-bar-1024x34.png 1024w, https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2020\/05\/Top-bar-768x26.png 768w, https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2020\/05\/Top-bar-850x29.png 850w\" sizes=\"auto, (max-width: 1370px) 100vw, 1370px\" \/><\/a><\/p>\r\n<h4>\u00a0<\/h4>\r\n<h4><em>Code-hinting\u00a0<\/em><\/h4>\r\n<ul>\r\n<li>HTML &#8211; Users can select various attributes\u00a0<\/li>\r\n<li>CSS- Users can choose from properties and values. Based on the user&#8217;s &#8220;usage&#8221;, some properties may also provide examples for some values<\/li>\r\n<li>JavaScript &#8211; Users can choose from several JavaScript keywords and preset\/built-in functions. It is also context-sensitive and the context menu changes content based on user&#8217;s JavaScript code<\/li>\r\n<\/ul>\r\n<figure id=\"attachment_1180\" aria-describedby=\"caption-attachment-1180\" style=\"width: 718px\" class=\"wp-caption alignnone\"><a href=\"https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2020\/05\/code-hinting-1.png\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-1180 size-full\" src=\"https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2020\/05\/code-hinting-1.png\" alt=\"\" width=\"718\" height=\"200\" srcset=\"https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2020\/05\/code-hinting-1.png 718w, https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2020\/05\/code-hinting-1-300x84.png 300w\" sizes=\"auto, (max-width: 718px) 100vw, 718px\" \/><\/a><figcaption id=\"caption-attachment-1180\" class=\"wp-caption-text\">CSS content-menu for code hinting<\/figcaption><\/figure>\r\n<figure id=\"attachment_1181\" aria-describedby=\"caption-attachment-1181\" style=\"width: 720px\" class=\"wp-caption alignnone\"><a href=\"https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2020\/05\/code-hinting-2.png\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-1181\" src=\"https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2020\/05\/code-hinting-2.png\" alt=\"\" width=\"720\" height=\"277\" srcset=\"https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2020\/05\/code-hinting-2.png 647w, https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2020\/05\/code-hinting-2-300x115.png 300w\" sizes=\"auto, (max-width: 720px) 100vw, 720px\" \/><\/a><figcaption id=\"caption-attachment-1181\" class=\"wp-caption-text\">JavaScript content-menu for code hinting<\/figcaption><\/figure>\r\n<p>&nbsp;<\/p>\r\n<h4><em>Team- Up<\/em><\/h4>\r\n<p>This is a collaboration feature where users can perform &#8220;code pairing&#8221; and modify\/edit code remotely.\u00a0<\/p>\r\n<ul>\r\n<li>Multiple users can connect to the same session<\/li>\r\n<li>There will be a single\/same URL for the same session. Any user can join the session from the same URL<\/li>\r\n<li>Users can see each other cursor movement<\/li>\r\n<li>Users are given a default name by default, which they can change later<\/li>\r\n<\/ul>\r\n<p><a href=\"https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2020\/05\/Teamup.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1183\" src=\"https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2020\/05\/Teamup.png\" alt=\"\" width=\"1263\" height=\"460\" srcset=\"https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2020\/05\/Teamup.png 1263w, https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2020\/05\/Teamup-300x109.png 300w, https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2020\/05\/Teamup-1024x373.png 1024w, https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2020\/05\/Teamup-768x280.png 768w, https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2020\/05\/Teamup-850x310.png 850w\" sizes=\"auto, (max-width: 1263px) 100vw, 1263px\" \/><\/a><\/p>\r\n<p>&nbsp;<\/p>\r\n<hr \/>\r\n<h4>\u00a0<\/h4>\r\n<h3>Test &amp; Re-analyze<\/h3>\r\n<p>After the web app was launched, I conducted User Research directly with teachers at various educational institutes.\u00a0<\/p>\r\n<ul>\r\n<li><em>Surveys<\/em> &#8211; Several surveys were sent to users through Linkedin, StackOverflow, and other social platforms.<\/li>\r\n<li><em>Usability Testing<\/em> was conducted remotely at several educational institutes.<\/li>\r\n<\/ul>\r\n<h4><em>Usability Testing<\/em><\/h4>\r\n<ul>\r\n<li>Some of the sessions were moderated.<\/li>\r\n<li>Users (some students and some teachers) were given a set of tasks to be completed.<\/li>\r\n<li>The whole session was being streamed live and recorded.<\/li>\r\n<\/ul>\r\n<h4>\u00a0<\/h4>\r\n<h4><em>Some photos of students\/teachers using Liveweave.com<\/em><\/h4>\r\n<p><a href=\"http:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2020\/08\/School-3.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1038\" src=\"http:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2020\/08\/School-3.png\" alt=\"\" width=\"2560\" height=\"1062\" srcset=\"https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2020\/08\/School-3.png 2560w, https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2020\/08\/School-3-300x124.png 300w, https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2020\/08\/School-3-1024x425.png 1024w, https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2020\/08\/School-3-768x319.png 768w, https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2020\/08\/School-3-1536x637.png 1536w, https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2020\/08\/School-3-2048x850.png 2048w, https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2020\/08\/School-3-370x153.png 370w, https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2020\/08\/School-3-1040x431.png 1040w\" sizes=\"auto, (max-width: 2560px) 100vw, 2560px\" \/><\/a><a href=\"http:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2020\/08\/School-2.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1036\" src=\"http:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2020\/08\/School-2.png\" alt=\"\" width=\"2560\" height=\"1440\" srcset=\"https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2020\/08\/School-2.png 2560w, https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2020\/08\/School-2-300x169.png 300w, https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2020\/08\/School-2-1024x576.png 1024w, https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2020\/08\/School-2-768x432.png 768w, https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2020\/08\/School-2-1536x864.png 1536w, https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2020\/08\/School-2-2048x1152.png 2048w, https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2020\/08\/School-2-370x208.png 370w, https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2020\/08\/School-2-1040x585.png 1040w\" sizes=\"auto, (max-width: 2560px) 100vw, 2560px\" \/><\/a><\/p>\r\n<p>&nbsp;<\/p>\r\n<h4><em>Measure \/ Re-analyze \/ Research Analytics<\/em><\/h4>\r\n<p>Final Product URL:\u00a0<a href=\"https:\/\/liveweave.com\/\">Liveweave.com<\/a><\/p>\r\n<ul>\r\n<li>Google Analytics data was reviewed over a period of 90 days<\/li>\r\n<li>User behavior was studied (some examples below):\r\n<ul>\r\n<li>Active users<\/li>\r\n<li>Lifetime value<\/li>\r\n<li>Cohort analysis \/ retention value<\/li>\r\n<li>Platform<\/li>\r\n<li>Technology<\/li>\r\n<li>User flows<\/li>\r\n<li>Demographics<\/li>\r\n<\/ul>\r\n<\/li>\r\n<\/ul>\r\n<p>&nbsp;<\/p>\r\n<p><a href=\"http:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2020\/08\/Analytics-2.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1041\" src=\"http:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2020\/08\/Analytics-2.png\" alt=\"\" width=\"1748\" height=\"1224\" srcset=\"https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2020\/08\/Analytics-2.png 1748w, https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2020\/08\/Analytics-2-300x210.png 300w, https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2020\/08\/Analytics-2-1024x717.png 1024w, https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2020\/08\/Analytics-2-768x538.png 768w, https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2020\/08\/Analytics-2-1536x1076.png 1536w, https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2020\/08\/Analytics-2-370x259.png 370w, https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2020\/08\/Analytics-2-1040x728.png 1040w\" sizes=\"auto, (max-width: 1748px) 100vw, 1748px\" \/><\/a><\/p>\r\n<p>&nbsp;<\/p>\r\n<h4><em>Product Reviews\u00a0<\/em><\/h4>\r\n<p>Liveweave has been mentioned on various websites and top online web design magazines. Here are some of the links:<\/p>\r\n<ul>\r\n<li><a href=\"https:\/\/www.makeuseof.com\/tag\/best-free-online-html-editors\/\">The 7 Best Free Online HTML Editors to Test Your Code <em>(<strong>MakeUseOf<\/strong>)<\/em><\/a><\/li>\r\n<li><a href=\"https:\/\/www.sitepoint.com\/7-code-playgrounds\/\">7 of the Best Code Playgrounds <em>(<strong>SitePoint<\/strong>)<\/em><\/a><\/li>\r\n<li><a href=\"https:\/\/echoua.com\/best-online-web-editors\/\">Top 20 Online Web Editors in Every Developer&#8217;s Toolkit (<strong><em>Echoua<\/em><\/strong><em>)<\/em><\/a><\/li>\r\n<li><a href=\"https:\/\/www.designbombs.com\/code-sharing-websites\/\" target=\"_blank\" rel=\"noopener noreferrer\" data-saferedirecturl=\"https:\/\/www.google.com\/url?q=https:\/\/www.designbombs.com\/code-sharing-websites\/&amp;source=gmail&amp;ust=1598121949739000&amp;usg=AFQjCNE2nuWW4ZDwVxBHb1iLRAdjT_lYwg\">15 Useful Code Sharing Websites for Web Developers <em>(<strong>DesignBombs<\/strong>)<\/em><\/a><\/li>\r\n<li><a href=\"https:\/\/scotch.io\/tutorials\/7-javascript-playgrounds-to-use-in-2019\">7 JavaScript Playgrounds to Use in 2019 <em>(<strong>Scotch<\/strong>)<\/em><\/a><\/li>\r\n<li>&#8230;and more<\/li>\r\n<\/ul>","protected":false},"excerpt":{"rendered":"<p>Product: Liveweave.com Understand Goal Build an easy to use online coding tool to learn, practice, share and test HTML, CSS, and JavaScript code. This tool is similar to Google Docs editor, but instead with a focus on coding\/programming. Audience\/Target users: School Teachers Students (School and University) Web design and development professionals Problems Most web apps&#8230;<\/p>\n","protected":false},"author":1,"featured_media":1033,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,1],"tags":[],"class_list":["post-999","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-portfolio","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/amitavasen.com\/portfolio\/wp-json\/wp\/v2\/posts\/999","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/amitavasen.com\/portfolio\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/amitavasen.com\/portfolio\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/amitavasen.com\/portfolio\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/amitavasen.com\/portfolio\/wp-json\/wp\/v2\/comments?post=999"}],"version-history":[{"count":53,"href":"https:\/\/amitavasen.com\/portfolio\/wp-json\/wp\/v2\/posts\/999\/revisions"}],"predecessor-version":[{"id":1240,"href":"https:\/\/amitavasen.com\/portfolio\/wp-json\/wp\/v2\/posts\/999\/revisions\/1240"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/amitavasen.com\/portfolio\/wp-json\/wp\/v2\/media\/1033"}],"wp:attachment":[{"href":"https:\/\/amitavasen.com\/portfolio\/wp-json\/wp\/v2\/media?parent=999"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/amitavasen.com\/portfolio\/wp-json\/wp\/v2\/categories?post=999"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/amitavasen.com\/portfolio\/wp-json\/wp\/v2\/tags?post=999"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}