{"id":531,"date":"2015-09-30T14:55:35","date_gmt":"2015-09-30T12:55:35","guid":{"rendered":"https:\/\/mndn.de\/?p=531"},"modified":"2017-01-14T18:38:29","modified_gmt":"2017-01-14T16:38:29","slug":"case-study-skoove-piano-trainer-ux-ui-design","status":"publish","type":"post","link":"https:\/\/mndn.de\/en\/2015\/09\/30\/case-study-skoove-piano-trainer-ux-ui-design\/","title":{"rendered":"Skoove Piano Trainer UX &#038; UI Design"},"content":{"rendered":"<p><em>\u201cThe easiest way to learn piano\u201d<\/em> \u2013 <a href=\"http:\/\/www.skoove.com\" target=\"_blank\">Skoove<\/a> is an online trainer for interactive piano lessons.<\/p>\n<p>Our task was to develop a User Interface (UI) for the piano trainer application, the project\u2019s most important counterpart. In addition, we were responsible for corporate branding and the website. Essential to completing these tasks was an extensive understanding of the product at hand. Together with Berlin based startup Skoove, we developed a project roadmap, specified exact features and agreed on the feature set of an MVP (Minimum Viable Product).<\/p>\n<div id=\"attachment_495\" class=\"wp-caption alignnone\" ><a href=\"https:\/\/mndn.de\/wp-content\/uploads\/2015\/08\/MNDN-skoove-ui-design-screenshot-interface-design-laptop.jpg\"><img loading=\"lazy\" class=\"size-full wp-image-495\" src=\"https:\/\/mndn.de\/wp-content\/uploads\/2015\/08\/MNDN-skoove-ui-design-screenshot-interface-design-laptop.jpg\" alt=\"MNDN Skoove UI Design Trainer Screenshot Interface Design Laptop Webapp\" width=\"1500\" height=\"776\" srcset=\"https:\/\/mndn.de\/wp-content\/uploads\/2015\/08\/MNDN-skoove-ui-design-screenshot-interface-design-laptop.jpg 1500w, https:\/\/mndn.de\/wp-content\/uploads\/2015\/08\/MNDN-skoove-ui-design-screenshot-interface-design-laptop-300x155.jpg 300w, https:\/\/mndn.de\/wp-content\/uploads\/2015\/08\/MNDN-skoove-ui-design-screenshot-interface-design-laptop-768x397.jpg 768w, https:\/\/mndn.de\/wp-content\/uploads\/2015\/08\/MNDN-skoove-ui-design-screenshot-interface-design-laptop-1024x530.jpg 1024w\" sizes=\"(max-width: 1500px) 100vw, 1500px\" \/><\/a><p class=\"wp-caption-text\">Skoove UI Design: Trainer Interface<\/p><\/div>\n<h2>User-Centered Design<\/h2>\n<p>Skoove provides educational software \u2013 understanding this fact has been very important in developing Skoove\u2019s UI. Learning an instrument requires a student\u2019s full attention \u2013 every distraction obstructs the learning process. We tackled this challenge with \u201cUser-Centered Design\u201d: all decisions regarding features and interactions were made from a user\u2019s perspective.<\/p>\n<p>This approach affected all aspects of the interface, such as the navigation between courses and lessons, the indicator of personal progress, and the explanations of individual lessons.<\/p>\n\n\t\t<style type=\"text\/css\">\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 id='gallery-1' class='gallery galleryid-531 gallery-columns-3 gallery-size-medium'><dl class='gallery-item'>\n\t\t\t<dt class='gallery-icon landscape'>\n\t\t\t\t<a href='https:\/\/mndn.de\/wp-content\/uploads\/2015\/08\/MNDN-skoove-web-app-gui-design-ui-controls-3-progress-bar.jpg'><img width=\"300\" height=\"300\" src=\"https:\/\/mndn.de\/wp-content\/uploads\/2015\/08\/MNDN-skoove-web-app-gui-design-ui-controls-3-progress-bar-300x300.jpg\" class=\"attachment-medium size-medium\" alt=\"\" loading=\"lazy\" aria-describedby=\"gallery-1-816\" srcset=\"https:\/\/mndn.de\/wp-content\/uploads\/2015\/08\/MNDN-skoove-web-app-gui-design-ui-controls-3-progress-bar-300x300.jpg 300w, https:\/\/mndn.de\/wp-content\/uploads\/2015\/08\/MNDN-skoove-web-app-gui-design-ui-controls-3-progress-bar-250x250.jpg 250w, https:\/\/mndn.de\/wp-content\/uploads\/2015\/08\/MNDN-skoove-web-app-gui-design-ui-controls-3-progress-bar-400x400.jpg 400w, https:\/\/mndn.de\/wp-content\/uploads\/2015\/08\/MNDN-skoove-web-app-gui-design-ui-controls-3-progress-bar-50x50.jpg 50w, https:\/\/mndn.de\/wp-content\/uploads\/2015\/08\/MNDN-skoove-web-app-gui-design-ui-controls-3-progress-bar.jpg 671w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a>\n\t\t\t<\/dt>\n\t\t\t\t<dd class='wp-caption-text gallery-caption' id='gallery-1-816'>\n\t\t\t\tFortschritts-Bar\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:\/\/mndn.de\/wp-content\/uploads\/2015\/08\/MNDN-skoove-web-app-gui-design-ui-controls-1-info-popup.jpg'><img width=\"300\" height=\"300\" src=\"https:\/\/mndn.de\/wp-content\/uploads\/2015\/08\/MNDN-skoove-web-app-gui-design-ui-controls-1-info-popup-300x300.jpg\" class=\"attachment-medium size-medium\" alt=\"\" loading=\"lazy\" aria-describedby=\"gallery-1-814\" srcset=\"https:\/\/mndn.de\/wp-content\/uploads\/2015\/08\/MNDN-skoove-web-app-gui-design-ui-controls-1-info-popup-300x300.jpg 300w, https:\/\/mndn.de\/wp-content\/uploads\/2015\/08\/MNDN-skoove-web-app-gui-design-ui-controls-1-info-popup-250x250.jpg 250w, https:\/\/mndn.de\/wp-content\/uploads\/2015\/08\/MNDN-skoove-web-app-gui-design-ui-controls-1-info-popup-400x400.jpg 400w, https:\/\/mndn.de\/wp-content\/uploads\/2015\/08\/MNDN-skoove-web-app-gui-design-ui-controls-1-info-popup-50x50.jpg 50w, https:\/\/mndn.de\/wp-content\/uploads\/2015\/08\/MNDN-skoove-web-app-gui-design-ui-controls-1-info-popup.jpg 671w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a>\n\t\t\t<\/dt>\n\t\t\t\t<dd class='wp-caption-text gallery-caption' id='gallery-1-814'>\n\t\t\t\tLektion Anleitung\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:\/\/mndn.de\/wp-content\/uploads\/2015\/08\/MNDN-skoove-web-app-gui-design-ui-controls-2-tutorial1.jpg'><img width=\"300\" height=\"300\" src=\"https:\/\/mndn.de\/wp-content\/uploads\/2015\/08\/MNDN-skoove-web-app-gui-design-ui-controls-2-tutorial1-300x300.jpg\" class=\"attachment-medium size-medium\" alt=\"\" loading=\"lazy\" aria-describedby=\"gallery-1-817\" srcset=\"https:\/\/mndn.de\/wp-content\/uploads\/2015\/08\/MNDN-skoove-web-app-gui-design-ui-controls-2-tutorial1-300x300.jpg 300w, https:\/\/mndn.de\/wp-content\/uploads\/2015\/08\/MNDN-skoove-web-app-gui-design-ui-controls-2-tutorial1-250x250.jpg 250w, https:\/\/mndn.de\/wp-content\/uploads\/2015\/08\/MNDN-skoove-web-app-gui-design-ui-controls-2-tutorial1-400x400.jpg 400w, https:\/\/mndn.de\/wp-content\/uploads\/2015\/08\/MNDN-skoove-web-app-gui-design-ui-controls-2-tutorial1-50x50.jpg 50w, https:\/\/mndn.de\/wp-content\/uploads\/2015\/08\/MNDN-skoove-web-app-gui-design-ui-controls-2-tutorial1.jpg 671w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a>\n\t\t\t<\/dt>\n\t\t\t\t<dd class='wp-caption-text gallery-caption' id='gallery-1-817'>\n\t\t\t\tTutorial\n\t\t\t\t<\/dd><\/dl><br style=\"clear: both\" \/>\n\t\t<\/div>\n\n<h2>The Feedback-Loop<\/h2>\n<p>Test candidates were an essential part of the developmental process. A comprehensive solution isn\u2019t just achieved working with pen and paper \u2013 all decisions and concepts need to be tested in real-life scenarios as well. For this reason, Skoove conducted local user tests throughout the entire time, demonstrating which elements of the interface were understood immediately, and which interactions failed their purpose. These new insights were then integrated into the next iteration of the design \u2013 creating a loop that lead closer to the perfect solution with every iteration.<\/p>\n<p><a href=\"https:\/\/mndn.de\/wp-content\/uploads\/2015\/08\/MNDN-skoove-ux-ui-feedback-cycle-fonts-01.svg\"><img class=\"alignnone size-full wp-image-509\" src=\"https:\/\/mndn.de\/wp-content\/uploads\/2015\/08\/MNDN-skoove-ux-ui-feedback-cycle-fonts-01.svg\" alt=\"Skoove UX Feedback Loop UI Design\" \/><\/a><\/p>\n<h2>Trainer VS Trackpad<\/h2>\n<p>The operation of a piano trainer poses a special challenge, as two layers of interaction exist: the trainer\u2019s interface on the computer screen, as well as the piano keys beneath the user\u2019s hands. If those hands have to jump from piano to trackpad constantly, the trainer actually obstructs the user: every interaction interrupts the flow of practice, and therefore the student\u2019s success. The result: A frustrating user experience.<\/p>\n<h2>Interacting through Piano Keys<\/h2>\n<p>Trainer and piano must therefore not exist in two \u201cseparate worlds\u201d \u2013 they need to be combined in a single layer of interaction. Our solution: accessing certain features of the trainer through assigned piano keys. By using this approach, the user\u2019s hands do not have to reach out to the trackpad and press Start\/Stop there \u2013 they never need to leave the piano. Instead of obstructing the user, the trainer integrates seamlessly into the piano playing experience: an immediate connection between trainer and piano is established.<\/p>\n<div id=\"attachment_518\" class=\"wp-caption alignnone\" ><a href=\"https:\/\/mndn.de\/wp-content\/uploads\/2015\/08\/MNDN-skoove-web-app-gui-design-key-controls-collection.jpg\"><img loading=\"lazy\" class=\"size-full wp-image-518\" src=\"https:\/\/mndn.de\/wp-content\/uploads\/2015\/08\/MNDN-skoove-web-app-gui-design-key-controls-collection.jpg\" alt=\"Skoove Web App GUI Design Key Controls\" width=\"1500\" height=\"939\" srcset=\"https:\/\/mndn.de\/wp-content\/uploads\/2015\/08\/MNDN-skoove-web-app-gui-design-key-controls-collection.jpg 1500w, https:\/\/mndn.de\/wp-content\/uploads\/2015\/08\/MNDN-skoove-web-app-gui-design-key-controls-collection-300x188.jpg 300w, https:\/\/mndn.de\/wp-content\/uploads\/2015\/08\/MNDN-skoove-web-app-gui-design-key-controls-collection-768x481.jpg 768w, https:\/\/mndn.de\/wp-content\/uploads\/2015\/08\/MNDN-skoove-web-app-gui-design-key-controls-collection-1024x641.jpg 1024w\" sizes=\"(max-width: 1500px) 100vw, 1500px\" \/><\/a><p class=\"wp-caption-text\">UI Iterations for Hotkey Assignments<\/p><\/div>\n<h2>Preventing errors<\/h2>\n<p>Controlling the trainer through the piano\u2019s keyboard poses further challenges: How can accidental triggers of trainer features be prevented while the user is playing? User testing quickly proved that placing the Previous and Next Lesson buttons on the far left of the keyboard was the most effective solution. The interaction for starting and stopping a lesson required far more iterations though. Tested were several combinations of keys pressed simultaneously, as well as entire keyboard sections. Different keypress durations were tested in experiments as well to prevent launching features accidentally.<\/p>\n<blockquote><p>ERROR PREVENTION<br \/>\nEven better than good error messages is a careful design which prevents a problem from occurring in the first place. Either eliminate error-prone conditions or check for them.<br \/>\n\u2013 Jakob Nielsen, Usability Heuristics for User Interface Design<\/p><\/blockquote>\n<h2>Branding &amp; Website-Design<\/h2>\n<p>In addition to the piano trainer, MNDN was also responsible for the identity of the Skoove brand. Except for the logo, we developed all corporate design, including the landing page and course selection pages.<\/p>\n<div id=\"attachment_504\" class=\"wp-caption alignnone\" ><a href=\"https:\/\/mndn.de\/wp-content\/uploads\/2015\/08\/MNDN-skoove-website-ui-landing-page-design-tiled.jpg\"><img loading=\"lazy\" class=\"size-full wp-image-504\" src=\"https:\/\/mndn.de\/wp-content\/uploads\/2015\/08\/MNDN-skoove-website-ui-landing-page-design-tiled.jpg\" alt=\"Skoove Website Landing Page Design\" width=\"1500\" height=\"936\" srcset=\"https:\/\/mndn.de\/wp-content\/uploads\/2015\/08\/MNDN-skoove-website-ui-landing-page-design-tiled.jpg 1500w, https:\/\/mndn.de\/wp-content\/uploads\/2015\/08\/MNDN-skoove-website-ui-landing-page-design-tiled-300x187.jpg 300w, https:\/\/mndn.de\/wp-content\/uploads\/2015\/08\/MNDN-skoove-website-ui-landing-page-design-tiled-768x479.jpg 768w, https:\/\/mndn.de\/wp-content\/uploads\/2015\/08\/MNDN-skoove-website-ui-landing-page-design-tiled-1024x639.jpg 1024w\" sizes=\"(max-width: 1500px) 100vw, 1500px\" \/><\/a><p class=\"wp-caption-text\">Skoove Website Landing Page Design<\/p><\/div>\n\n\t\t<style type=\"text\/css\">\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 id='gallery-2' class='gallery galleryid-531 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:\/\/mndn.de\/wp-content\/uploads\/2015\/08\/MNDN-skoove-website-interface-landing-page-design-0-hero-shot.jpg'><img width=\"250\" height=\"250\" src=\"https:\/\/mndn.de\/wp-content\/uploads\/2015\/08\/MNDN-skoove-website-interface-landing-page-design-0-hero-shot-250x250.jpg\" class=\"attachment-thumbnail size-thumbnail\" alt=\"\" loading=\"lazy\" aria-describedby=\"gallery-2-819\" srcset=\"https:\/\/mndn.de\/wp-content\/uploads\/2015\/08\/MNDN-skoove-website-interface-landing-page-design-0-hero-shot-250x250.jpg 250w, https:\/\/mndn.de\/wp-content\/uploads\/2015\/08\/MNDN-skoove-website-interface-landing-page-design-0-hero-shot-400x400.jpg 400w, https:\/\/mndn.de\/wp-content\/uploads\/2015\/08\/MNDN-skoove-website-interface-landing-page-design-0-hero-shot-50x50.jpg 50w\" sizes=\"(max-width: 250px) 100vw, 250px\" \/><\/a>\n\t\t\t<\/dt>\n\t\t\t\t<dd class='wp-caption-text gallery-caption' id='gallery-2-819'>\n\t\t\t\tHero Shot\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:\/\/mndn.de\/wp-content\/uploads\/2015\/08\/MNDN-skoove-website-gui-landing-page-design-1-skoove-interface.jpg'><img width=\"250\" height=\"250\" src=\"https:\/\/mndn.de\/wp-content\/uploads\/2015\/08\/MNDN-skoove-website-gui-landing-page-design-1-skoove-interface-250x250.jpg\" class=\"attachment-thumbnail size-thumbnail\" alt=\"\" loading=\"lazy\" aria-describedby=\"gallery-2-820\" srcset=\"https:\/\/mndn.de\/wp-content\/uploads\/2015\/08\/MNDN-skoove-website-gui-landing-page-design-1-skoove-interface-250x250.jpg 250w, https:\/\/mndn.de\/wp-content\/uploads\/2015\/08\/MNDN-skoove-website-gui-landing-page-design-1-skoove-interface-400x400.jpg 400w, https:\/\/mndn.de\/wp-content\/uploads\/2015\/08\/MNDN-skoove-website-gui-landing-page-design-1-skoove-interface-50x50.jpg 50w\" sizes=\"(max-width: 250px) 100vw, 250px\" \/><\/a>\n\t\t\t<\/dt>\n\t\t\t\t<dd class='wp-caption-text gallery-caption' id='gallery-2-820'>\n\t\t\t\tIn-Use Shot\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:\/\/mndn.de\/wp-content\/uploads\/2015\/08\/MNDN-skoove-website-illustration-landing-page-design-2-berlin-mascot.jpg'><img width=\"250\" height=\"250\" src=\"https:\/\/mndn.de\/wp-content\/uploads\/2015\/08\/MNDN-skoove-website-illustration-landing-page-design-2-berlin-mascot-250x250.jpg\" class=\"attachment-thumbnail size-thumbnail\" alt=\"\" loading=\"lazy\" aria-describedby=\"gallery-2-821\" srcset=\"https:\/\/mndn.de\/wp-content\/uploads\/2015\/08\/MNDN-skoove-website-illustration-landing-page-design-2-berlin-mascot-250x250.jpg 250w, https:\/\/mndn.de\/wp-content\/uploads\/2015\/08\/MNDN-skoove-website-illustration-landing-page-design-2-berlin-mascot-400x400.jpg 400w, https:\/\/mndn.de\/wp-content\/uploads\/2015\/08\/MNDN-skoove-website-illustration-landing-page-design-2-berlin-mascot-50x50.jpg 50w\" sizes=\"(max-width: 250px) 100vw, 250px\" \/><\/a>\n\t\t\t<\/dt>\n\t\t\t\t<dd class='wp-caption-text gallery-caption' id='gallery-2-821'>\n\t\t\t\tBerlin Mascot Illustration\n\t\t\t\t<\/dd><\/dl><br style=\"clear: both\" \/>\n\t\t<\/div>\n\n<h2>R\u00e9sum\u00e9<\/h2>\n<p>This project is a great example for the fact that developing an interface does not just take place on the computer screen. Through constant exploration, iteration and intensive user testing, Skoove slowly developed its signature features and was able to mature into a user-friendly and market-ready product.<\/p>\n<p>Skoove has completed a very successful beta phase. The interface was further extended by Skoove\u2019s team, adding many new features. Skoove has now been officially released.<br \/>\n<a href=\"http:\/\/www.skoove.com\" target=\"_blank\">Try Skoove now!<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"Skoove is an online trainer for interactive piano lessons. Our task was to develop a User Interface (UI) for the project\u2019s most important counterpart. In addition, we were responsible for corporate branding and the website. Learning an instrument requires a student\u2019s full attention. We tackled this challenge with \u201cUser-Centered Design\u201d: all decisions regarding features and interactions were made from a user\u2019s perspective.","protected":false},"author":2,"featured_media":527,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[12],"tags":[],"acf":[],"_links":{"self":[{"href":"https:\/\/mndn.de\/en\/wp-json\/wp\/v2\/posts\/531"}],"collection":[{"href":"https:\/\/mndn.de\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mndn.de\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mndn.de\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/mndn.de\/en\/wp-json\/wp\/v2\/comments?post=531"}],"version-history":[{"count":8,"href":"https:\/\/mndn.de\/en\/wp-json\/wp\/v2\/posts\/531\/revisions"}],"predecessor-version":[{"id":675,"href":"https:\/\/mndn.de\/en\/wp-json\/wp\/v2\/posts\/531\/revisions\/675"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/mndn.de\/en\/wp-json\/wp\/v2\/media\/527"}],"wp:attachment":[{"href":"https:\/\/mndn.de\/en\/wp-json\/wp\/v2\/media?parent=531"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mndn.de\/en\/wp-json\/wp\/v2\/categories?post=531"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mndn.de\/en\/wp-json\/wp\/v2\/tags?post=531"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}