Hulu: Wireframing The User Experience

As I’ve found in my pre-work studies, probably the most crucial concepts in UX is flow and interaction design. The concept of flow is something that is already expected when using an app or webpage; we only truly notice flow when it’s obstructed or or disjointed. And what’s a proper flow with out proper interaction design to facilitate your process

By using wireframes, we can discover where the obstructions are and better improve the flow of the user experience and tweak the interaction design.

Challenge

I was tasked with reverse engineering an app of my choosing and show the flow of using the app in question with wireframes. My app of choice is Hulu, as I use it almost everyday.

Sequence & Lo-Fi Sketches

For my task in the app, I wanted to showcase the steps in choosing a movie to watch; from the home page to the play button. In this I wanted to test how well the flow works with such a wide variety of viewing options that Hulu has to offer.

The flow to finding and playing the film would be as follows:

• Find and select the “Search” button
• Select “Movie” category from list
• Select ‘Popular” to sort your list by current popular films
• Pick a film of your interest with provided list
• Play film from selected film screen

This is illustrated in the lo-fi wireframes below:

I wanted to keep the process as straight forward as possible, so as to better showcase the flow between the screens as clearly as possible. This was interesting to me in the sense that I’ve never truly thought about the steps it takes to achieving a task in an app, and now I had to view it with a critical eye.

Mid-Fi Wireframes & Comparisons

With the lo-fi wireframes complete, I gave them more life on Sketch with the wireframe kit I was provided with.

Since I’ve only hand drawn lo-fi wireframes, this provided much better clarity to the flow and an idea of how the user interface is taken in to account when creating an app.

To take the process a step further I created an interactive prototype in InVision for testing.

Final Thoughts

In all, this challenge really brought in to perspective how apps flow and the process to which they function at the planning level. It was also great practice in making wireframes both hand drawn and with sketch.