Genres+ Smart TV App
About Company
Genre's+ is a new, lightweight studio-specific proprietary streaming device and application (similar to Chromecast or Roku). The app has a unique genre selector emphasis and innovative remote controller features.
Role
As the interaction designer, my job was to plan out, design, and test various interfaces to establish how users would navigate the service through a set of inputs.
I would need to create designs and layouts for whatever category or option the user might select. As a part of a team of designers, I also got to share, collaborate, critique, and communicate my work with peers.
The Challenge
Normally, I am used to creating designs for desktop and mobile device applications. This was an excellent challenge for me to learn how to design screen layouts and interactions for a completely unique device type: a TV monitor and remote.
It was important that I focus on planning for a responsive design that would be user-friendly to interact with from approximately 10 feet away (about the distance from a couch to a television).
Project Constraints
Lack of standard screen sizes and resolutions
A large information base of films and TV shows that need to be digestible from a distance
A user base with multiple layout preferences
Responsibilities
Interaction Design
Sketching and Wireframing
Design Patterns and Layout Implementation
Responsive Design
Peer Review Sessions
Rapid Prototyping and Testing
High-Fidelity Mockup Design
Tools
Miro
Slack
Pen & Paper
Figma & FigJam
Process
To structure my workflow for this project, I followed the classic double-diamond process. The idea behind this method is to break your work up into two major phases. In the first phase (or diamond), you are trying to make sure you are designing the right product that fits the user's needs. In the second phase, you are seeking to make sure you are designing the product right in a way that successfully satisfies that need or problem.
Discover
Understanding the Problem
For this design prompt challenge, the target user who the product was to be designed for was me. As a result, I would need to build this product design around how I would use this product as the consumer. Below were the pain points I noted for myself in considering what I would be looking for in a streaming service.
Pain Points
I like to browse titles by genre. Many competing services do not prioritize this.
I like a more condensed view of titles, but some of my friends prefer a more expanded view.
Any time I grab a remote, I don’t like the wait time for the service to boot up.
Define
Prioritized Solutions
Based on these preferences, I laid out the following design tenets that would encompass both the screen layout design as well as the design for the remote controller prototype.
Design Tenets
Design must include a genre selector that is prioritized within the visual hierarchy of the page.
✔️
Design must prominently feature a resource for changing the display layout for the pages.
✔️
Smart TV technology must feature some type of innovation that accounts for the slow start speeds for the streaming service.
✔️
Develop
Mid-fidelity Wireframes
With the target user and design tenets for the minimum viable product laid out, I got to work making an array of wireframes for the various pages and started sketching some ideas for the controller. Below showcases some of the resulting full-length wireframes I came up with, giving a sense of the different homepage views as well as genre subcategory displays. Each listed title needed to somehow incorporate the name of the film or TV show, the title description, the run time, the year of release, and its community five-star rating.
Sketch and Iterate
The controller needed to be light, familiar, and intelligent for use with the streaming service. I started creating sketches that erred on over-simplicity and worked my way up in adding complexities as I iterated on my designs.
Peer Review and Iteration
I presented my materials to my fellow designers to get their impressions on navigating the platform. I included a heavy amount of annotations within my documents so that they could have an extensive understanding of the context and features of using the device. Though my work was thorough and well-received, I received a wealth of feedback for opportunities to improve my designs.
App Adjustments
Replaced the words in the menu bar with icons for visual consistency between the two layout options
Transferred the visual design of the genre selector from the grid view to also be displayed in the single column view as well
Added slide selectors to the auto-rotating carousel for accessibility considerations
Controller Adjustments
Added grooves to the sides of the controller for ergonomic comfort
Added standard navigation controls to empower the user (looking back, this was really a silly thing for me to leave out, even in my initial sketches)
Moved some controls to sit closer to the center of the device so the user does not have to adjust their grip
Responsive Design
There was a lot of work to be done in applying the adjustments, but they were well worth it. Below are the final layouts I made for the two different views at full length. The cut-off for the bottom edge of the screen sits right beneath the bottom of the genre selector section.
Condensed Grid View
Expanded Single Column View
Personal Challenge
At this point in the process, the project requirements were officially met and the project technically ended here. However, I knew I hadn’t reached the end of the design process I had been working off of.
So, I gave myself a personal challenge to take these files from mid-fidelity to high-fidelity, polished prototypes. All work beyond this point, I did on my own time with my own resources.
Deliver
High-Fidelity Mockups
At this time, I am in the process of finishing up the high-fidelity mockup files for this project. Be sure to check back in here soon to see more of the final design. In the meantime, below shows how the polished homepage would look on a TV, with the user having reached the second genre category option in the navigation.
Final Paper Prototype
I did not have the resources of a production facility or even a 3D printer to create a working remote controller prototype. So, I had to settle for a paper prototype. Below shows the final design of the TV controller for the Genres+ service.
One of the innovative features that it offers is a sensor in the side grooves of the controller. If it senses a sustained handgrip, it will automatically turn on the TV service. This solved my frustration with boot-up wait times by starting the process earlier by automation than the start time of having pressed the power button. Of course, not every user would appreciate this feature, so it is one that can be opted out of in the streaming service settings.
Outcomes
This project was truly unique for me. Although I didn’t know much about smart TV app design, I applied what I knew from designing desktop apps and learned everything I could about the unique challenges of TV design. Below are some of the things that came out of this process that I will hang on to for future projects.
Design peer feedback is not a personal attack on your designs. It may feel like that at times, but in most cases, I learned that it is usually quite the opposite. My fellow designers loved my effort and the quality of my work. I grew in my understanding that their feedback was to only push me to get my designs to reach their full potential.
Practice makes perfect. As a UX professional, learning lo-fi and streamlined prototyping skills can be extremely valuable. Holding loosely to my designs and changing them often helped me to understand this. As you gain experience and practice, you will become a sharper and more efficient designer.