VideOrder

Background

I have several projects that I've come up with in order to practice, one such project being what I've termed "VideOrder." It was originally called "Convergence," so you might see that referenced.

Empathize + Define

The premise behind VideOrder is that, basically, there are more streaming services/sites/apps than is reasonable for someone to manage on their own. The goal of VideOrder is to merge all these libraries into one place so that users can easily find the content they are looking for.

Assumptions

  • There are many streaming services available.
  • Many people subscribe to streaming services.
  • Streaming services are accessed on individual platforms.
  • Video content must be managed inside the respective streaming service.
  • There are untold quantities and types of video content available.
  • The user's experience is different between streaming services.

I want the focus to be on usability - tagging/organization of content, personalization - adding/removing from your lists, and convenience - launching titles in the respective app.

Ideate

Sketches

The wireframe sketches were first drawn out. I chose the four pages that I thought would be most used or most valuable to the user - homepage, linking accounts/managing settings, viewing groups of playlists, and a single title. All features had proposed basic designs and some alternatives.

Pursuant to predictability, I borrowed from YouTube with a search-dominated header. Videos, being more wide than tall, naturally lend themselves to a horizontal grid display. I'm not a big fan of carousels so I think v2 will explore removing them.

The upper-right sketch is the proposed page for linking accounts. This is where the user authenticates their Netflix/Hulu/whatever account. The bottom-left sketch is a page that showcases multiple playlists; I ended up with horizontal and vertical versions.

The last sketch on the bottom-right is the display of a single title. I again played around with a horizontal and vertical display of components. I really like the use of tabs, I just have to refine what information is most important.

Mood Board

I also made a mood board for this project. The list of themes was to help me stay focused on what mattered and what I wanted to communicate. The color palettes were generated using coolors.co and focus on clean, cool tones. I'm really debating with myself whether I want to shift more into a "dark theater" theme - and make the colors darker and more saturated; think black and reds.

Wireframes

Homepage

I made two versions of the homepage: default and authenticated. All screens reuse the same header and footer - for consistency and predictability. The user bubble in the header has a default submenu (not pictured) to login or register. The authenticated submenu would have further links.

The default homepage has a trending carousel for titles, playlists, tags, and users. The authenticated homepage has the same section and also reuses it for a user-tailored "my stuff" section. This is where the user can browse their saved titles, created playlists, favorited tags, and followed users.

Manage Services

I envisioned that, since this site unifies and tames various streaming services, this page would be integral to the user's experience. The default tab is to add a new service, which contains a search input field for easy look-up. All previously added services are listed alphabetically below. Clicking on any of those tabs would load the account integration settings for that service onto the page.

My Playlists

This displays the user's playlists (like a profile). The top of the page is where the user can feature a playlist - maybe their favorite films, Oscar winners, a tribute to Keanu Reeves, et cetera. Below that is a grid display of all other playlists the user has displayed publicly.

Single Titles

The last two wires are for single titles, both episodic in nature such as with a TV show or standalone such as with a movie or documentary. I intended that all elements like cast members, director, producer, production company, tags, et cetera are all clickable links to pages with a full list of related items.

Prototype

Style Guide

I spent a lot of time working on the style guide, then making the prototypes, then going back and changing the style guide, then back to the prototypes, et cetera. In the end, I drafted the style guide to about 75% of its end state, and the rest was developed in parallel with the prototypes. Some notes on the style guide:

Page 1

The need for two different-size search bars developed out of some changes to the Settings prototype wherein the tab component became narrower.

The inner shadow on most of the inputs were inspired by styling to the container tabs basically to imitate a button and therefore indicate that they can be clicked into.

Page 2

Containers: At first, the default tab was white and "connected" to the content box, and all other tabs were grayscale and "behind" the content box. This had to be hacked together with colored rectangles in order to get the shadows and alignment to look correct, which led me to trashing it.

Logo: I made it myself (in the end) by layering text over text. Included are some snips of the logo in-progress where I tried to be artsy.

Page 3

Additional Resources: A component created to solve the problem of how to display content related to series/titles, such as trailers and teasers.

A link to the full PDF version of the style guide: https://drive.google.com/file/d/11xTxLuRk_khEzKMrdYu1umRaQMuyl_cF/view?usp=sharing

Prototypes

Once the style guide was ~80% done (relative to its final version), I used all the assets I had made to rebuild the wireframes into prototypes with limited interactions.

Homepage

The default/unauthenticated version has a promo at the top to urge the user to register for an account on the site. The authenticated version replaces the promo with another carousel that promotes one of the primary goals of "personalization" by showing saved titles and playlists, or followed tags and users.

The Trending carousel encourages a sense of community by showcasing the most popular titles, playlists, tags, and users. The Recently Added list promotes a sense of activity with the latest content added. The Coming Soon list promotes a sense of application relevancy with upcoming content to be added.

My Playlists

My Playlists functions as a subsection of a user profile - you can view your or any other user's titles, playlists, tags, and followed users (depending on privacy settings). If another user were to click on your username and look at your playlists, they would see a version of this screen. If you were to click on your own username and look at your playlists, you would see this screen.

The Featured carousel is adapted from the carousel on the homepage. The concept of a user featuring a favorite playlist was inspired by Goodreads's concept of a "favorite shelf" for your books. In fact, a good portion of this entire project was conceptually inspired by Goodreads as it has a similar concept of "e-collecting."

Single Titles

The Single Title - Standalone screen refers to a title that has a singular instance, so a movie, documentary, et cetera. The Single Title - Episodic screen refers to a title that has multiple parts to it, a.k.a. it is in some way episodic.

The breadcrumb reflects ownership ("Home > My Stuff") and the button next to the name of the title is to remove the title from the user's library. Note that this title is not part of the user's library; the breadcrumb instead displays where the title lives on the site and the button next to the title has changed to allow the user to add the title to their stuff.

The primary CTA on the Standalone screen is playing or resuming the title (depending on if the user has already started playback), the primary CTA on the Episodic screen is to begin watching episode one (assuming this user hasn't watched a single episode yet), or to launch autoplay of the entirety of season one (similar to YouTube playlists). This button utilizes the primary button style whereas the secondary CTA to restart the title utilizes the secondary button style. There are additional links to view a teaser and trailers, or a full episode listing, but those intentionally blend in more.

The tabbed container is reused here for consistency and to indicate interactivity to the user, just as the tags are purposefully styled as quasi-buttons for the same reason. Tags can all be clicked on to go to a single tag's overview page where the user can see all titles tagged with that, filter, search, et cetera.

Settings

The Settings screen changed immensely from wireframe to prototype. The wireframe had only the "manage streaming services" section, but during prototyping I realized how silly it would be to not group that under some sort of larger settings umbrella. That section alone doesn't justify having its own page.

I added a few settings and grouped them in order of importance and likelihood to be used. Information such as a password is most critical to the user managing their account so that's listed first.

The section to manage streaming service connections is last for one specific reason: it is intended that the user need to visit this section only very rarely. The use cases would be when adding or removing a new service (not going to be a very frequent occurrence) or if a service's connection breaks due to login information changing (also not likely to happen very frequently).

A link to the complete version of all prototypes: https://www.figma.com/file/g4WAX1rFnAWj1y07PHDLj4/VideOrder-Prototypes?node-id=0%3A1

Measure

I'm posting this as v1 of VideOrder, but there is room for much improvement and expansion, and many more iterations. I'm not certain I will revisit this project soon but if so, here are some things I've already identified the need to address:

  • AAA-grade accessibility compliance
  • Revisiting iconography (including adding more)
  • Revisiting the information architecture (perhaps too shallow)
  • Reworking typography (particularly font families)
  • Reworking the Promo
  • Reworking Recently Added/Coming Soon lists design to look less like plain text
  • Additional examples of both types of Single Title screens (ex: title not yet started, title with 15 seasons, viewing full episode list)
  • Screens for all homepage/otherwise carousel tabs (e.g. Playlists, Tags, Users)
  • Screens for all content box tabs (e.g. Reviews, Similar)
  • Screen for a singular playlist
  • Screen for a tab managing an existing streaming service connection (e.g. Settings > Hulu)
  • Screen for Login
  • Screen for Sign Up
  • Screen for user overview/My Profile
  • Comprehensive interaction prototyping
  • Prototypes for mobile and tablet
  • Coded prototypes + actual user testing