Web TV

Universidade Paulista - UNIP

The redesign of the public and private video pages, known as Web TV, for Universidade Paulista - UNIP, was an essential project to significantly improve users' access to video content, providing a more intuitive and faster digital experience. The main goal was to create a user-friendly and accessible interface, allowing users to quickly and easily navigate and find content. Using tools like Figma, I developed high-fidelity detailed prototypes, which were crucial in visualizing and communicating the proposed improvements. Below, you can explore the process and results of this redesign, focused on enhancing the experience of UNIP's Web TV users.

Content Optimization

By redesigning the cards without using thumbnails, the intention was to highlight the content description, promoting a more direct and informative reading experience. This aesthetic choice not only emphasizes the textual content but also contributes to a cleaner and more modern design, avoiding visual elements that could clutter the page.

Moreover, by focusing on the description, users can quickly grasp the theme of the video or related content, making navigation faster and more efficient. The minimalist style also reinforces the platform's contemporary visual identity while prioritizing the clarity of information.

Another advantage of this approach is responsiveness, as the thumbnail-free format makes it easier to adjust elements across different screen sizes, ensuring a more consistent user experience on both desktops and mobile devices.

Finally, the new design brings a visual sophistication that aligns with current web design trends, providing a more content-focused experience and enhancing user interaction with the platform.

Visual and Style Refinement

The cards are one of the central elements of the interface, responsible for presenting information concisely and accessibly. In the visual refinement, strategic choices were made to ensure that each card not only grabs the user's attention but also offers a pleasant and informative reading experience. From the use of colors to typography and spacing, each detail was designed to optimize understanding and navigation. Below, we explain the key decisions that guided the refinement of the cards:

1. Event Title: Using a vibrant color like blue, along with bold typography, allows for easy identification of the video's theme. This helps users quickly recognize what the content is about.
2. Video Description: By centering the description and using a neutral color, the user's attention is focused directly on the subject, facilitating reading without losing focus on the importance of the information.
3. Speakers and Date: Adequate spacing and using a softer typography for the names of the speakers and date create a visual contrast with the rest of the information, giving a sense of visual completion on the card.

Additionally, the well-positioned play button, with a striking color, naturally invites users to take action. This provides intuitive navigation, while users feel comfortable exploring video content.

These design details contribute to the modernity of the layout and reinforce an experience focused on both aesthetics and functionality, generating a more pleasant interface for the end user.

New Feature: Related Videos

The addition of the related videos section was a strategic improvement to enhance the user experience, ensuring that they have access to content that complements or expands on the focused topic. This not only increases engagement but also keeps users on the page longer, providing a continuous flow of relevant information.

With the display of related videos, users can explore topics that interest them more deeply without needing to manually search for other materials. This makes navigation more intuitive, naturally leading them to more content, which can increase views and time spent on the platform.

Moreover, this approach encourages continuous learning, making it easier to discover topics that users may not have known about but fit their interest profile. This feature also favors audience retention by keeping users engaged longer and making the platform more dynamic and rich in content.

Lastly, the related videos section reflects a focus on personalizing the experience, offering a more targeted path for each user profile, which can positively impact the platform's usability and perceived value.

Multiplatform Functionality

With multiplatform refinement, the layout has been optimized for mobile devices, ensuring intuitive and smooth navigation, even on smaller screens. In the mobile version, the Related Videos and Recent Videos sections were implemented, offering the user a more dynamic and targeted browsing experience.

One of the standout technical features is the ability to select the desired area in the code to display videos of interest, whether from related or recent videos. This functionality enables content personalization and filtering based on the navigation context, ensuring a more relevant and customized experience for the user. The use of dynamic parameters facilitates content adaptation according to the audience's preferences, optimizing interaction.

This approach not only improves the user experience but also ensures that the most relevant content is accessible in a practical and intuitive way, reinforcing the project's commitment to responsiveness and accessibility.

Responsive Design as a Central Focus

During the development of this project, one of the main focuses was to ensure that the interface provides an optimized experience regardless of the device used. The responsive design was crafted to adapt to various screen sizes, from large desktop monitors to smartphones, without losing visual quality or ease of navigation.

Using a mobile-first approach, the layout was organized to prioritize intuitive navigation on mobile devices while also providing an equally smooth experience for desktop users. Elements such as buttons, video lists, and the separation between "Related Videos" and "Recent Videos" were adjusted to ensure accessibility and visual clarity across all platforms.

This attention to responsive design also aims to improve the site's performance, ensuring that pages load quickly and efficiently across different resolutions, directly contributing to a positive browsing experience.

User Experience (UX)

User experience was another key focus in the development of this project. Every detail of the layout was designed to facilitate user interaction and navigation. The information architecture prioritizes simplicity and organization, highlighting content in a clear and intuitive manner.

The choice of colors, typography, and spacing follows usability and accessibility principles, ensuring that the user enjoys a smooth, frictionless navigation experience. Additionally, organizing videos into categories such as "Related Videos" and "Recent Videos" helps users find relevant content easily, offering a personalized and interactive experience.

The navigation between sections was designed to be intuitive, and the use of consistent visual elements helps create a user-friendly interface that clearly guides users without overwhelming the screen with unnecessary information.

— Thank you.