Interaction in Practice
PROBLEM STATEMENT
This project aims to create an intuitive and user-friendly 10-foot interface for a proprietary streaming device and application akin to Chromecast or FireTV stick. The emphasis is on responsive design to ensure optimal user interaction from approximately 10 feet away, considering the typical couch and television setup.
As the Interaction Designer (IxD), the focus is on the content-level view, mainly when a user has selected a category. Two key views, a grid view, and a single-column view, are explored in wireframes. These views aim to provide users with a seamless and engaging experience while navigating content.
Users can quickly scan and select content within a category in the grid view, optimizing visual recognition. The single-column view offers a detailed and focused exploration of individual items, catering to users who prefer a more immersive experience.
Project goals
Designing a User-Friendly 10-foot Interface for a Streaming Device
- Grid View
- Single Column View
- Prototype of the Controller
Project Duration
Concept
Lo-Fi Wireframes
Hi-Fi Prototype
Tools Used
Approach
Throughout the design process, the team is mindful of not reinventing the wheel unnecessarily. While adhering to familiar patterns and conventions, the decisions are carefully considered and driven by the goal of enhancing user experience. At the same time, recognizing the importance of creativity with purpose and avoiding the trap of being creative for its own sake. The ultimate goal is to ensure that users can effortlessly discover and enjoy studio-specific content, enhancing the overall satisfaction with the streaming device and application.
Low-Fi prototype development for controller and user interface and alpha-version user testing.
The project involves the execution of a low-fi, low-cost prototype for the controller based on initial sketches. The primary objective is to prepare for alpha-version user testing of the interface. The low-fi prototype emphasizes cost-effectiveness and simplicity. Whether transitioning from sketches or starting fresh, the team will ensure a tangible representation of the controller's design. While working with limited technology at this stage, the prototype must facilitate interaction with the interface, considering the absence of developed technology.
ACTIONS
Lo-Fi wireframes were created for the controller and user interface.
For the user interface: Include annotation on your organization of the wireframes and how it works for the user. Include a note on any patterns or principles utilized in your design process.
For the controller: Explain and rationalize the layout and functionality, how it is usable and an enjoyable experience for the user, and how it makes navigation and control of the device easier or intuitive.
Primary Remote: The arrow pad triggers provide a “page up” and “page down” control while the bumpers tabs between content views. The remote allows for ease of operation in the dark. The arrow pad limits the navigation to four directions making the natural grid for TV UI. The user can hide any streaming service from the guide without deleting the app or wading through menus by holding down the menu button. Voice control has been added to the interface to be able to turn on/off the TV. The buttons are placed in a primary location for thumb movements and are easily reachable with minimum movement. I chose the left-to-right reading mental model for the volume down button being on the left and the volume up button on the right. The buttons on the top and bottom of the circular button form a triangle to help with mobility for users who have larger fingers.
Primary Remote: Having only the necessary keys on the remote makes it more user-friendly creating less confusion. Its sleek design fits right into the hand of the user. Different textures on the remote offer feelings-specific memories when touching the remote, so the user doesn’t have to look at the remote to figure out where. Using the remote creates an enjoyable experience from textures to the ease of navigation. The buttons are grouped together in the center of the remote to offer a focal point for the user. The remote was created using on-screen menus to solve the basic human desire to remain on the couch. The play/pause is also the select button. The remote has a clear hierarchy based on things people want to do the most, taking out complexity with too many buttons. This offers behavioral design patterns as context-specific depending on the user’s needs. In addition, the remote offers different textural controls to allow the user to identify the buttons without looking at the remote.
Secondary Remote: User’s can use this for easier mobility if they can’t grip a remote or have issues pushing buttons, and hand gestures. The TV will be able to use voice and hand gestures. Using voice controls offers aesthetic simplicity. This acts as a secondary remote for the hand gestures while still housing the button so user’s can get use to the gesture’s without limitation or causing frustration.
Secondary Remote: The secondary remote buttons are designed with a metaphor affordance, like a clock, so users that are blind can easily find where they are in the navigation. The secondary remote offers ease of use by providing the same buttons as the primary remote while encouraging learning gestures.The signifiers for the control are universal symbols and offer consistency and metaphor affordances. It allows the user to know what CTA the user is doing without reading a manual to form a conceptual model. Cultural and design constraints must be considered for Middle Eastern interfaces and remote controls.
TESTING
Feedback
The UX team gave feedback and collaborated on the interface wireframe to ensure it was well-organized and functional with a clear content hierarchy. The controller prototype was well-reasoned, with thoughtful controller layout and functionality. The annotations provided a user-centered rationale to explain the functionality and content organization.
design
Wireframes
Hi-Fi wireframes were created based on the feedback from the team. Various inexpensive options will be explored to simulate the desired functionalities, such as touch capacity and motion sensing. These options aim to provide a hands-on experience for users during alpha-version testing, even without advanced technological features.
RESULTS
Ideate
The user testing plan simulates realistic interactions between the controller and the interface. The team will strategically incorporate methods to gather valuable feedback and insights. Despite the low-tech nature of the prototype, it will effectively serve as a tool for assessing the initial user experience and identifying areas for improvement.
The team aims to validate design decisions, enhance usability, and iteratively refine the controller's interface by employing this low-fi prototype in alpha-version testing. This cost-effective and practical approach ensures that user feedback is incorporated early in the development process, paving the way for a more refined and user-centric final product.
TESTING
User Testing
To determine critical areas of what the users will be doing when testing both the remote and interface are needed before proceeding to a higher-fidelity mock-up.
To determine critical areas of what the users will be doing when testing both the remote and interface are needed before proceeding to a higher-fidelity mock-up.
Using a card sort template to prioritize the remotes and user interface information architecture. The team will generate multiple ideas for different concepts to test with the target audience. In addition, using a card-sorting template will help the team learn the company audience’s preferences while gathering quantitative and qualitative feedback before the remote is hooked up to the interface.
The team’s recommendation for testing is an in-person moderated test where someone on the team will be present to provide guidance and instructions during the test. In addition, the team highly recommends using in-person because the secondary remote is geared towards people with mobility issues.
To gather quantitative and qualitative data based on the usability test, the team will run A/B testing on the button and body functionality of the remote.
The team is looking for tools that help with the user testing process and provide enough insights to inform the design. Afterward, the team will decide which design tools best suit our needs. Then, when the prototype is ready to move into the next testing phase, the team will look into tools that help uncover a wide variety of usability insights, such as Maze, Lookback, or UXTweak.
LESSONS LEARNED
This was my first UX research project. It was a nerve-wracking yet rewarding experience. The affinity diagram felt overwhelming at first, but once diving into the responses became less overwhelming overtime. The importance of daily meetings became evident as they played a crucial role in the project's success, fostering a strong bond with my teammates. The project underscored the significance of user research anchored in understanding an individual's core motivations for travel, accommodation booking, and loyalty programs. This valuable experience has provided key insights, and I eagerly anticipate applying the same user-centric approach in future research endeavors.