Jieyu Xiong

—

Project Goals:

• Increase consumption of long-form videos
• Increase user authentication
• Improve advertising experience
• Improve content structure
• Improve search and schedule information
• Deliver a responsive template that can be used across 9 network channel sites.

—

Style Tile: 

We explored two different visual directions based on the existing TLC brand guidelines. Style Tile 1 makes content clear, easy to consume. Style Tile 2 uses solid icon style and dark base color to make the visual more impactful.

Style Tile 1 was approved and applied to Homepage design. However, client rebranded TLC channel in the middle of this project. So we adjusted the final look and feel of TLC sites. We kept the same icon style, button style and other visual styles that client liked, but updated typography and color palette.

—

Responsive Grid System: 

The grid system is designed based on Bourbon Neat Grid System. The column width and the gutter are calculated by percentage. Golden Ratio (column = 2.618 * gutter) is also introduced to this grid system to make it look elegant.

—

Areas We Worked On: 

In this project, we redesigned Homepage, Show page, Nav, Video Player (VOD/Live), Search, Schedule, Cast/Bio, Blog homepage, Blogpost and Open template page to deliver a better experience to users. For each page, we were focusing on finding a balance between business and user needs to drive full episode views.

—

Homepage & Show Page: 

Min, Medium and Max Wireframe

For content-heavy pages like Homepage & Show page, the amount of content varies based on two parameters: 1. content provided by each channel (e.g. How many full episodes are available online for this show?) 2. the level of user engagement (e.g. For first time user, only minimal amount of modules can be displayed due to lack of user data. For advanced users, a lot of personalized modules will be available. So we designed min, medium and max versions. The system is flexible enough for each channel to customize content. It also encourages users to interact more with the sites.

Here is an example of how user engagement can change Homepage layout.

Homepage & Show Page Design

As I mentioned before, client rebranded TLC channel in the middle of this project. So we consolidated our style tile with their new branding language. The new look and feel is immersive and bold. It creates a cinematic experience laser focused on Full Episode views, allowing users to sit back and enjoy their experience.

1. Homepage Header: The message of homepage header is around availability of full episodes.

2&3. Header CTA: A prominent CTA encourages users to authenticate to watch full episodes.

4. Personalized Module: Some personalized modules such as Continue Watching are designed to increase user engagement.

5. Advertising: ADs fits perfectly in the grid system. The layout can still look elegant even when ADs are blocked.

6. Full Episode Number: It indicates how many full episodes are available in this section.

7. Full Episode Label: Full Episode label is consistently used across the whole sites.

8. Authentication: When user hovers over a full episode card before authentication. A lock icon makes it very clear that they need to sign in to watch that episode.

9. Schedule: Schedule section allows user to continue TV experience on web.

10. Show Page Header: In show page header, users can access the latest full episode without scrolling.

11. Episode List: Episode list is also designed around full episode experience.

12. Primary Watch CTA: A prominent CTA encourages users to watch full episode.

13. Non-video Content: Non-video content is also designed modularly, following the same grid system.

—

Navigation: 

Three Options

We worked on three different options to simplify the Navigation and to differentiate Show Nav from Global Nav.

We landed on a combination of Option 1&2. Local Nav is nested in the hamburger menu. Each channel can control visible links outside of the hamburger. It keeps the page clean and enables each channel to promote special content.

Navigation Design - Folded

1. Hamburger: Hamburger menu keeps the page clean. 

2. Exposing Menu: Exposing menu allows each channel to customize it's nav experience. It can also be used for promotional content such as Full Episodes.

3. Contextual Exposing Menu: Exposing items can change to meet specific needs of each page.

Navigation Design - Local Nav within the Hamburger Menu

4. Full Screen Takeover: Nav takes over the full screen to maintain the immersive cinematic aesthetic.

5. Global Nav: Label 'Explore TLC' educates users that this section is Global Nav.

6. Show Nav (Local Nav): Label 'The Willis Family' (Show Title) demonstrates that these are Show Nav items.

7. Show List: Show list is exposing on Homepage to help users quickly navigate to a popular show.

—

Delivery - Site Architecture: 

—

Delivery - UI Pattern & Interface Design:

All pages are designed modularly. Parallel to interface design, I collaborated with another designer to set up a comprehensive pattern library across 4 breakpoints, including CTA styles, fonts, card modules, icons, video controls and etc. Please check the live site here

(UI Pattern - Desktop)