The original concept, proposed by Craig Blagg, focuses on machine learning: a website capable of showing the most-popular content users submit. The self-learning system records how users interact with the site’s UI, then runs an algorithm that scores each type of user interaction accordingly. The most popular activities are reflected in the final display.
I continued with this creative direction and re-assessed the system logic: It easily became overly sophisticated due to time constraints. Not only because intelligent interaction tracking is tricky, but also some more research must be conducted for a commonly agreed scoring algorithm.
I didn’t have a good estimate for how much time would be needed to create the machine-learning part, so the UX designer, art director, and I discussed a different strategy to make the site fun with some outstanding machine-learning features.
The Perfect Musics section is a good example of machine-learning but with an entertaining outcome. The user submits his favorite song from SoundCloud, and it’s broadcasted to other site visitors. Depending on how long each person listens to the same song, the site’s back-end determines its popularity and stores the song in the database for new visitors to hear later.
To easily aggregate the content users can submit, the site utilizes a full range of third-party APIs the resources would come from. It is a robust and interesting collage of Tweets, Instagrams, Flickr photos, YouTube, SoundCloud, Giphy, or single quotes, all representing the best content chosen by users.
The submission process is instantaneous and straightforward. The user only needs to grab the link to their favorite content on these social networks and submit it through a form. Interactivities (like clicking “like” or the share buttons) are also sent as a single payload by WebSocket, making UI updates responsively according to the results of machine learning from the back-end.
As it’s called "The Best Web Experience", I felt there should be some mandatory treatments of the graphic details.
Subtle motion for the backgrounds, leveraged CSS 3D transforms.