{"id":6283,"date":"2023-03-24T17:20:00","date_gmt":"2023-03-24T17:20:00","guid":{"rendered":"https:\/\/digm.drexel.edu\/uxid\/?p=6283"},"modified":"2024-06-04T13:07:13","modified_gmt":"2024-06-04T13:07:13","slug":"omni","status":"publish","type":"post","link":"https:\/\/philsinatra.net\/branches\/uxid\/2023\/03\/24\/omni\/","title":{"rendered":"Omni"},"content":{"rendered":"\n<h1><strong>Overview<\/strong><\/h1>\n\n\n\n<p class=\"c2\"><span class=\"c0\">Omni is a music discovery app based on the relational similarity between artists. This product aims to help users find new music by displaying their favorite artists&#8217; influences and similar musicians. After searching for an artist, the options that Omni provides would effectively allow users to move forward or backward throughout the lineage of the searched artist. <\/span><\/p>\n\n\n\n<p class=\"c2\"><span class=\"c0\">Our team consisted of: <\/span><\/p>\n\n\n\n<ul class=\"c7 lst-kix_30xp3p4mvred-0 start\"><li><span class=\"c0\">Ty Drake &#8211; Project Management \/ UI Design<\/span> <\/li><li><span class=\"c0\">Kyle Dolphin &#8211; Front\/Backend Development<\/span> <\/li><li><span class=\"c0\">Christine Yim &#8211; UX Design <\/span><\/li><li><span class=\"c0\">Bryant Lu &#8211; Content Management <\/span><\/li><\/ul>\n\n\n\n<h1><span class=\"c4\"><strong>Context and Challenge<\/strong><\/span><\/h1>\n\n\n\n<p class=\"c2\"><span class=\"c0\">Omni looks to tackle the challenge of music discovery through the exploration of musical lineage. While there are many tools within the music discovery realm, there are very few that explore the aspect of music ancestry. Across history, music artists have continually influenced each other, and many genres have an underlying historical connection that binds artists together. Omni looks to bring that historical thread into an interactive experience that users can use to discover new artists, both past and present. <\/span><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" width=\"1999\" height=\"1385\" src=\"https:\/\/digm.drexel.edu\/uxid\/wp-content\/uploads\/2024\/04\/image3.jpg\" alt=\"\" class=\"wp-image-6285\" title=\"\" srcset=\"https:\/\/philsinatra.net\/branches\/uxid\/wp-content\/uploads\/2024\/04\/image3.jpg 1999w, https:\/\/philsinatra.net\/branches\/uxid\/wp-content\/uploads\/2024\/04\/image3-300x208.jpg 300w, https:\/\/philsinatra.net\/branches\/uxid\/wp-content\/uploads\/2024\/04\/image3-1024x709.jpg 1024w, https:\/\/philsinatra.net\/branches\/uxid\/wp-content\/uploads\/2024\/04\/image3-768x532.jpg 768w, https:\/\/philsinatra.net\/branches\/uxid\/wp-content\/uploads\/2024\/04\/image3-1536x1064.jpg 1536w, https:\/\/philsinatra.net\/branches\/uxid\/wp-content\/uploads\/2024\/04\/image3-1440x998.jpg 1440w\" sizes=\"(max-width: 1999px) 100vw, 1999px\" \/><\/figure>\n\n\n\n<p class=\"c2\"><span class=\"c0\">Over the course of ~20 weeks, we researched, designed, tested, and developed a minimum viable product desktop web-application experience. For Omni, we had four main goals that we were targeting to demonstrate the product: <\/span><\/p>\n\n\n\n<ul class=\"c7 lst-kix_rs63zpou6bss-0 start\"><li class=\"c1 li-bullet-0\"><span class=\"c0\">Ability to search for any artist<\/span><\/li><li class=\"c1 li-bullet-0\"><span class=\"c0\">Creating a network web of other related artists<\/span><\/li><li class=\"c1 li-bullet-0\"><span class=\"c0\">Expand this web by interacting with other artists<\/span><\/li><li class=\"c1 li-bullet-0\"><span class=\"c0\">Ability to view the overview of each artist, including each artist\u2019s top songs, as well as their discography, which would link to the appropriate Spotify links for each song, album, etc. <\/span><\/li><\/ul>\n\n\n\n<h1><span class=\"c4\"><strong>Research &amp; Process<\/strong><\/span><\/h1>\n\n\n\n<p class=\"c2\"><span class=\"c0\">We began by conducting a round of product discovery &amp; concept testing with users to gauge their level of interest in the proposed product. This step helped us understand our potential users and what they wanted from a tool like Omni. Some of the key takeaways that we found are: <\/span><\/p>\n\n\n\n<ul class=\"c7 lst-kix_r82a0udtn19h-0 start\"><li class=\"c1 li-bullet-0\"><span>People are <\/span><span class=\"c5\">trying <\/span><span class=\"c0\">to find new music, but the perceived effort prevent many from doing so<\/span><\/li><li class=\"c1 li-bullet-0\"><span class=\"c0\">Users prefer to find newer, modern artists, however, certain genres (such as soul\/funk or subsections of hip-hop) bias towards historical acts<\/span><\/li><li class=\"c1 li-bullet-0\"><span class=\"c0\">The \u201cMost Popular\u201d is utilized frequently by users when listening to new artists<\/span><\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" width=\"1999\" height=\"1385\" src=\"https:\/\/digm.drexel.edu\/uxid\/wp-content\/uploads\/2024\/04\/image2.jpg\" alt=\"\" class=\"wp-image-6286\" title=\"\" srcset=\"https:\/\/philsinatra.net\/branches\/uxid\/wp-content\/uploads\/2024\/04\/image2.jpg 1999w, https:\/\/philsinatra.net\/branches\/uxid\/wp-content\/uploads\/2024\/04\/image2-300x208.jpg 300w, https:\/\/philsinatra.net\/branches\/uxid\/wp-content\/uploads\/2024\/04\/image2-1024x709.jpg 1024w, https:\/\/philsinatra.net\/branches\/uxid\/wp-content\/uploads\/2024\/04\/image2-768x532.jpg 768w, https:\/\/philsinatra.net\/branches\/uxid\/wp-content\/uploads\/2024\/04\/image2-1536x1064.jpg 1536w, https:\/\/philsinatra.net\/branches\/uxid\/wp-content\/uploads\/2024\/04\/image2-1440x998.jpg 1440w\" sizes=\"(max-width: 1999px) 100vw, 1999px\" \/><\/figure>\n\n\n\n<p class=\"c2\"><span class=\"c0\">We utilized A\/B testing with users throughout the several rounds of testing in order to make validated decisions throughout the design process. While many small tweaks were made to the design throughout this process, there were several significant changes that were shaped by the user testing results. <\/span><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" width=\"1999\" height=\"1386\" src=\"https:\/\/digm.drexel.edu\/uxid\/wp-content\/uploads\/2024\/04\/image6.jpg\" alt=\"\" class=\"wp-image-6287\" title=\"\" srcset=\"https:\/\/philsinatra.net\/branches\/uxid\/wp-content\/uploads\/2024\/04\/image6.jpg 1999w, https:\/\/philsinatra.net\/branches\/uxid\/wp-content\/uploads\/2024\/04\/image6-300x208.jpg 300w, https:\/\/philsinatra.net\/branches\/uxid\/wp-content\/uploads\/2024\/04\/image6-1024x710.jpg 1024w, https:\/\/philsinatra.net\/branches\/uxid\/wp-content\/uploads\/2024\/04\/image6-768x532.jpg 768w, https:\/\/philsinatra.net\/branches\/uxid\/wp-content\/uploads\/2024\/04\/image6-1536x1065.jpg 1536w, https:\/\/philsinatra.net\/branches\/uxid\/wp-content\/uploads\/2024\/04\/image6-1440x998.jpg 1440w\" sizes=\"(max-width: 1999px) 100vw, 1999px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" width=\"1999\" height=\"1386\" src=\"https:\/\/digm.drexel.edu\/uxid\/wp-content\/uploads\/2024\/04\/image5.jpg\" alt=\"\" class=\"wp-image-6288\" title=\"\" srcset=\"https:\/\/philsinatra.net\/branches\/uxid\/wp-content\/uploads\/2024\/04\/image5.jpg 1999w, https:\/\/philsinatra.net\/branches\/uxid\/wp-content\/uploads\/2024\/04\/image5-300x208.jpg 300w, https:\/\/philsinatra.net\/branches\/uxid\/wp-content\/uploads\/2024\/04\/image5-1024x710.jpg 1024w, https:\/\/philsinatra.net\/branches\/uxid\/wp-content\/uploads\/2024\/04\/image5-768x532.jpg 768w, https:\/\/philsinatra.net\/branches\/uxid\/wp-content\/uploads\/2024\/04\/image5-1536x1065.jpg 1536w, https:\/\/philsinatra.net\/branches\/uxid\/wp-content\/uploads\/2024\/04\/image5-1440x998.jpg 1440w\" sizes=\"(max-width: 1999px) 100vw, 1999px\" \/><\/figure>\n\n\n\n<p class=\"c2\"><span class=\"c0\">The biggest design challenge was how to represent the \u201cInfluences, Similar, and Influenced\u201d options that are key to the concept of Omni. Since comparable applications had few similar functions for reference, we heavily relied on user feedback for inspiration in developing this component. We tested this component with various sets of icons, text placement, and tooltips in an effort to make this as clear as possible. Even with these changes, there are still improvements that could be made if we had additional time to continue testing. <\/span><\/p>\n\n\n\n<h1><span class=\"c4\"><strong>Solution<\/strong><\/span><\/h1>\n\n\n\n<p class=\"c2\"><span>Omni is meant to make finding new music an easier and more enjoyable experience. We wanted to ensure that the artists are the focus of the product, and accessing their information is never more than a few clicks away. Although there are a wealth of features and functions that could be added to Omni, we felt it was important to keep the whole flow as simple as possible for this MVP iteration. <\/span><\/p>\n\n\n\n<p class=\"c2\"><span class=\"c0\">Music is the main focus of Omni, and we wanted the aesthetics to match the feeling that music can give. \u201cRelaxing, calming, entertaining, energizing,\u201d were all words that were used to describe music by the users we spoke to. While \u201ccalming\u201d and \u201cenergizing\u201d may seem contradictory, we tried to design the interface to potentially tap into both feelings through the use of complementary blues and oranges, subtle motion, and depth of focus. <\/span><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" width=\"1999\" height=\"1385\" src=\"https:\/\/digm.drexel.edu\/uxid\/wp-content\/uploads\/2024\/04\/image1.jpg\" alt=\"\" class=\"wp-image-6289\" title=\"\" srcset=\"https:\/\/philsinatra.net\/branches\/uxid\/wp-content\/uploads\/2024\/04\/image1.jpg 1999w, https:\/\/philsinatra.net\/branches\/uxid\/wp-content\/uploads\/2024\/04\/image1-300x208.jpg 300w, https:\/\/philsinatra.net\/branches\/uxid\/wp-content\/uploads\/2024\/04\/image1-1024x709.jpg 1024w, https:\/\/philsinatra.net\/branches\/uxid\/wp-content\/uploads\/2024\/04\/image1-768x532.jpg 768w, https:\/\/philsinatra.net\/branches\/uxid\/wp-content\/uploads\/2024\/04\/image1-1536x1064.jpg 1536w, https:\/\/philsinatra.net\/branches\/uxid\/wp-content\/uploads\/2024\/04\/image1-1440x998.jpg 1440w\" sizes=\"(max-width: 1999px) 100vw, 1999px\" \/><\/figure>\n\n\n\n<p class=\"c2\"><span class=\"c0\">We had initially planned on incorporating multiple data sources in order to display the relationships between artists, however, due to time constraints, we decided to use the Spotify API as the sole data source for Omni. While this may not produce the most accurate results, it allowed us to demonstrate the core concepts of the product without overcomplicating the backend systems. <\/span><\/p>\n\n\n\n<h1><span class=\"c4\"><strong>Results<\/strong><\/span><\/h1>\n\n\n\n<p class=\"c2\"><span class=\"c0\">Although we did not manage to execute the development of every goal that was set out, we managed to implement most of the fundamental concepts necessary to demonstrate Omni. We had set some lofty goals for the project and were unfortunately unable to reach all of them within the timeframe provided. However these shortcomings have taught us a lot from this experience. <\/span><\/p>\n\n\n\n<p class=\"c2\"><span class=\"c0\">For example, more time would be allocated to planning the development phase of the project. We had four main goals that we wanted to hit for development: searching for any artist, creating a network of related artists, the ability to expand this network, and viewing individual artist\u2019s discography information. We were able to execute each of these goals apart from the expanding network. Since we were working with a new framework with d3.js, development on certain features took longer than was initially planned. This resulted in some features getting cut for time, as well as not having the time to refine certain aspects of the experience to match the prototypes. <\/span><\/p>\n\n\n\n<p class=\"c2\"><span class=\"c0\">More time would be dedicated to the testing phase of the project as well. Although we had several rounds of design testing, we were unable to get equivalent feedback through usability testing with the live product due to the tight timeline required for development. <\/span><\/p>\n\n\n\n<p class=\"c2\"><span>However, if development were to continue on Omni, we would be in a great place to continue researching, designing, and developing refinements to the experience as well as adding additional functionality. <\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Overview Omni is a music discovery app based on the relational similarity between artists. This product aims to help users find new music by displaying their favorite artists&#8217; influences and similar musicians. After searching for an artist, the options that Omni provides would effectively allow users to move forward or &hellip;<\/p>\n","protected":false},"author":12,"featured_media":6364,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[9,19],"tags":[20],"_links":{"self":[{"href":"https:\/\/philsinatra.net\/branches\/uxid\/wp-json\/wp\/v2\/posts\/6283"}],"collection":[{"href":"https:\/\/philsinatra.net\/branches\/uxid\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/philsinatra.net\/branches\/uxid\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/philsinatra.net\/branches\/uxid\/wp-json\/wp\/v2\/users\/12"}],"replies":[{"embeddable":true,"href":"https:\/\/philsinatra.net\/branches\/uxid\/wp-json\/wp\/v2\/comments?post=6283"}],"version-history":[{"count":13,"href":"https:\/\/philsinatra.net\/branches\/uxid\/wp-json\/wp\/v2\/posts\/6283\/revisions"}],"predecessor-version":[{"id":6369,"href":"https:\/\/philsinatra.net\/branches\/uxid\/wp-json\/wp\/v2\/posts\/6283\/revisions\/6369"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/philsinatra.net\/branches\/uxid\/wp-json\/wp\/v2\/media\/6364"}],"wp:attachment":[{"href":"https:\/\/philsinatra.net\/branches\/uxid\/wp-json\/wp\/v2\/media?parent=6283"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/philsinatra.net\/branches\/uxid\/wp-json\/wp\/v2\/categories?post=6283"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/philsinatra.net\/branches\/uxid\/wp-json\/wp\/v2\/tags?post=6283"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}