[Concept] Infuse 7UI

Hi again everyone!

Over the past few weeks I’ve been working on a brand-spanking-new concept of Infuse 7 for tvOS. I originally intended to just add this to the ongoing post, but the more I iterated on the design, the more I realized that this wasn’t just a few tweaks of the old mockup—it quickly became a big enough departure from the original concept to merit creating a new thread here since almost every aspect of it has been changed.

My original Infuse 7 mockup ended up being a radical departure from the Infuse we know and (mostly) love today. And while I still stand by that design, the more things I changed, the more I felt like I was taking away Infuse’s identity in favor of making it an Apple TV clone. On top of that, Infuse 7 was officially released! And for the most part, it looks pretty damn good. So for this new concept, I chose to focus on polishing what Infuse already has rather than completely reinventing the wheel.

Home

So: the new Home Screen! Rather than a choice between three styles for the Home Screen, this concept simplifies the landing page with a carousel of all your On Deck items, backdropped by a beautiful hero image, pulled from The Movie Database. Note that the background uses a textless image, while the backdrops in the carousel default to backdrops that have the actual title.

Scrolling down reveals an experience that’s pretty similar to what we have now, with rows like Recently Added, Unwatched, and Movie Genres. The only major change here is that I decided to use backdrops instead of posters entirely one the Home Screen to emphasize the sort of horizontality of this section. (Vertical posters show up everywhere else, though.)

The only new additions here are a brand new design for the genre row—which now use a larger, more prominent horizontal strip—and the addition of a new Network row which allows you to filter through your library by broadcast origin.

I really wanted to make each row feel visually distinct, and adapt the design to fit the content.

Movies

Similar to my previous concept, the goal for Movies was to create an place that allows you to easily navigate all of your movies across all of your sources in a single place—no more flipping around different parts of the app just to sort your movies. The new sidebar features a dedicated play and shuffle button, along with some handy filters to sort by genre, rating, etc. A dedicated filter bar comes in handy when surfacing recent, unwatched, or collected content without having to go back to the Home Screen. (I’m admittedly not entirely sold on the filter bar, so if I ever get around to redesigning Settings, I might make this an optional feature.)

After selecting a movie, you’re treated to a design that’s pretty similar to both the iOS concept I made and what Infuse already has to offer, so there shouldn’t be any major growing pains here. (Yes, I know the buttons are a bit odd—I think Infuse uses its own custom buttons, and I do plan on switching to those at a later date. So basically just pretend they look exactly like how they do now!)

Scrolling below this page you’ll now see two rows—one for trailers (pulled from TMDB) and one for cast and crew (also pulled from TMDB). Tapping on, say, Scarlett Johansson’s image will take you to a page of all the movies and tv shows in your library in which she appears (screenshot pending). Scroll even further and you’ll find some handy information about whatever video file you’re watching. This section is pretty bare-bones right now, but there is room to add even more file information here, if needed.

As far as the now playing screen goes, the only thing that’s changed since the last concept are the chapter thumbnails, which are now a bit larger thanks to the 16:9 aspect ratio.

TV Shows

The new TV Shows screen is effectively identical to the Movies screen to keep things consistent. The sidebar and filters are identical, so the only major addition here is the ability to view TV show collections, if available.

The only major change here is the new Up Next card, which shows up once the credits start to roll. Rather than waiting for your current episode to end, just tap on the card and the next episode starts playing. Again, the goal here was to get rid of a lot of clutter from the last mockup.

Playlists

I’d say the biggest change I made to this concept is for the playlist section! For this new version, I redid the entire design to keep things consistent between Movies, TV Shows, and Playlists. If you’re using Plex, the new landing page now pulls in the playlist cover art.

Clicking on the playlist brings you to a page that’s similar to the Movies and TV Show poster grid, with two major differences:

  1. The filter bar here sorts between the default playlist order, alphabetical order, and ordering by release year—no need to go into an entirely different screen to sort your playlists anymore.
  2. Again, if you’re using Plex, it’ll also surface the title and description of whatever playlist you have selected.

Wrapping up (for now)

For this new redesign, simplicity was a guiding principle: as previously mentioned, rather than radical changes, I decided instead to focus on small quality of life improvements that more closely align with Infuse’s current design philosophy. As such, a lot of what’s shown here isn’t drastic—just small things that hopefully make the Infuse experience a little better for both everyday and pro users. Looking towards the future, there are a few other things I’ll be working on fairly soon:

  • The poster grid does feel a bit cramped at the moment, so I think I’ll reduce the size of the thumbnails and increase the padding a little bit,
  • Unlike last time, I’m going to create some mockups for Library, Search, and Settings to make this design a little more comprehensive,
  • I need to figure out the filter bar situation, and whether or not to keep it,
  • I need to add a dedicated actor/actress page,
  • I need to add tv show trailers,
  • Maybe centering the custom logos above the buttons when selecting a movie or tv show? Not sure how that’ll look though,
  • When I finalized this draft, I didn’t have access to Infuse’s custom Favorites icons, but I’ll add them back to the Home Screen. They’ll look and function exactly the same as they do now, since I didn’t really see a need to change those.
  • One other thing I’m working on now is a more dynamic Home Screen experience through a few new “smart” rows: things like actor/actress collections, recently released movies/tv shows, maybe even a row that’ll automatically surfaces content by decades, complete with some snazzy graphics! Obviously, these rows would all be optional, so if you prefer a more straightforward experience, you can turn them off like any other row. I picture this as a sort of discovery section, giving new life to movies or shows that you may not have watched in a while.

As usual, this is a first draft, and feedback and things will likely change. I do like the more basic approach to this design, but it’s by no means perfect, and your feedback will be invaluable to determine what works, what doesn’t, and what really doesn’t. Let me know what you think!

18 Likes

Looks nice. This has everything I actually suggested in one form or another.

  1. Movie/Show Logos and if missing just use text just like Hulu does.
  2. Backdrops with text on them so text below them is optional.
  3. Browse shows by Network

I also like the Chapter Thumbnails, Trailers, and the other subtle details.

This is close to what I envision infuse getting to eventually.

Keep up the good work.

2 Likes

Is there any news about redesign of Infuse?

Infuse 7 for tvOS Concept 2.0

Long time no see everyone! Over the past few days I’ve been working on a fairly comprehensive update to this Infuse 7 concept and am now comfortable sharing some of the major changes I’ve made. The goals here were pretty simple:

  • Update and refine the original concept UI,
  • Resolve some to-do list items, and
  • Continue to create a UI that feels both unique to Infuse and native to tvOS

Fulfilling these goals meant doing a top-to-bottom refresh of the original concept—since a lot has changed, let’s just dive into it!

Home Screen
The new Home Screen is very similar to the previous one, with a few tweaks here and there to keep content visually consistent. Besides consolidating all my screenshots into one page, I also tweaked the landing page by adding a custom title (pulled from TMDB) and description of what you’re watching. As you scroll, the title and metadata change.

For this update, I decided to focus on a Home Screen that prioritizes content discovery and dynamic media over static information. To this end, I created a few new Home Screen rows called Smart Rows that update periodically based on new content in your library, data from The Movie Database, user input, etc. Below you’ll find a few Smart Row ideas to start:

  • New on Infuse: This Smart Row consolidates “Recent Added Movies” and “Recently Added TV Shows” into a single row. I chose this approach because it matches how streaming services surface new content in a single row while saving valuable Home Screen space for other Smart Rows. If you want, this row can be un-merged via settings.
  • What You Missed: This Smart Row does the same thing that the current Unwatched row does—surfaces all your content marked as unwatched.
  • Filter Row (Movies By Genre): This Smart Row allows you to quickly scrub through your library by genre. (The one on here is for movies, but your source can be either movies or tv shows.) It’s visually distinct thanks to its larger cards, and the genres appear alphabetically.
  • Networks: This Smart Row allows you to quickly filter your library by network/studio.
  • Filter Row (Movies By Decade): This Smart Row allows you to quickly scrub through your library by decade. (The one on here is for movies, but your source can be either movies or tv shows.) The row is arranged alphabetically, so swiping to the left would bring you to “The 1980s” and swiping to the right would bring you to “The 2000s”.
  • Playlist Row (Just Gals Being Pals): This Smart Row allows you to pin a playlist in your library to your Home Screen, sorted by however it’s sorted in your library.
  • Trending Row: This Smart Row cross-references what’s currently popular on The Movie Database with your library and surfaces content that people are currently watching. When what’s popular changes, this row changes.
  • Collections Row (Marvel Cinematic Universe): This Smart Row allows you to pin a collection in your library to your Home Screen, sorted by however it’s sorted in your library.
  • Studio Spotlight (A24): This Smart Row dynamically surfaces movies and tv shows from studios found in your library. In this case, all movies released by A24 are on display.
  • Binge-Worthy Dramas: This Smart Row dynamically surfaces tv shows in your library tagged as Drama. It’s sorted randomly, so you’ll see new content every now and again.

I’m sure there are other kinds of Smart Rows worth considering, so should this be implemented, it might be fun to have a way to vote on new Smart Rows right here in the forums. Some additional notes:

  • For Smart Rows based on collections and playlists, the descriptions are either taken from Plex or entered manually.
  • Obviously, these rows can be rearranged and/or disabled if desired. Your Home Screen, your rules.
  • If legally possible, it might also feel more native (and kinda fun) to call these Genius Rows instead of Smart Rows.

Meet the New Sidebar
Let’s say you’re scrolling through your movies one day and you find yourself in the mood for a classic 90s flick—how do you view your movies just from that decade? Currently, you would need to return to the Home Screen, select Library, then Movies, then By Release Date, then 1990s. While this method works, it’s kind of cumbersome and not very intuitive.

Enter the new sidebar.

The new sidebar allows you to filter, sort, and refine through your movies and tv shows right from a single screen. Quickly find recently added content, scroll through all your collections (including a brand new collections view!), and even match specific criteria through brand-new Filter and Sort screens. All of the current filter and sorting options from Infuse are available in this concept, alongside a few more additions I thought would be beneficial.

Quick note: You know that new Smart Row on the Home Screen that features movies grouped by decade? If you click on the “Explore” button, you’ll be taken to the appropriate filter screen. So clicking “Explore” on “The 1990s” card on your Home Screen will bring you to the exact same page you see above. And that applies to the Genre cards too!

Content View Tweaks

While there haven’t been many major changes here since last time, there are a few things worth pointing out:

  • The media control buttons at the top now match the ones already available in Infuse to the best of my ability. Just assume that they’re identical to the ones we already have now!
  • Both Movies and TV Shows now come with a row dedicated to trailers, extras, featurettes, and the like. These are YouTube links pulled directly from The Movie Database; selecting any of them will take you to the corresponding video in the YouTube app. Not as good as native, but better than nothing.
    The TV Shows section now has a more prominent season selector button that matches the buttons used throughout the UI. Additionally, when hovering over a single episode, the description at the top changes to matches the selected episode.
  • I included a “Music from this Movie” section to surface all of the songs that appear in the film, pulled from TuneFind.com. Selecting a song will take you to the corresponding track on Apple Music/iTunes. (Note: I haven’t added it yet, but tv show episodes will also have this!)
  • Finally, I prettied up the additional movie details at the bottom of the screen and included a few new pieces of information to take advantage of the extra space.

Playlist View Tweaks

The Playlists page now uses the same exact UI layout as the rest of Infuse, including full-size posters, and a playlist screen identical to the one used for viewing collections. (I think the sidebar probably needs to be tweaked to suit the content here, but for now, just assume it’s content-appropriate.)

Now Playing Tweaks

To keep things simple, the old Up Next card has been reduced to a simple prompt to play the next episode. This button automatically appears 10 to 15 seconds before the end of a tv show video file.

Wrapping up (for now)

For this new update, the guiding principles were define and refine: define a consistent UI that feels both native to tvOS but unique to Infuse, and refine my mockups by addressing outstanding issues, fleshing out workflows, and resolving items on my to-do list. Below you’ll find an updated to-do list with everything I’ll be working on next:

  • Integrate TuneFind into the tv show view
  • Mock up Library, Search, and Settings,
  • Determine if the new sidebar works for Playlists
  • Did somebody say X-Ray? :eyes:
  • Add folder view support

As usual, feedback is always welcomed. This is still by no means perfect, so figuring out what works, what doesn’t, and what really doesn’t is always important. Let me know what you think!

13 Likes

Great job! Firecore should finally start working on a new UI…

2 Likes

This is :fire:.

1 Like

I see no support for Folders. Ex) under the Movies folder, there are subfolders for specific categories like, Chic Flix, Anaimation, Westerns, James Bond, etc… After that the remaining movies that aren’t in one of those subfolders are still located in the Movies folder. The display in grid mode should show the folders followed by the rest.

Thanks for the heads up about missing folder support! I’ll add it to the to-do list.

Is this your personal concept art to inspire firecore or something official they are working towards?

Just wondering if I should be looking for this to drop sometime or if its not officially in the pipeline for development.

Never mind, just saw this was on the “Lounge” board, I came in through the email summary and it didn’t distinguish, and I got all excited this was on the way.

1 Like

This is just a personal project :slight_smile:

2 Likes

This looks epic and would be the true Plex competitor.

I do find Collections are used more than Playlists for both TV and Movies nowadays. TV Collections such as Popular Shows, Trending, Network Specific.

Be awesome for Devs to work on this next.

1 Like

This looks fantastic, I tend to be of the mind that the UI is the one thing holding Infuse back. It’s not “bad” but little quality of life improvements would make it untouchable.

3 Likes

Nifty.

Where is this datum sourced? Does TMDB track this?

The Movie Database does in fact track a television show’s Network! If you check out TMDB’s page for Hawkeye, for instance, on the right you can see the network displayed as Disney+.

1 Like

Cool! Good to know - thanks!

@zeyegffn Out of curiosity, what do you use to make these mock-ups? Looks great, BTW. I’d love to see even half of these features implemented.

Amazing work @zeyegffn ! Some things you added to your concept I think are really possible with the current Infuse technology. For example, they added the “Today’s Picks” row recently, which is a random based row. They could use the same tech to create “Studio spotlight”, just filtering one studio everyday that has 5 or more movies on the library or something like that to create a nice filled row.

Also, I think your concept touch in some key points of Infuse problems. The interface is too simple, we scroll down and everything is the same. I really like the idea of having different size and formats to different rows.

Amazing work! Hopefully it gives some insights for the Firecore team.

Infuse Concept 2.1: Folder Support
If you prefer seeing your content as its structured on your drive, the new View filter on the sidebar now provides two options for viewing your content: a Gallery view (default, seen above), and a Folder view which are in the screenshots below:

1 Like

Infuse Concept 2.1: A New Now Playing Screen

Here are some changes that refresh the now playing screen’s UI to closely match tvOS 15’s new design standards:

2 Likes

I use a program called Sketch for pretty much every mock-up I make! It’s a pretty powerful tool and I can’t recommend it enough.