{"id":71,"date":"2015-07-21T13:31:01","date_gmt":"2015-07-21T10:31:01","guid":{"rendered":"https:\/\/tubikstudio.com\/?p=71"},"modified":"2023-08-17T15:49:51","modified_gmt":"2023-08-17T15:49:51","slug":"case-study-echo-designing-uxui","status":"publish","type":"post","link":"https:\/\/tubikstudio.com\/blog\/case-study-echo-designing-uxui\/","title":{"rendered":"Case Study: Echo. UI\/UX Design for Music Application"},"content":{"rendered":"<p><span style=\"color: #333333;\">Today we are going to start the set of case studies about various projects and concepts Tubik Studio has worked on. A case study is a great way to share the experience and outline the issues essential to consider while working on projects of different kinds and aims.<\/span><\/p>\n<p><span style=\"color: #333333;\">This time we are going to look closer at the Echo project. You could have seen some stages and elements of this work in Dribbble shots by Sergey Valiukh, the head of the Tubik Studio team. Now it is high time we looked through the project in greater detail.<\/span><\/p>\n<h2><span style=\"color: #333333;\">Tools<\/span><\/h2>\n<p><span style=\"color: #333333;\">Pencil sketching, Adobe Illustrator, Adobe Photoshop, Adobe After Effects, Sketch 3.0, Pixate.<\/span><\/p>\n<h2><span style=\"color: #333333;\">Task<\/span><\/h2>\n<p><span style=\"color: #333333;\">The task at hand was very clear and at the same time quite broad: to create the social network enabling users to deal with music on their mobiles and other devices. According to this purpose, there were distinguished the following basic functions:<\/span><\/p>\n<ul>\n<li><span style=\"color: #333333;\">To download and synchronize media-files from other online platforms and social networks such as YouTube, SoundCloud, Spotify, etc.<\/span><\/li>\n<li><span style=\"color: #333333;\">To upload the files from the desktop library of media files<\/span><\/li>\n<li><span style=\"color: #333333;\">To generate playlists in a fast and easy way<\/span><\/li>\n<li><span style=\"color: #333333;\">To organize the stream in the image and manner of a radio station.<\/span><\/li>\n<\/ul>\n<p><span style=\"color: #333333;\">The author also considered the additional functions, one of which was to enable the simultaneous general streaming from several different devices, for example, when people gather at the party or anywhere they want to listen to music together.<\/span><\/p>\n<p><span style=\"color: #333333;\">Working on the task, the designer had to take into account two important pre-conditions:<\/span><\/p>\n<ul>\n<li><span style=\"color: #333333;\">High level of competition as there are a lot of already promoted and popular music services on the web and app sphere<\/span><\/li>\n<li><span style=\"color: #333333;\">The maximum possible level of adaptability and responsiveness of all the versions of the application that was expected to be used on all possible kinds of gadgets. It was vital to provide 100% adaptability of all the features in order to maintain a high usability level.<\/span><\/li>\n<\/ul>\n<h2><span style=\"color: #333333;\">Process<\/span><\/h2>\n<h2><span style=\"color: #333333;\">User Experience (UX)<\/span><\/h2>\n<p><span style=\"color: #333333;\">Music is an integral part of human life, but at the same time, that is not the sphere where people would like to make any additional efforts. For most listeners in most cases the music is where a person relaxes or, vice versa gets energy \u2014 not the place for hard work demanding elaborate skills. The wider is the target audience of the music service, the simpler and clearer it should be. Everything the user needs here is clear navigation and fast work. However, considering the number of competitors in this market, it\u2019s necessary to think also about something original in design so that the service can stand out from the crowd.<\/span><\/p>\n<p><span style=\"color: #333333;\">Taking all these issues into account, the designer started the work on the site from the research of existing products and creating the concept of user experience. The decision was made to begin with designing the mobile version which was supposed to be more widely used and simpler for the target users. The next stage of design was going to provide the implementation of the mobile version into the web.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-7676\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2015\/07\/echo-music-app-design.png\" alt=\"echo music app design\" width=\"1400\" height=\"1120\" srcset=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2015\/07\/echo-music-app-design.png 1400w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2015\/07\/echo-music-app-design-300x240.png 300w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2015\/07\/echo-music-app-design-768x614.png 768w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2015\/07\/echo-music-app-design-1024x819.png 1024w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2015\/07\/echo-music-app-design-150x120.png 150w\" sizes=\"auto, (max-width: 1400px) 100vw, 1400px\" \/><\/p>\n<p><span style=\"color: #333333;\"><em>Working out the screens<\/em><\/span><\/p>\n<p><span style=\"color: #333333;\">On the basis of the review and analysis of existing <a href=\"https:\/\/blog.tubikstudio.com\/social-network-design-ux-for-communication\/\">social networks<\/a>, the following screens were planned:<\/span><\/p>\n<ul>\n<li><span style=\"color: #333333;\">Launcher screens (educational steps <a href=\"https:\/\/blog.tubikstudio.com\/ux-design-how-to-use-animations-in-mobile-apps\/\">animation<\/a>)<\/span><\/li>\n<li><span style=\"color: #333333;\">Sign-in screen (including login, registration, password recovery)<\/span><\/li>\n<li><span style=\"color: #333333;\">User main screen (feed, profile, stream creation, audio files addition, search, slide menu)<\/span><\/li>\n<li><span style=\"color: #333333;\">The screen of settings and editing profile<\/span><\/li>\n<\/ul>\n<p><span style=\"color: #333333;\">Let\u2019s look into details of all the screens mentioned.<\/span><\/p>\n<p><span style=\"color: #333333;\"><strong>Launcher screens (educational steps animation)\/ Sign-in screen (including login, registration, password recovery)<\/strong><\/span><\/p>\n<p><span style=\"color: #333333;\">The launch of the application started with the slides which were animating while scrolling and the user got the basic description of the service. After the last slide, the sign-up\/sign-in screen appeared with the basic set of standard operations (e-mail \u2014 password \u2014 password recovery). The service was integrated into all widely used social networks so it provided direct logging in with the profiles on Facebook, Twitter, Google+ and so on. After registration, the application made possible to link up all the user\u2019s accounts in social networks to share the streams and see the friends\u2019 streams. Therefore, after the user signs up, he\/she is offered to follow the friends from other accounts or find new friends according to musical tastes.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-7677\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2015\/07\/UX_Profile-screens-music-app.png\" alt=\"UX Profile screens music app\" width=\"1400\" height=\"1120\" srcset=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2015\/07\/UX_Profile-screens-music-app.png 1400w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2015\/07\/UX_Profile-screens-music-app-300x240.png 300w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2015\/07\/UX_Profile-screens-music-app-768x614.png 768w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2015\/07\/UX_Profile-screens-music-app-1024x819.png 1024w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2015\/07\/UX_Profile-screens-music-app-150x120.png 150w\" sizes=\"auto, (max-width: 1400px) 100vw, 1400px\" \/><\/p>\n<p><span style=\"color: #333333;\"><strong>User main screen (feed, profile, stream creation, audio files addition, search, slide menu)<\/strong><\/span><\/p>\n<p><span style=\"color: #333333;\">The profile was designed to work in 3 different modes:<\/span><\/p>\n<ul>\n<li><span style=\"color: #333333;\">DJ Mode (Party Mode) \u2014 made possible to download audio files, create playlists as well as send invitations to listen to the playlists for the limited number of people.<\/span><\/li>\n<li><span style=\"color: #333333;\">Home Mode \u2014 made possible to play the songs from the playlist remotely on different devices within the radius of a room<\/span><\/li>\n<li><span style=\"color: #333333;\">Listener Mode \u2014 made possible to download and listen to both own and friends\u2019 playlists.<\/span><\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-7678\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2015\/07\/UX_Music_Feed-screen-music-app.png\" alt=\"UX_Music_Feed screen music app\" width=\"1400\" height=\"1120\" srcset=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2015\/07\/UX_Music_Feed-screen-music-app.png 1400w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2015\/07\/UX_Music_Feed-screen-music-app-300x240.png 300w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2015\/07\/UX_Music_Feed-screen-music-app-768x614.png 768w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2015\/07\/UX_Music_Feed-screen-music-app-1024x819.png 1024w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2015\/07\/UX_Music_Feed-screen-music-app-150x120.png 150w\" sizes=\"auto, (max-width: 1400px) 100vw, 1400px\" \/><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-7679\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2015\/07\/UX_Music_Feed_Extended-music-app-design.png\" alt=\"UX_Music_Feed_Extended music app design\" width=\"1400\" height=\"1120\" srcset=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2015\/07\/UX_Music_Feed_Extended-music-app-design.png 1400w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2015\/07\/UX_Music_Feed_Extended-music-app-design-300x240.png 300w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2015\/07\/UX_Music_Feed_Extended-music-app-design-768x614.png 768w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2015\/07\/UX_Music_Feed_Extended-music-app-design-1024x819.png 1024w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2015\/07\/UX_Music_Feed_Extended-music-app-design-150x120.png 150w\" sizes=\"auto, (max-width: 1400px) 100vw, 1400px\" \/><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-7680\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2015\/07\/UX_Player-music-app.png\" alt=\"ux player music app design\" width=\"1400\" height=\"1120\" srcset=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2015\/07\/UX_Player-music-app.png 1400w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2015\/07\/UX_Player-music-app-300x240.png 300w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2015\/07\/UX_Player-music-app-768x614.png 768w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2015\/07\/UX_Player-music-app-1024x819.png 1024w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2015\/07\/UX_Player-music-app-150x120.png 150w\" sizes=\"auto, (max-width: 1400px) 100vw, 1400px\" \/><\/p>\n<p><span style=\"color: #333333;\"><strong>Screen of settings and editing profile<\/strong><\/span><\/p>\n<p><span style=\"color: #333333;\">This screen contained standard settings: connect or disconnect with social networks, push notifications settings, changing the password, deactivation of the account, signing out.<\/span><\/p>\n<p><span style=\"color: #333333;\">Due to the fact that many screens were required and the convenient transition was needed, the designer chose to construct the application with the slide menu. The <a href=\"https:\/\/blog.tubikstudio.com\/ui-design-basic-types-of-buttons-in-user-interfaces\/\">hamburger button<\/a> on the left enabled opening the menu panel for the transition to different sections. Also, there was a list of users recommended for the following. These recommendations were based on musical tastes, location, circles of friendship, etc. In addition, there was a separate notifications screen that reflected the activity of the followers to the user\u2019s posts in the service or in social networks.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-7681\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2015\/07\/UX_Navigation_Menu-music-app.png\" alt=\"UX Navigation Menu music app\" width=\"1400\" height=\"1120\" srcset=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2015\/07\/UX_Navigation_Menu-music-app.png 1400w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2015\/07\/UX_Navigation_Menu-music-app-300x240.png 300w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2015\/07\/UX_Navigation_Menu-music-app-768x614.png 768w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2015\/07\/UX_Navigation_Menu-music-app-1024x819.png 1024w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2015\/07\/UX_Navigation_Menu-music-app-150x120.png 150w\" sizes=\"auto, (max-width: 1400px) 100vw, 1400px\" \/><\/p>\n<p><span style=\"color: #333333;\">In iPad version, the split-view was implemented. The sandwich menu and slide menu were set on the left edge of the screen. The size of the posts adjusted to the tablet.<\/span><\/p>\n<p><span style=\"color: #333333;\">In the mobile application, the difference between Android and iOS is that the design of the upper bar (navigation bar for iOS and an action bar for Android) has different functional abilities. In general, an action bar for Android, in addition to navigation, includes filters, sharing, data about the current screen. Considering these UI peculiarities of the action bar for Android, the content of slide menus was reflected identically in both versions as the acceptable controller for both operating systems in the aspect of mobile applications. For Android version, the design was completed according to the guides of material design so the structure of the slide menu was the same as for iOS but the appearance was different.<\/span><\/p>\n<p><span style=\"color: #333333;\">For the web version of the service, the designer used a typical structure when the header and slide menu duplicated the functionality of the application with alterations on the size of the desktop for the web-version. Therefore, there were more posts visible in the feed in case of adaptation of the mobile application to the web.<\/span><\/p>\n<p><span style=\"color: #333333;\">Everything mentioned above shows that the designer didn\u2019t make the attempt to experimenting and that was motivated by the desire to provide the highest possible usability and utility level. As it has already been outlined before, the application was created for fast and easy usage in everyday situations, so from the user experience standpoint, any experiments and extreme innovations in the typical scheme of social network could scare users, make them feel the application confusing and result in poor user experience.<\/span><\/p>\n<p><span style=\"color: #333333;\">So, the main area of designing something original to distinguish the application was UI.<\/span><\/p>\n<h2><span style=\"color: #333333;\">User Interface (UI)<\/span><\/h2>\n<p><span style=\"color: #333333;\">The Blur effect was taken as the basis: the bars with data or statements blurred the background. The following animation was used on the player screen: the basic background showed the artwork, which presented the album cover for the composition playing. The <a href=\"https:\/\/blog.tubikstudio.com\/light-and-darkness-in-ui-design-matter-of-choice\/\">background<\/a> of the screen was blurred with the round unblurred central part, around which the effect of the rotating playing record was created with typical visual details.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-7682\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2015\/07\/UI_Player-music-app-design.png\" alt=\"UI Player music app design\" width=\"1400\" height=\"1120\" srcset=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2015\/07\/UI_Player-music-app-design.png 1400w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2015\/07\/UI_Player-music-app-design-300x240.png 300w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2015\/07\/UI_Player-music-app-design-768x614.png 768w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2015\/07\/UI_Player-music-app-design-1024x819.png 1024w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2015\/07\/UI_Player-music-app-design-150x120.png 150w\" sizes=\"auto, (max-width: 1400px) 100vw, 1400px\" \/><\/p>\n<p><span style=\"color: #333333;\">The visual design of the screens was distinctly distinguished according to their functionality. The screens of entertaining character (feed, profile, navigation bar) were designed with a wide application of blur effect: it was dimmed out and the text data was presented in white color. However, a standard screen such as settings or profile editing were designed in a simple style with a light background and dark text.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-7683\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2015\/07\/UI-Navigation-Menu-Profile-music-app.png\" alt=\"UI Navigation Menu Profile music app\" width=\"1400\" height=\"1120\" srcset=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2015\/07\/UI-Navigation-Menu-Profile-music-app.png 1400w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2015\/07\/UI-Navigation-Menu-Profile-music-app-300x240.png 300w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2015\/07\/UI-Navigation-Menu-Profile-music-app-768x614.png 768w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2015\/07\/UI-Navigation-Menu-Profile-music-app-1024x819.png 1024w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2015\/07\/UI-Navigation-Menu-Profile-music-app-150x120.png 150w\" sizes=\"auto, (max-width: 1400px) 100vw, 1400px\" \/><\/p>\n<p><span style=\"color: #333333;\">The feed screen reflected the stream of friends and included the artwork being the album cover for the composition playing, the avatar, and name of the user whose post is playing, location, the name of the song and the playlist it is downloaded from, the number of likes, views, and online listening.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-7684\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2015\/07\/UI_iPad_Feed-music-app-design.png\" alt=\"UI iPad Feed music app design\" width=\"1400\" height=\"1120\" srcset=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2015\/07\/UI_iPad_Feed-music-app-design.png 1400w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2015\/07\/UI_iPad_Feed-music-app-design-300x240.png 300w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2015\/07\/UI_iPad_Feed-music-app-design-768x614.png 768w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2015\/07\/UI_iPad_Feed-music-app-design-1024x819.png 1024w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2015\/07\/UI_iPad_Feed-music-app-design-150x120.png 150w\" sizes=\"auto, (max-width: 1400px) 100vw, 1400px\" \/><\/p>\n<p><span style=\"color: #333333;\">One more screen designed here was extended feed screen. Tapping or clicking on the stream, the user could obtain extended data including all the information from the feed screen described above together with detailed review of the comments, opportunity to leave the comment, make a repost or share in any social network linked with the application.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-7685\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2015\/07\/UI_Feed_Extended_Feed-music-app-design.png\" alt=\"UI Feed Extended Feed music app design\" width=\"1400\" height=\"1120\" srcset=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2015\/07\/UI_Feed_Extended_Feed-music-app-design.png 1400w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2015\/07\/UI_Feed_Extended_Feed-music-app-design-300x240.png 300w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2015\/07\/UI_Feed_Extended_Feed-music-app-design-768x614.png 768w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2015\/07\/UI_Feed_Extended_Feed-music-app-design-1024x819.png 1024w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2015\/07\/UI_Feed_Extended_Feed-music-app-design-150x120.png 150w\" sizes=\"auto, (max-width: 1400px) 100vw, 1400px\" \/><\/p>\n<h2><span style=\"color: #333333;\">Redesign<\/span><\/h2>\n<p><span style=\"color: #333333;\">One of the most important stages while designing the UX\/UI of an application or website is its testing. Practice shows that sometimes ideas, which look brilliant on the first glance, turn out to be absolutely impractical for target users. That happened with the first version of the Echo project described above.<\/span><\/p>\n<p><span style=\"color: #333333;\">Having analyzed the results of user-testing and having worked with focus groups, the author obtained the information that the original design doesn\u2019t work as it was desired. The thing getting the most negative feedback from users was blur effect in extended feed screen. The screen looked dirty and the text seemed unreadable. Animation and non-standard effects demanded long loading that is unacceptable for such simple operations. The feed screen contained too little body of the stream with overloaded controllers whose functionality was not really essential on that screen.<\/span><\/p>\n<p><span style=\"color: #333333;\">So, on the basis of user feedback, there was made the decision to change the design of the screens. The solution found for them was the following: the blur effect was totally eliminated because its appearance in PSD was absolutely different from what was seen in real, especially low-resolution screens.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-7686\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2015\/07\/UI-v2-Navigation-Menu-Profile-music-app.png\" alt=\"UI v2 Navigation Menu Profile music app\" width=\"1400\" height=\"1120\" srcset=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2015\/07\/UI-v2-Navigation-Menu-Profile-music-app.png 1400w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2015\/07\/UI-v2-Navigation-Menu-Profile-music-app-300x240.png 300w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2015\/07\/UI-v2-Navigation-Menu-Profile-music-app-768x614.png 768w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2015\/07\/UI-v2-Navigation-Menu-Profile-music-app-1024x819.png 1024w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2015\/07\/UI-v2-Navigation-Menu-Profile-music-app-150x120.png 150w\" sizes=\"auto, (max-width: 1400px) 100vw, 1400px\" \/><\/p>\n<p><span style=\"color: #333333;\">To provide the maximum of cleanness and simplicity, all the screens were designed with a light background, elegant and laconic uniquely designed icons. The feed screen contained fewer data and the posts had a bigger size. Extended feed looked much simpler although saving the idea of animation.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-7687\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2015\/07\/UI_v_Feed_Extended_Feed-music-app-design.png\" alt=\"UI_v_Feed Extended Feed music app design\" width=\"1400\" height=\"1120\" srcset=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2015\/07\/UI_v_Feed_Extended_Feed-music-app-design.png 1400w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2015\/07\/UI_v_Feed_Extended_Feed-music-app-design-300x240.png 300w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2015\/07\/UI_v_Feed_Extended_Feed-music-app-design-768x614.png 768w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2015\/07\/UI_v_Feed_Extended_Feed-music-app-design-1024x819.png 1024w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2015\/07\/UI_v_Feed_Extended_Feed-music-app-design-150x120.png 150w\" sizes=\"auto, (max-width: 1400px) 100vw, 1400px\" \/><\/p>\n<p>&nbsp;<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-7688\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2015\/07\/UI_v2_Player_Transfer_Animation-music-app.gif\" alt=\"UI_v2_Player Transfer Animation music app\" width=\"800\" height=\"600\" \/><\/p>\n<p><span style=\"color: #333333;\">The transition from feed to extended feed was realized by tapping or clicking at the artwork on the feed screen: it was given in smaller size in feed and got bigger while transition proportionally to the whole screen and under it all the information about the post (the avatar and name of the user whose post is playing, location, the name of the song and the playlist it is downloaded from, the number of likes, views and online listening, detailed review of the comments, opportunity to leave the comment, make a repost or share in any social network linked with the application) was shown on the white background. To make it even more convenient, in the case of vertical scrolling of this screen the big image of the artwork hid into the navigation bar leaving the place for the content below.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-7689\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2015\/07\/UI_v2_Extended_Feed-music-app.gif\" alt=\"UI v2 Extended Feed music app\" width=\"800\" height=\"600\" \/><\/p>\n<p><span style=\"color: #333333;\">Web-version was simplified to the one-page site with the functionality of viewing the screens and profile.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-7690\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2015\/07\/UI_v2_Web_Feed-music-app-design.gif\" alt=\"UI_v2_Web_Feed music app design\" width=\"800\" height=\"600\" \/><\/p>\n<p><span style=\"color: #333333;\">Work on this project gave our team a valuable experience. It shows that modern UI\/UX designers should always consider user\u2019s needs and wishes that are vital in creating a successful experience and therefore provide a high level of desirability. Moreover, the Echo project also proved that a designer should always be ready to update or even redesign his work and this decision has to be based on real testing of the product.<\/span><\/p>\n<h2>More Design Case Studies<\/h2>\n<p><a href=\"https:\/\/blog.tubikstudio.com\/case-study-car-safety-mobile-app\/\">Pazi. UX and UI Design for Vehicle Safety Mobile App<\/a><\/p>\n<p><a href=\"https:\/\/blog.tubikstudio.com\/case-study-ux-design-finance-service\/\">CashMetrics. UX Design for Finance Management Service<\/a><\/p>\n<p><a href=\"https:\/\/blog.tubikstudio.com\/case-study-bitex-app-ux-design-for-stock-analysis-app\/\">Bitex. UX Design for Stock Analysis App<\/a><\/p>\n<p><a href=\"https:\/\/blog.tubikstudio.com\/case-study-inspora-brand-ui-design-virtual-stylist\/\">Inspora. Brand and UI Design for Virtual Stylist<\/a><\/p>\n<p><a href=\"https:\/\/blog.tubikstudio.com\/case-study-nature-encyclopedia-ui-design-for-education\/\">Nature Encyclopedia. UI Design for Education<\/a><\/p>\n<p><a href=\"https:\/\/blog.tubikstudio.com\/case-study-recipes-app-ux-design\/\">Perfect Recipes App. UX Design for Cooking and Shopping<\/a><\/p>\n<p><a href=\"https:\/\/blog.tubikstudio.com\/case-study-tasty-burger-ui-design-for-food-ordering-app\/\">Tasty Burger. UI Design for Food Ordering App<\/a><\/p>\n<p><a href=\"https:\/\/blog.tubikstudio.com\/case-study-slumber-mobile-ui-design-for-healthy-sleeping\/\">Slumber. Mobile UI Design for Healthy Sleeping<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>UI\/UX design case study by Tubik Studio on Echo project: user experience and user interface design for a musical social network and its adaptation for app\/web.<\/p>\n","protected":false},"author":3,"featured_media":7691,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[2,4,9],"tags":[261,479,319,482,322,491,331,502,336,515,344,533,345,20,357,47,365,57,417,100,418,147,419,151,447,212,457,233,464,237,468],"coauthors":[],"class_list":["post-71","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-animation","category-case_study","category-ui_ux","tag-interface-design","tag-usability","tag-mobile-app","tag-user-experience","tag-mobile-design","tag-user-interface","tag-mobile-ui","tag-ux","tag-motion-design","tag-uxui","tag-music","tag-web-design","tag-music-player","tag-app-design","tag-photoshop","tag-branding","tag-product-design","tag-case-study","tag-social-network","tag-design","tag-social-network-design","tag-design-studio","tag-social-network-user-interface","tag-design-tips","tag-tubik-studio","tag-graphic-design","tag-ui","tag-human-computer-interaction","tag-ui-design-case-study","tag-icons","tag-ui-design-process"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.7 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Case Study: Echo. UI\/UX Design for Music Application<\/title>\n<meta name=\"description\" content=\"UI\/UX design case study by Tubik Studio on Echo project: user experience and user interface design for a musical social network and its adaptation for app\/web.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/tubikstudio.com\/blog\/case-study-echo-designing-uxui\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Case Study: Echo. UI\/UX Design of Application\" \/>\n<meta property=\"og:description\" content=\"The case study on design of user experience and user interface for a musical social network. Adaptation of the concept for various devices. Analysis of the screens and considerations on the reasons for redesign.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/tubikstudio.com\/blog\/case-study-echo-designing-uxui\/\" \/>\n<meta property=\"og:site_name\" content=\"Tubik Blog: Articles About Design\" \/>\n<meta property=\"article:published_time\" content=\"2015-07-21T10:31:01+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-08-17T15:49:51+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2015\/07\/Case_Study_Echo-tubik-studio-design.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1500\" \/>\n\t<meta property=\"og:image:height\" content=\"1042\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Marina Yalanska\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Marina Yalanska\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"10 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/tubikstudio.com\/blog\/case-study-echo-designing-uxui\/\",\"url\":\"https:\/\/tubikstudio.com\/blog\/case-study-echo-designing-uxui\/\",\"name\":\"Case Study: Echo. UI\/UX Design for Music Application\",\"isPartOf\":{\"@id\":\"https:\/\/tubikstudio.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/tubikstudio.com\/blog\/case-study-echo-designing-uxui\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/tubikstudio.com\/blog\/case-study-echo-designing-uxui\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2015\/07\/Case_Study_Echo-tubik-studio-design.jpg\",\"datePublished\":\"2015-07-21T10:31:01+00:00\",\"dateModified\":\"2023-08-17T15:49:51+00:00\",\"author\":{\"@id\":\"https:\/\/tubikstudio.com\/blog\/#\/schema\/person\/320206b0076eb11ea0c0d4d17012c36f\"},\"description\":\"UI\/UX design case study by Tubik Studio on Echo project: user experience and user interface design for a musical social network and its adaptation for app\/web.\",\"breadcrumb\":{\"@id\":\"https:\/\/tubikstudio.com\/blog\/case-study-echo-designing-uxui\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/tubikstudio.com\/blog\/case-study-echo-designing-uxui\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/tubikstudio.com\/blog\/case-study-echo-designing-uxui\/#primaryimage\",\"url\":\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2015\/07\/Case_Study_Echo-tubik-studio-design.jpg\",\"contentUrl\":\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2015\/07\/Case_Study_Echo-tubik-studio-design.jpg\",\"width\":1500,\"height\":1042,\"caption\":\"Case Study Echo tubik studio design\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/tubikstudio.com\/blog\/case-study-echo-designing-uxui\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/tubikstudio.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Case Study: Echo. UI\/UX Design for Music Application\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/tubikstudio.com\/blog\/#website\",\"url\":\"https:\/\/tubikstudio.com\/blog\/\",\"name\":\"Tubik Blog: Articles About Design\",\"description\":\"Tubik Studio\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/tubikstudio.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/tubikstudio.com\/blog\/#\/schema\/person\/320206b0076eb11ea0c0d4d17012c36f\",\"name\":\"Marina Yalanska\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/tubikstudio.com\/blog\/#\/schema\/person\/image\/2ddde1c118fcf989ce8e73997a3909dd\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/630af235953a586b42ed17f9ea472b131bcde00719efc655984d63ca2078e7a2?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/630af235953a586b42ed17f9ea472b131bcde00719efc655984d63ca2078e7a2?s=96&d=mm&r=g\",\"caption\":\"Marina Yalanska\"},\"url\":\"https:\/\/tubikstudio.com\/blog\/author\/marina-yalanska\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Case Study: Echo. UI\/UX Design for Music Application","description":"UI\/UX design case study by Tubik Studio on Echo project: user experience and user interface design for a musical social network and its adaptation for app\/web.","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:\/\/tubikstudio.com\/blog\/case-study-echo-designing-uxui\/","og_locale":"en_US","og_type":"article","og_title":"Case Study: Echo. UI\/UX Design of Application","og_description":"The case study on design of user experience and user interface for a musical social network. Adaptation of the concept for various devices. Analysis of the screens and considerations on the reasons for redesign.","og_url":"https:\/\/tubikstudio.com\/blog\/case-study-echo-designing-uxui\/","og_site_name":"Tubik Blog: Articles About Design","article_published_time":"2015-07-21T10:31:01+00:00","article_modified_time":"2023-08-17T15:49:51+00:00","og_image":[{"width":1500,"height":1042,"url":"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2015\/07\/Case_Study_Echo-tubik-studio-design.jpg","type":"image\/jpeg"}],"author":"Marina Yalanska","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Marina Yalanska","Est. reading time":"10 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/tubikstudio.com\/blog\/case-study-echo-designing-uxui\/","url":"https:\/\/tubikstudio.com\/blog\/case-study-echo-designing-uxui\/","name":"Case Study: Echo. UI\/UX Design for Music Application","isPartOf":{"@id":"https:\/\/tubikstudio.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/tubikstudio.com\/blog\/case-study-echo-designing-uxui\/#primaryimage"},"image":{"@id":"https:\/\/tubikstudio.com\/blog\/case-study-echo-designing-uxui\/#primaryimage"},"thumbnailUrl":"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2015\/07\/Case_Study_Echo-tubik-studio-design.jpg","datePublished":"2015-07-21T10:31:01+00:00","dateModified":"2023-08-17T15:49:51+00:00","author":{"@id":"https:\/\/tubikstudio.com\/blog\/#\/schema\/person\/320206b0076eb11ea0c0d4d17012c36f"},"description":"UI\/UX design case study by Tubik Studio on Echo project: user experience and user interface design for a musical social network and its adaptation for app\/web.","breadcrumb":{"@id":"https:\/\/tubikstudio.com\/blog\/case-study-echo-designing-uxui\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/tubikstudio.com\/blog\/case-study-echo-designing-uxui\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/tubikstudio.com\/blog\/case-study-echo-designing-uxui\/#primaryimage","url":"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2015\/07\/Case_Study_Echo-tubik-studio-design.jpg","contentUrl":"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2015\/07\/Case_Study_Echo-tubik-studio-design.jpg","width":1500,"height":1042,"caption":"Case Study Echo tubik studio design"},{"@type":"BreadcrumbList","@id":"https:\/\/tubikstudio.com\/blog\/case-study-echo-designing-uxui\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/tubikstudio.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Case Study: Echo. UI\/UX Design for Music Application"}]},{"@type":"WebSite","@id":"https:\/\/tubikstudio.com\/blog\/#website","url":"https:\/\/tubikstudio.com\/blog\/","name":"Tubik Blog: Articles About Design","description":"Tubik Studio","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/tubikstudio.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/tubikstudio.com\/blog\/#\/schema\/person\/320206b0076eb11ea0c0d4d17012c36f","name":"Marina Yalanska","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/tubikstudio.com\/blog\/#\/schema\/person\/image\/2ddde1c118fcf989ce8e73997a3909dd","url":"https:\/\/secure.gravatar.com\/avatar\/630af235953a586b42ed17f9ea472b131bcde00719efc655984d63ca2078e7a2?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/630af235953a586b42ed17f9ea472b131bcde00719efc655984d63ca2078e7a2?s=96&d=mm&r=g","caption":"Marina Yalanska"},"url":"https:\/\/tubikstudio.com\/blog\/author\/marina-yalanska\/"}]}},"post_mailing_queue_ids":[],"_links":{"self":[{"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/posts\/71","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/comments?post=71"}],"version-history":[{"count":5,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/posts\/71\/revisions"}],"predecessor-version":[{"id":14821,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/posts\/71\/revisions\/14821"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/media\/7691"}],"wp:attachment":[{"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/media?parent=71"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/categories?post=71"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/tags?post=71"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/coauthors?post=71"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}