Welcome to U play3D.
U play3D is an online, cross-browser compatible, 3d music streaming website. You can create custom playlists using your favourite songs or discover new artists or songs from your playback history. The project is completely open source, you can clone it using the following command:
$ git clone https://github.com/colin-dumitru/icer.git
Update 09-06-2013: Final touches
For our last update, we want to mention that thr results from our usability tests were very promising. Apart from some minor issues, which were resolved with some minor changes to the application, the users found that after completing a few tasks, they were able to accommodate very easily with the general workflow of the application.
As for final resources, we've created a basic user guide for both the desktop version of the application, as well as for the mobile version, both of which can be found below. Additionally, a general report of all the application functionality and evolution, which can be found below. We've also added a report describing in summary how we managed to troubleshoot and fix various accessibility issues in the application.
The changelog for this week includes:
- Rearranged some items and labels to make them more intuitive to the user.
- Finished mobile radio section.
- Changed how the song menu is displayed for songs in the global playlist bar.
- Added automatic redirection to mobile version for mobile devices.
- Many bug fixes.
Update 05-06-2013: Usability tests
Apart from some minor issues, the general implementation of the project is complete. All that remains is to conduct some usability tests and make alterations to the user interface according to the results. To help us in our goal, we have created a few usability tests which cover almost all features of the desktop website.
The changelog for this week includes:
- Fixed some issues with the custom search option on the radio section.
- Added add to playlists functionality for charts section.
- Added additional slides to the tutorial.
- Fixed some data display issues with the charts section.
- A temporary version of the radio section for mobile.
Update 27-05-2013: Usability and finishing touches
As the implementation of the project is nearing completion, we started to move focus towards usability and performance improvements.
The first thing we addressed regarding performance was the general animation smoothness. As the application uses 3D elements, they are quite performance intensive and generate very jittery animations on low end machines. We've tried to correct this behaviour by moving away from JQuery animations and towards CSS3 transitions and 3d transformations. This has had a very big impact on the general smoothness of the application and has made the whole experience much better for a lot of users. A full technical report on how we managed to achieve better performance can be found below.
As for usability, we've made a lot of minor and incremental changes to our UI based on user feedback. The two biggest and most notable changes are to the UI color scheme and a reduction in information density to the search section.
We've decided to go for a tone neutral color scheme, with a lot of desaturated colors to be able to help those which cannot distinguish easily between color hues (the contrast is achieved using brightness levels as opposed to color hues). While researching the color scheme, we've found that most of the users we've asked, seem to lean towards a blue-tinted color scheme (usually not the first option, but the most common amongst second and third options).
We've also decided to reduce the general information density of the application. While 3d pages do provide the added bonus that you can see more information on the screen, we've found that users have a hard time trying to focus on a particular section which interests them, as they are overloaded with unneeded information. This is why we've decided, that for the search section, similar songs should only be visible when hovering over the desired track.
The changelog for this week includes:
- General performance improvements.
- New color scheme.
- Modified search functionality to display similar songs on hover.
- Reordered some icons for search and playlists to make them less confusing.
- All radio criteria now work.
- History now uses real data.
- Search for mobile now displaying options for a song when sliding the song to the left.
- Completed playback for mobile web-site.
Update 07-05-2013: Mobile and Tablet Version
We recently found ourselves with a partially working version of the project, enough to test performance on both desktop and mobile devices. And it wasn't good. Due to the high information density of the website, with information shown which is not necessarily needed immediately (background and side pages), the pages on mobile devices were rendered really slowly. Combining this with 3D animations made in CSS3, the project as it stands now is virtually unusable on tablets and mobile phones.
This is why we decided, that instead of heavily optimizing the current project, we should build a separate, more minimalistic version of the web-side for mobile devices only. Not only will it be slimmed down in eye-candy, but also in features which are not often used or needed. The new mobile web-site will only include a simplified version of the search page (with searching only by song title), playlist management and the radio (and obviously playback functionality).
The changelog for this week includes:
- Completed Search Functionality, including dynamic loading of results and hidden scroll-bars.
- Improved playback matching between LastFM and SoundCloud.
- Playlist managing, including adding/removing songs and playlists, playback and search from a playlist.
- Charts generation for day/week/month/year
- Mobile version now supports only a partially implemented search functionality.
- Many bug fixes and optimizations.
Update 27-04-2013: New Development Project and More
Due to ongoing development and feature changes, the current project is becoming increasingly unstable. This is why a new development project was created which showcases all ongoing changes (the link can be found below). The old prototype link remains at the same location, and will not be changed from now on.
The changelog for this week includes:
- Playback functionality with play/pause, next, previous, volume control and seeking.
- Partial playlist loading and creation.
- Partial search functionality, with searching by song name (with similar songs) and by artist
As a special note to the playback functionality, we are currently using the SoundCloud api for streaming service, and the LastFM search api for searching and information gathering. This is why, on some occasions, when playing a certain song, the playback might fail as the song was not found in the SoundCloud database but it exist on LastFM. A visual queue is used to disable songs which cannot be played.
Update 12-04-2013: Prototype
An fully functional version of the prototype is available, which exemplifies all future features to be released with the final version of the website.
Update 11-04-2013: StoryBoard, Design Patterns and QOC
This weeks update includes StoryBoard design for all Wireframe models presented in the last question, the list of design patterns used in all primary and secondary ideas and a few QOC examples used to create the Wireframe ideas, and subsequently the prototype.
Update 04-04-2013: Wireframe
We've finalized our four main ideas which will be used when developing the Icer application: one primary, the basis of the new application, and three secondary which will serve as backup ideas. Below, you will find all the resources available for all ideas, and this subsection will be updated once more resources are created.
Update 25-01-2013: Personas
A few personas were created to better exemplify the target audience for the application.