The series of case studies showcasing the many ideas and projects developed by Tubik Studio will begin today. A case study is an excellent tool for disseminating knowledge and outlining the key points to keep in mind when working on projects of all shapes and sizes.
Our focus will be on the Echo project this time around. Team leader Sergey Valiukh of Tubik Studio posted some Dribbble images of the project’s progress and components, so you might have seen them in action. It is time that we took a closer look at the project.
web design company in Toronto delivering top-notch web design services tailored to amplify your online presence. As a leading team of dedicated web design company in mississauga, we pride ourselves on crafting stunning, user-centric websites that resonate with your audience and elevate your brand’s digital footprint.
Tools
Scribbling with a pencil, Adobe Photoshop, Adobe Illustrator, Adobe After Effects, Sketch 3.0, Pixate.
Task
The mission was crystal clear and wide-ranging: build the social network that lets people manage their music on their phones and other devices. For this reason, the following essential roles were defined:
If you want to sync and download media files from sites like Spotify, SoundCloud, YouTube, etc., you can do it here.
- For the purpose of transferring media files stored in a desktop library
- In order to quickly and easily create playlists
- In order to structure the feed like a radio station.
One of the supplementary features that the author thought about was making it possible for multiple devices to stream music together in real time, which would be great for gatherings where people want to listen to music, like parties.
While working on the project, the designer had to make sure two things were in place:
Rivalry is fierce due to the abundance of well-established and widely used music streaming services in the digital and mobile marketplaces.
The highest degree of responsiveness and adaptability achievable across all versions of the app designed to be used on all conceivable types of devices. Keeping the usability level high necessitated providing complete feature adaptability.
Process
Experience for Users (UX)
People would rather not put more energy into the music industry, despite the fact that music is fundamental to human existence. Music is more of a place to unwind or get energized for most listeners than a place to put in long hours and show off their talents. The simpler and more straightforward the music service is, the more people it should be able to reach. Simple, quick tasks are all that are required of the user. There are a lot of services out there, so coming up with a unique design that stands out from the crowd is essential, especially given the amount of competitors in this industry.
With these considerations in mind, the designer set out to build the site by investigating similar products and developing a theory of user experience. Since the mobile version was expected to be more popular and easier to use, it was decided to start by designing it. We were planning to incorporate the mobile version into the web in the next design stage.
Application
The application began with animated, scrolling slides that provided a brief overview of the service to the user. The fundamental set of standard operations (email—password—password recovery) appeared on the sign-up/sign-in screen after the last slide. The service allowed users to log in directly from their Facebook, Twitter, Google+, and other popular social media accounts because it was integrated with all of these platforms. The app allowed users to connect all of their social media accounts after registration, so they could watch each other’s streams and share their own. After a user registers, they are given the option to follow friends from other accounts or discover new friends based on their musical preferences.
Configuration and profile editing screen
Here you could find the usual options: social network connections (both active and inactive), push notification settings, password change, account deactivation, and sign-out.
In order to accommodate the necessary number of screens and provide a smooth transition, the designer opted to build the application using a slide menu. To access different sections, click the hamburger button on the left. This will open the menu panel. In addition, the following users were suggested. Location, musical preferences, social networks, etc. were the basis for these suggestions. Furthermore, a dedicated notifications screen displayed the activity of the user’s followers in relation to their posts within the service or on social media.
Interface with Users (UI)
The basis was the Blur effect, which caused the background to become blurry when data or statements were displayed in bars. The player screen animated as follows: the album cover art served as the background, and the music was playing in the foreground. Typical visual details were used to create the illusion of a spinning record as the background of the screen was blurred, with the central part remaining unblurred.
The screens’ visual designs were clearly differentiated based on their functions. The blur effect was extensively used in the design of the screens of entertaining characters (feed, profile, navigation bar). The screens were dimmed and the text data was presented in white. A simple style with a light background and dark text was used for standard screens like settings or profile editing.
Redesign
When creating a website or app, testing is a crucial part of the user experience and interface design process. What appears like a fantastic idea at first glance may end up being completely impractical for the intended audience, as experience has shown. That was the case with the aforementioned initial Echo project version.
After working with focus groups and analyzing user-testing results, the author learned that the original design didn’t work as intended. The blur effect in the extended feed screen was the feature that users were most critical of. It appeared as though the screen was dirty and the text was unintelligible. Unacceptably lengthy loading times were required for such basic operations due to animation and non-standard effects. Overloaded controls whose functions were superfluous on the feed screen, and there wasn’t nearly enough of the stream itself.
A decision was made to alter the screen design based on user feedback. Their problem was solved when they realized that the blur effect looked completely different in PSD than it did in reality, particularly on low-resolution screens. So, they removed it entirely.
