Media Streaming
Parent company Mozilla was looking to expand their Firefox web browser brand to offer a media streaming app for home TV and mobile devices. The project involved using their existing brand guidelines to create an interface that adhered to these standards and offered a positive experience for users to enjoy media viewing at home or on the go.
“There’s no place like home.”
Now Playing
Scope of Work
User Experience
Interface Design
Brand Adherence
Tools Used
Figma
Adobe Photoshop
Discovery & Development
The first task was to research and define the Firefox brand. Mozilla describes their brand goals for Firefox, saying “To even have a seat at the table, our products have to perform as well as everything else out there, and meet users’ felt needs.” So prioritizing functionality along with user experience was going to be most important.
The aesthetic and personality of the Firefox brand is warm, modern and bold. They describe their voice as “open and kind” and their mission is to “partner, collaborate, educate and inform.” I felt that the Firefox brand was forward-thinking with a goal to improve life with technology for their users.
Having established the Firefox brand identity, I began to research existing streaming service interfaces. I ideated on my own experiences with media streaming and what works well but also what doesn’t. It was important to consider that the mobile app would be touch screen functional while the TV app would need to function with a remote. Likewise, the viewing distance for the TV app would significantly farther then for the mobile app.
Planning the Interface
Considering my research and ideation, I began sketching basic layouts. The project scope called for prototypes that included a home screen with user flow to search and select a show to play. My sketches evolved into wireframes, focusing first on mobile design and translated that to a TV interface.
I identified some key features to include that would improve the user’s experience and interaction with the app.
Suggested movies/shows the viewer might like based on previous viewing
Suggested movies/shows based on current events, seasons, etc.
Hero with featured movie/show based on new releases or popularity
Ability to like or favorite movies/shows
Auto-suggested features based on search entries
Initial Design
First Mockup
I combined elements the wireframes I did to create a low fidelity home screen that I used begin to plan the aesthetic. Using the brand guidelines for colors and typography, I moved to full mockups for both the TV and mobile app. The screens show a user’s flow for searching for a show, making adjustments for mobile versus remote interactions with the screen. For example, the keyboard for the TV app is designed to work with the arrow keys on a remote versus the standard iOS keyboard for a mobile device.
Refinements
Reviewing my work, the most significant revision was to create a bit more hierarchy in the typography, especially in the mobile version. I adjusted the scale and weight of the type slightly and replaced the dummy text with actual copy. I then prototyped the screens to show the user flow in action.
Final Design
The delivered interfaces encompass user-centered design principles and functionality as a top priority. I successfully implemented Firefox’s design standards to create interfaces that fit the brand’s aesthetic and goals. Scroll down to see the prototype of the TV app in action.
Reflection
The scope of this project was only to design for these few concept screens, so there is a lot of opportunity to expand on these interfaces to accommodate a full app. I enjoyed designing within the perimeters of Firefox’s style guide, though it is also challenging to stick to the guidelines at times as well.