view more
v

About The Project

This was a small project done in completion of my HCI certificate. This project was for explicit practice in designing for multiple screen variations and use cases. The general task was to redesign a service that was lacking in responsiveness. In doing so, I created a design that could account for extreme ranges from mobile to wall.

For those who are not aware, Twitch.tv is the largest video-game streaming platform that’s out there. Its site is great on desktop and can be on mobile as well, if you have the app. However, having an app does not provide immunity from having a website being usable on mobile.

It should be known that this was a concept redesigning search and responsiveness and Twitch is not affiliated with it in a formal manner. However, I thought it was a very evident case of mutual discovery that, whilst completing the mockups for this during the time the certificate was in session, Twitch changed a significant portion of their site and search that reflected very closely with my own designs. That told me that we were on the right track but responsiveness has remained unchanged to my knowledge at the time of writing this.

Addressing Problems

We shall start by addressing the general ‘problem’ of how streams are displayed on site. They aren’t particularly a challenge until you attempt to make it responsive. Streams are currently displayed much like the rectangles you will see depicting them below: rectangular thumbnail with text underneath giving streamer name and stream title. This isn’t very practical for scaling, large and especially small, so a new solution was made. Much like Twitch’s actual mobile app, the new design displays the stream panels with the listed text information inside the panel, in front of the thumbnail. This improvement adds the needed scalability for smaller screens.

The problems with search have since been fixed in very similar ways to as they were proposed in this design. However, this paragraph will be discussing the problems with the now previous search.
Problems: No sorting options, Obscure hierarchy, Said hierarchy changed randomly in order to try and accommodate all on one page while only showing the many of each with most being irrelevant, The game being played was listed but not clickable like elsewhere on the site.

Paper Solutions

Since this was not a full project, there were not extensive write-ups to be done in drafting for sake of time. Brainstorming and paper framings were made but did not shoulder the burden of presenting a schematic of a site built from the ground up because the project was based on redesigning a site that is currently in use for the betterment of its responsiveness; assets were already largely available, the paper framing that needed to be done was navigational.

Desiging Search

This is the updated version of the would-be search that addresses the problems mentioned in the previous entries. It is made to now have a clear hierarchy that stays constant and provides the likely (likely since I have no data because I do not work at Twitch), at least from personal experience, solutions to the users search needs.

Wireframes

The top wireframe (Design 1 for mobile) was the original concept to run with. Following is easily the most used button on the site when you load up the home page (at least for myself) and I thought I needed to showcase it in such a way that reflected that, similar to how it is on the actual website. However, after further experimentation I arrived at design 2 determining it to be the superior navigation due to its variety and obvious recognition (no sub menu’s to hide behind). This was later changed, as is seen in the tablet wireframes and mockups of all the platforms, to include a profile aspect as well. The rest of the depicted wireframes are for tablet and laptop/desktop.

Phone, Tablet, & Laptop

These mockups represent what the final product would look like across all standard platforms. I will spare you the in-depth real-estate tour of them as I am sure you can see for yourself.

Something to note however, is how well the new panelling works across platforms. There aren’t any strange and subjectively poor looking text-spacings below the panel when you get down to mobile or tablet and, for those who follow large numbers of people, they can have more screen real-estate to find who they want to watch on desktop.

Watch & Wall

There were no formal wireframes of these because they were added to the project list when the assignment came into play. These were added and made after the mockups of the tri-mobile setup.

Wall was rather straight forward, at least with the limited scope of the project. Making use of more real estate worked out well with giving the user all the information we want to but wouldn’t on laptop for sake of claustrophobia. I would be interested in conducting studies on such a platform though; it could be interesting to see prime interactions for walls as well as navigation and gestures.

I was able to do a fair amount of exploration with that in watch mode as it turns out. However, I was more specifically referring to w/o watch in those statements. The apple watch version was made as an extension of the service’s accessory use, as most watch apps should be. By making it a remote to a stream, regardless of if its on laptop or wall, we can save the user time and create an environment for them to access content without looking for a mouse or remote.