{"id":73745,"date":"2019-03-22T19:43:55","date_gmt":"2019-03-22T19:43:55","guid":{"rendered":"http:\/\/onyxstudio.us\/discovery\/?p=73745"},"modified":"2020-10-09T04:48:34","modified_gmt":"2020-10-09T04:48:34","slug":"html5-web-app-wallboard-touch","status":"publish","type":"post","link":"https:\/\/onyxstudio.us\/discovery\/html5-web-app-wallboard-touch\/","title":{"rendered":"HTML5 Web App &#8211; Wallboard Touch"},"content":{"rendered":"<p>[vc_row unlock_row=&#8221;&#8221; row_height_percent=&#8221;0&#8243; override_padding=&#8221;yes&#8221; h_padding=&#8221;2&#8243; top_padding=&#8221;4&#8243; bottom_padding=&#8221;2&#8243; overlay_alpha=&#8221;0&#8243; gutter_size=&#8221;3&#8243; column_width_percent=&#8221;100&#8243; shift_y=&#8221;0&#8243; z_index=&#8221;0&#8243; row_name=&#8221;start&#8221;][vc_column column_width_percent=&#8221;100&#8243; position_vertical=&#8221;middle&#8221; overlay_alpha=&#8221;50&#8243; gutter_size=&#8221;3&#8243; medium_width=&#8221;0&#8243; mobile_width=&#8221;0&#8243; shift_x=&#8221;0&#8243; shift_y=&#8221;0&#8243; shift_y_down=&#8221;0&#8243; z_index=&#8221;0&#8243; width=&#8221;1\/1&#8243;][vc_custom_heading heading_semantic=&#8221;h1&#8243; text_size=&#8221;h1&#8243; text_weight=&#8221;400&#8243; text_color=&#8221;color-prif&#8221;]Shape Shifter,\u00a0the Leading Patient Education Solution Transformed into the Next Level[\/vc_custom_heading][vc_column_text]Thanks to the well crafted <a href=\"http:\/\/onyxstudio.us\/discovery\/html5-web-app-vuesimulator\/\">VueSimulator HTML5 Web Application<\/a> that I previously designed, I created a new layout to fit the same interactive simulations and videos originally crafted for VueSimulator HTML5, tailored the content for regular horizontal screens to fit into <strong>vertical touch screens<\/strong>, so that lots of graphic elements could now be replaced by intuitive touch gestures, while maintaining the maximum field of view, and optimized usability furthermore for this application, and turned an already best-selling product into another popular product with a completely new look and feel.<\/p>\n<p><strong>Challenges<\/strong><br \/>\n1, to upgrade UI from mouse to fingers,<br \/>\n2, to utilize our existing content for a completely different setup,<br \/>\n3, to declutter the UI\/UX by removing\/combining functions that are not often used, and make room for possible future development.<br \/>\n4, to keep the dev cost low and gain the most improvement,<br \/>\n5, to keep the art department&#8217;s remaster job to the minimum[\/vc_column_text][\/vc_column][\/vc_row][vc_row row_height_percent=&#8221;0&#8243; override_padding=&#8221;yes&#8221; h_padding=&#8221;2&#8243; top_padding=&#8221;2&#8243; bottom_padding=&#8221;2&#8243; overlay_alpha=&#8221;50&#8243; gutter_size=&#8221;3&#8243; column_width_percent=&#8221;100&#8243; shift_y=&#8221;0&#8243; z_index=&#8221;0&#8243;][vc_column column_width_percent=&#8221;100&#8243; overlay_alpha=&#8221;50&#8243; gutter_size=&#8221;3&#8243; medium_width=&#8221;0&#8243; mobile_width=&#8221;0&#8243; shift_x=&#8221;0&#8243; shift_y=&#8221;0&#8243; shift_y_down=&#8221;0&#8243; z_index=&#8221;0&#8243; width=&#8221;2\/3&#8243;][vc_custom_heading heading_semantic=&#8221;h1&#8243; text_size=&#8221;h1&#8243; text_weight=&#8221;400&#8243; text_color=&#8221;color-prif&#8221; separator=&#8221;yes&#8221; subheading=&#8221;Market research<br \/>\nPrioritize features based on our budget and usability.<br \/>\nUI\/UX Design for touch screens<br \/>\nDesign workflow to reuse existing assets as much as possible<br \/>\nRecruit &amp; supervise outsource experts<br \/>\nManage development progress and debug<br \/>\nCreate documentation, provide training<br \/>\nData mining &amp; visualization<br \/>\nContingency plan &amp; crisis management&#8221;]My Roles[\/vc_custom_heading][\/vc_column][vc_column column_width_percent=&#8221;100&#8243; overlay_alpha=&#8221;50&#8243; gutter_size=&#8221;3&#8243; medium_width=&#8221;0&#8243; mobile_width=&#8221;0&#8243; shift_x=&#8221;0&#8243; shift_y=&#8221;0&#8243; shift_y_down=&#8221;0&#8243; z_index=&#8221;0&#8243; width=&#8221;1\/3&#8243;][vc_custom_heading heading_semantic=&#8221;h1&#8243; text_size=&#8221;h1&#8243; text_weight=&#8221;400&#8243; text_color=&#8221;color-prif&#8221; separator=&#8221;yes&#8221; subheading=&#8221;HTML5,<br \/>\nJavaScript,<br \/>\nBootstrap,<br \/>\nPHP,<br \/>\nLaravel,<br \/>\nMySQL,<br \/>\nH.264,<br \/>\nCreate.JS&#8221;]Technology[\/vc_custom_heading][\/vc_column][\/vc_row][vc_row unlock_row=&#8221;&#8221; row_height_percent=&#8221;0&#8243; override_padding=&#8221;yes&#8221; h_padding=&#8221;2&#8243; top_padding=&#8221;4&#8243; bottom_padding=&#8221;2&#8243; overlay_alpha=&#8221;0&#8243; gutter_size=&#8221;3&#8243; column_width_percent=&#8221;100&#8243; shift_y=&#8221;0&#8243; z_index=&#8221;0&#8243; row_name=&#8221;start&#8221;][vc_column column_width_percent=&#8221;100&#8243; position_vertical=&#8221;middle&#8221; align_horizontal=&#8221;align_center&#8221; overlay_alpha=&#8221;50&#8243; gutter_size=&#8221;3&#8243; medium_width=&#8221;0&#8243; mobile_width=&#8221;0&#8243; shift_x=&#8221;0&#8243; shift_y=&#8221;0&#8243; shift_y_down=&#8221;0&#8243; z_index=&#8221;0&#8243; width=&#8221;1\/1&#8243;][vc_custom_heading heading_semantic=&#8221;h1&#8243; text_size=&#8221;fontsize-155944&#8243; text_weight=&#8221;400&#8243; text_color=&#8221;color-210407&#8243;]FEATURING[\/vc_custom_heading][\/vc_column][\/vc_row][vc_row row_height_percent=&#8221;0&#8243; override_padding=&#8221;yes&#8221; h_padding=&#8221;2&#8243; top_padding=&#8221;2&#8243; bottom_padding=&#8221;0&#8243; overlay_alpha=&#8221;50&#8243; gutter_size=&#8221;3&#8243; column_width_percent=&#8221;100&#8243; shift_y=&#8221;0&#8243; z_index=&#8221;0&#8243;][vc_column column_width_percent=&#8221;100&#8243; align_horizontal=&#8221;align_center&#8221; overlay_alpha=&#8221;50&#8243; gutter_size=&#8221;3&#8243; medium_width=&#8221;0&#8243; mobile_width=&#8221;0&#8243; shift_x=&#8221;0&#8243; shift_y=&#8221;0&#8243; shift_y_down=&#8221;0&#8243; z_index=&#8221;0&#8243; width=&#8221;1\/3&#8243;][vc_icon icon=&#8221;fa fa-code&#8221; icon_color=&#8221;color-210407&#8243; size=&#8221;fa-5x&#8221; title=&#8221;HTML5&#8243;][\/vc_icon][\/vc_column][vc_column column_width_percent=&#8221;100&#8243; align_horizontal=&#8221;align_center&#8221; overlay_alpha=&#8221;50&#8243; gutter_size=&#8221;3&#8243; medium_width=&#8221;0&#8243; mobile_width=&#8221;0&#8243; shift_x=&#8221;0&#8243; shift_y=&#8221;0&#8243; shift_y_down=&#8221;0&#8243; z_index=&#8221;0&#8243; width=&#8221;1\/3&#8243;][vc_icon icon=&#8221;fa fa-cloud3&#8243; icon_color=&#8221;color-210407&#8243; size=&#8221;fa-5x&#8221; title=&#8221;CLOUD&#8221;][\/vc_icon][\/vc_column][vc_column column_width_percent=&#8221;100&#8243; align_horizontal=&#8221;align_center&#8221; overlay_alpha=&#8221;50&#8243; gutter_size=&#8221;3&#8243; medium_width=&#8221;0&#8243; mobile_width=&#8221;0&#8243; shift_x=&#8221;0&#8243; shift_y=&#8221;0&#8243; shift_y_down=&#8221;0&#8243; z_index=&#8221;0&#8243; width=&#8221;1\/3&#8243;][vc_icon icon=&#8221;fa fa-cog4&#8243; icon_color=&#8221;color-210407&#8243; size=&#8221;fa-5x&#8221; title=&#8221;INTERFACE&#8221;][\/vc_icon][\/vc_column][\/vc_row][vc_row][vc_column width=&#8221;1\/3&#8243;][vc_column_text]<\/p>\n<ul>\n<li>Smoothly run on any platform, including PC, Mac, Linux, iPad\/Android\/Windows tablets.<\/li>\n<li>Deeply integrated into most mainstream EMR\/EHR software.<\/li>\n<li>No need to install or update any software or apps. IT guys will LOVE it!<\/li>\n<li>No more risky Flash with constant plugin updates.<\/li>\n<li>Content downloading has been optimized to the limit, to reduce the loading time.<\/li>\n<li>Supports current\/future technology (H.264\/H.265 etc,). All future updates will be smooth and painless,\u00a0without forcing customers to update their hardware or software.<\/li>\n<\/ul>\n<p>[\/vc_column_text][\/vc_column][vc_column width=&#8221;1\/3&#8243;][vc_column_text]<\/p>\n<ul>\n<li>No need to install or update the app.<\/li>\n<li>Run within any browsers.<\/li>\n<li>New content coming to your EMR\/EHR automatically.<\/li>\n<li>No need to buy expensive servers and hire IT experts to manage, or to worry about hardware failure or virus or cyber attack.<\/li>\n<li>The encrypted cache system makes it a breeze to download the content and play again and again.<\/li>\n<li>Flexible and accurate license management and user activity statistics.<\/li>\n<li>Hosted on the most robust Amazon EC2 and CDN, protected by CloudFlare, against any virus, malware, DDOS.<\/li>\n<\/ul>\n<p>[\/vc_column_text][\/vc_column][vc_column width=&#8221;1\/3&#8243;][vc_column_text]<\/p>\n<ul>\n<li>The colorful and soothing interface gives patients a relaxed journey.<\/li>\n<li>Only show you what you care the most, using ICD9\/10\/11.<\/li>\n<li>Customize your interface to perfectly match your favorite style.<\/li>\n<li>Upgraded search and favorite functions for the maximum efficiency.<\/li>\n<li>Upload your favorite YouTube videos<\/li>\n<li>Create your own playlists and share with patients through Email or social media.<\/li>\n<li>Convenient paper handouts ready to print or email any time.<\/li>\n<\/ul>\n<p>[\/vc_column_text][\/vc_column][\/vc_row][vc_row unlock_row=&#8221;&#8221; row_height_percent=&#8221;0&#8243; override_padding=&#8221;yes&#8221; h_padding=&#8221;2&#8243; top_padding=&#8221;4&#8243; bottom_padding=&#8221;2&#8243; overlay_alpha=&#8221;0&#8243; gutter_size=&#8221;3&#8243; column_width_percent=&#8221;100&#8243; shift_y=&#8221;0&#8243; z_index=&#8221;0&#8243; row_name=&#8221;start&#8221;][vc_column column_width_percent=&#8221;100&#8243; position_vertical=&#8221;middle&#8221; align_horizontal=&#8221;align_center&#8221; overlay_alpha=&#8221;50&#8243; gutter_size=&#8221;3&#8243; medium_width=&#8221;0&#8243; mobile_width=&#8221;0&#8243; shift_x=&#8221;0&#8243; shift_y=&#8221;0&#8243; shift_y_down=&#8221;0&#8243; z_index=&#8221;0&#8243; width=&#8221;1\/1&#8243;][vc_custom_heading heading_semantic=&#8221;h1&#8243; text_size=&#8221;fontsize-155944&#8243; text_weight=&#8221;400&#8243; text_color=&#8221;color-210407&#8243;]SCREENSHOTS[\/vc_custom_heading][\/vc_column][\/vc_row][vc_row unlock_row_content=&#8221;yes&#8221; row_height_percent=&#8221;0&#8243; override_padding=&#8221;yes&#8221; h_padding=&#8221;0&#8243; top_padding=&#8221;0&#8243; bottom_padding=&#8221;0&#8243; overlay_alpha=&#8221;50&#8243; gutter_size=&#8221;3&#8243; column_width_percent=&#8221;100&#8243; shift_y=&#8221;0&#8243; z_index=&#8221;0&#8243;][vc_column column_width_percent=&#8221;100&#8243; override_padding=&#8221;yes&#8221; column_padding=&#8221;0&#8243; overlay_alpha=&#8221;50&#8243; gutter_size=&#8221;3&#8243; medium_width=&#8221;0&#8243; mobile_width=&#8221;0&#8243; shift_x=&#8221;0&#8243; shift_y=&#8221;0&#8243; shift_y_down=&#8221;0&#8243; z_index=&#8221;0&#8243; width=&#8221;1\/1&#8243;][vc_gallery el_id=&#8221;gallery-166917&#8243; type=&#8221;justified&#8221; medias=&#8221;73743&#8243; explode_albums=&#8221;yes&#8221; justify_row_height=&#8221;800&#8243; gutter_size=&#8221;0&#8243; media_items=&#8221;&#8221; single_overlay_color=&#8221;color-143431&#8243; single_overlay_opacity=&#8221;50&#8243; single_text_visible=&#8221;yes&#8221; single_text_anim_type=&#8221;btt&#8221; single_padding=&#8221;2&#8243; single_text_reduced=&#8221;yes&#8221; single_icon=&#8221;fa fa-search&#8221; single_css_animation=&#8221;bottom-t-top&#8221; single_animation_delay=&#8221;500&#8243; lbox_no_tmb=&#8221;yes&#8221;][\/vc_column][\/vc_row]<\/p>\n","protected":false},"excerpt":{"rendered":"<p>[vc_row unlock_row=&#8221;&#8221; row_height_percent=&#8221;0&#8243; override_padding=&#8221;yes&#8221; h_padding=&#8221;2&#8243; top_padding=&#8221;4&#8243; bottom_padding=&#8221;2&#8243; overlay_alpha=&#8221;0&#8243; gutter_size=&#8221;3&#8243; column_width_percent=&#8221;100&#8243; shift_y=&#8221;0&#8243; z_index=&#8221;0&#8243; row_name=&#8221;start&#8221;][vc_column column_width_percent=&#8221;100&#8243; position_vertical=&#8221;middle&#8221; overlay_alpha=&#8221;50&#8243; gutter_size=&#8221;3&#8243; medium_width=&#8221;0&#8243; mobile_width=&#8221;0&#8243; shift_x=&#8221;0&#8243; [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":73756,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[37,41],"tags":[],"class_list":["post-73745","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-design-dev","category-web"],"_links":{"self":[{"href":"https:\/\/onyxstudio.us\/discovery\/wp-json\/wp\/v2\/posts\/73745","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/onyxstudio.us\/discovery\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/onyxstudio.us\/discovery\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/onyxstudio.us\/discovery\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/onyxstudio.us\/discovery\/wp-json\/wp\/v2\/comments?post=73745"}],"version-history":[{"count":0,"href":"https:\/\/onyxstudio.us\/discovery\/wp-json\/wp\/v2\/posts\/73745\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/onyxstudio.us\/discovery\/wp-json\/wp\/v2\/media\/73756"}],"wp:attachment":[{"href":"https:\/\/onyxstudio.us\/discovery\/wp-json\/wp\/v2\/media?parent=73745"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/onyxstudio.us\/discovery\/wp-json\/wp\/v2\/categories?post=73745"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/onyxstudio.us\/discovery\/wp-json\/wp\/v2\/tags?post=73745"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}