Interface & Controller

Step 1: Design and Post

For this class assignment, I was tasked with designing a Studio-specific proprietary streaming device and application, similar to a ChromeCast or FireTV stick. My role was to plan both the interface and how users would navigate it through inputs, using responsive design principles.

Goals:
This assignment allowed me to:

• Explore how interaction, layout, interface, and input contribute to product development

• Refine my lo-fi and streamlined prototyping skills

• Practice sharing, collaborating, critiquing, and iterating on feedback with classmates

Design Iteration Process:

1. Research & Inspiration
   I began by researching existing streaming devices like ChromeCast and FireTV to understand common patterns. I evaluated their grid and list views, taking note of what worked well and what could be improved, particularly from a distance of 10 feet.

2. Initial Wireframes
   In the first iteration, I sketched rough wireframes for the two views:

   • Grid View: I aimed to display more content at once, focusing on clarity and legibility from a distance. I included thumbnails, titles, user ratings, running time, and the year of release.

   • Single Column View: This expanded on the metadata, incorporating larger visuals and more detailed information, like summaries, cast/crew details, and similar content recommendations.

3. Prototype Inputs: Initial Controller Design
   I started by brainstorming basic controls such as navigation buttons (up, down, left, right) and playback control. I also considered more advanced functionalities, like voice command integration, drawing inspiration from modern remotes that include touch surfaces or motion sensors.

4. Feedback and Refinement
   After creating the wireframes and an initial controller prototype, I shared my work with classmates for feedback. Some of the suggestions included:

   • Making the navigational buttons larger and more prominent, as they would be used frequently

   • Revising the grid view to improve visual hierarchy, ensuring that the most important content (like thumbnails and titles) stood out

5. Iteration and Refinement
   I incorporated the feedback by:

   • Adjusting the layout in the grid view to improve readability by increasing the size of key elements (thumbnails and titles).

   • Reorganizing the button layout on the controller to prioritize usability, placing the navigation buttons higher up and enlarging them based on the expected frequency of use.

   • Adding contextual cues for easier menu navigation, such as highlighting selected content more clearly in the grid view.

6. Final Annotations and Rationale
   I documented my design rationale at each stage. For the wireframes, I explained how the organization of information aimed to create a seamless user experience. For the controller, I detailed why certain buttons were prioritized and how these decisions contributed to ease of use, ensuring an intuitive, enjoyable interaction with the device.

7. Next Steps
   The final step involved posting my progress for peer review and iterating based on additional feedback. I remained open to refining the design further, focusing on ensuring that the interface and controller worked cohesively to offer an optimal user experience.