Recollect.

Recollect is an entertainment platform that allows users to browse TV shows and movies based on true events. This project was constructed in order to practice Accessibility Guidelines.

I believe that as designers, inspiration should come from all aspects of life: whether work or not.

The goal of this design is to promote easy navigation that translates well on web screens, tablet screens, and mobile screens, while keeping in mind inclusive design guides. Also, feel free to use this to find recommendations…

(Image description: Wizard Of Lies movie with movie clips lining the bottom of the screen, navigation is up top—Home, tv shows, movies, newly added, queue, profile—, summary is mid page)

Understanding and guiding the UI

1) In designing this entertainment platform, it was very important for the lighting and tone to be consistent across all TV shows and movies regardless of background images. A darker background allowed summaries and icons to achieve contrast easily, while allowing white font to be undeviated throughout each screen.

2) Accessible visual aides for components (usually communicated through bolded icons and words and/or different colors) need to be included in designing this platform.

3) All Call-To-Actions need to be designed to preserve usability across laptops, tablets, and variety of phones.

Designing for minimizing screens.

When designing for a computer screen first, there was one thing in particular that I needed to keep in mind:

Scalability.

The font (as well as button size, which I will get into) was one of the most important aspects for me to understand and commit to. As the screens got smaller, so would the font; would the legibility be impacted? How would the typography change the usability? By articulating typography through visual identity, I was able to understand what type of font and size was appropriate for whichever screen I was going to be working on.

The visual identity.

Typeface system.

I created a typeface system that consisted of both serif and sans serif in order to both draw the attention of the reader through titles, but also recognize that different age groups are better able to read sans serif when it’s presented as captions, paragraph blocks (eg. summaries of movies), and credits. For many, simplified letterforms are easier to read (for those with visual impairments) and recognize (for younger demographics learning to read). By choosing a sans serif font, perfunctory reading was easily achievable.

Grids & Layout.

By deciding to use simple shapes and grid layouts, it was easier to create a format that would be smoothly transferrable when testing device responsiveness. Though there was no use of whitespace, by following repetition of design elements, the layout was able to keep neat and uniform in cased such as movie clips, tv episodes, and cast line-up. Not only that, but these sharp edges for episodes and clips are able to draw out clarity against picture backgrounds; this decreases clutter and continues the gridded pattern.

Desktop pt grid/wireframe.

By designing the desktop grid first, I was able to get an idea of what components would fit onto the screen which I could later transfer to mobile and tablet (first hindsight).

My main goal here was to keep everything very uniform. For development, keeping the wireframe as consistent as possible helped make the design process much easier as well as a good time to practice for future design .

(Image description: Desktop spacing breakdown)

Tablet pt grid/wireframe.

This frame is built for tablet viewing, however due to tablets coming in different sizes, tablets are also able to respond to the desktop layout; desktop can view as tablet as well. Having everything available in a scroll makes touch screen navigation much easier due to swiping and tapping being the primary actions of both a finger as well as a stylus.

Mobile pt grid/wireframe.

For mobile, I didn't want users to feel as though the best experience could only be attained on desktop with a mouse since a mouse gives users a more precise click.

This is where spacial awareness was especially important. In order for content to come off as both simplistic and easy to navigate, CTAs and content needed to be easily accessed; even if there was a lot of information to absorb.

(Image description: Mobile spacing breakdown)

Buttons & Iconography

Buttons and icons need to respond to a shrinking screen, therefore there had to be an understanding that component alterations had to have touch target sizes. A touch target size (particularly with icons) is pertinent to achieving what the user is trying to complete.

With this design, I had to find the right compromise between the button and icon size and the touch target size on both mobile and tablet. Following accessibility guidelines, a 24x24 and 44x44 is what is recommended.

The overall goal here was to minimize user touch errors without compromising the reflection of the desktop layout and keep productivity at its height.

(Image description: 2 examples of hotspots for mobile buttons & icons)

(Image description: Typography system for mobile.)

(Image description: Typography system for web & tablet)

Visual Prototypes.

(Image description: Scrolling down to reveal recommendation and popular shows)

Recommendations & Transitions.

When scrolling, Recollect’s operating system is where it differs from other streaming platforms. As the user moves down the page, the backdrop image moves from a background position to an increased foreground position.

This choice was made so that there would be a smooth and polished transition between different sections ( the main entertainment, the recommendation, and popular shows). By keeping the background consistent, the flow is uninterrupted and decreases unnecessary changes that users may find jarring.

To use the ample space given on computers, information on episodes expand to fill the screen, revealing the episode title, run time, rating, and air date.

Due to the screen size, it’s able to accommodate more details than smaller screens would be able to handle.

(Image description: Clicking Info opens an overlay to reveal episode summary & run time)

Home Page, Menu, Newly Added.

These sections are most likely where users will spend majority of their time browsing for movies & shows. These consist of clusters of entertainment that are designed to guide users through featured entertainment, your list, movies, newly added, and aide in navigating through genres through drop down menus.

It was also important to incorporate “underlines” as indication where a user is throughout navigation. As stated in understanding and guiding the UI, it’s imperative that accessibility is implemented from design inception. Most often than not, bolded words symbolize user location, but for those with poorer eyesight, it’s hard to differentiate with those that are unbolded. By underlining user location, aides that range from auditory devices to refreshable braille, have an easier time relaying information to users.

Home.

(Image description: Featured film as background, description in foreground. Your list lining the bottom as a sliding function)

Home acts as both a screen communicating new, featured movies along with pushing entertainment that has been added to your list. A highlighted arrow CTA is added to show that your list operates as a sliding function like all other rows on Recollect. By having this be the first CTA (other than the PLAY button), it familiarizes users with how the rest of the website works.

Newly Added & Recommendation Cluster.

(Image description: Newly added. First row popular, second row is trending, third is recommended)

By understanding a user’s preferences through previously consumed shows/movies, Recollect is able to make accurate predictions of what one might like to watch. The recommendations are curated in a cluster focused on titling why a user is being recommended these shows through the short sentence: “Because you watched”.

Movies & Drop downs.

(Image description: Dropdown of genres and dropdown of suggestions for you, popular, A-Z, Z-A, and Release Year)

Drop-downs throughout the website help users whittle down their preferences and (if they don’t have a specific movie they want to search for) browse the category they’re interested in. A notable difference in this screen is that this is presented as a grid scroll, not a “line-by-line” horizontal scroll like the board above. The reason it is presented like this is because Newly Added is deliberately broken down into different categories: Trending, Because You Watched, etc. in order to prompt users to explore what is being pushed by Recollect and also give a place to cater to a users movie taste. “Movies” is a general topic that gets sorted manually; this is preferable for those who would just like to browse.

Screen Change.

Tablet

Mobile

Designing for mobile screens was a bit more complicated as there are some rules I had to keep in mind:

1) I had to keep the buttons at at least 44x44 dp for accessibility reasons.

2) I had to understand that kerning had to be altered in order to keep things understandable. As the font decreased, the possibility of characters molding together increased. Kerning had to be upped to a comfortable 10.

3) Breadcrumbs at the top of the screen had to be removed and replaced with a “BACK” button. By recognizing that users would not be able to properly access the small words in the breadcrumbs, I reduced it to only one option to accommodate that difficulty; not to mention that by doing this I was able to declutter the screen making room for larger text and increased space for buttons and other CTAs.

(Image description: Vertical listing of episodes with descriptions)

(Image description: Horizontal listing of episodes with descriptions; FX awards to the top right)

Conclusion

My biggest mistake was getting carried away…

Once my designs were finished and posted, I realized how unnecessary some of the motion was. There was no point to design an expansion (parenting animation). It would slow down users and chances are no one really wants to click info for each episode and have to wait 1-2 seconds to see it…

Learnings

Though a passion project to practice design principles and accessibility, be aware of what is necessary and what is unnecessarily slowing down users’ process.