· Documentation  · 2 min read

Performance Improve

When users surf a website, they generally look for visual information to confirm that everything is working as expected.Improve the user experience on the CT Gallery by focusing on performance metrics that are centered on the user.

When users surf a website, they generally look for visual information to confirm that everything is working as expected.Improve the user experience on the CT Gallery by focusing on performance metrics that are centered on the user.

Team - UX Developer / UX Architect Sr

My Rol - UX Architect / Design System Lead

Date and Deadline - 2020 / Two Months

OKRs

Objective:

To improve the core web vitals of the Content Type Gallery.

Key Results:

Improve the LCP to under 2.5 seconds. Improve the FID to under 100 milliseconds. Improve the CLS to under 0.1.

Objective:

To improve the professional website of Content Type Gallery.

Key Results:

Improve performance to above 90. Improve accessibility to above 90. Improve adherence to best practices to above 90. Improve SEO to above 90.

Initial performance

Introduction

Frequently, performance problems are closely related to the UX and UI. However, it can be complicated to address the problem if one does not understand how the UX and UI affect performance.

The header has an animation that makes the content jump. While this animation may be aesthetically pleasing, it provides little value for our users.

Old Header

Advertising

The ad takes up approximately 40% to 60% of the first screen, prioritizing the ad above the content. This generates a jump that is penalized by Lighthouse.

Advertising are invasive and poor friendly

Heatmaps

The user regularly completes the journey through the gallery.

The user is looking for a significant interaction with the images.

Users do not use the share buttons.

Heatmaps interaction validation

Actions

  1. Implement a Design System
  2. Modify the architecture information and order the elements
  3. Remove unnecessary animations
  4. Remove carousels, and instead have five fixed elements with swipe functionality on mobile devices.

Stack solutions

  • Next.js
  • Styled Components
  • UX enhancement
  • UI enhancement

Verification

We complete the OKRs that we have and additionally achieved an increase in page views by 15%, viewability by 10%, and time spent by 20%.

Performance improve results
Share:
Back to Blog

Related Posts

View All Posts »
BEM Methodology

BEM Methodology

The BEM (Block, Element, Modifier) methodology is a naming convention for CSS classes that helps you build web interfaces in a more organized, reusable, and maintainable way. Created by the team at Yandex, BEM makes it easier to develop reusable components and maintain clear, scalable code.

Managing a UX Team; My Experience and Tips

Managing a UX Team; My Experience and Tips

Managing a UX team is an exciting and challenging adventure. From creating a shared vision to implementing innovative solutions, every step requires a mix of leadership skills, creativity, and empathy.

Article Design System

Article Design System

Improve the user experience on the CT Article to increase the time our users spend on the site, this project impact to multiple sites of Televisa, principally TUDN and Las Estrellas.

Redesign the referral program at Aprende Institute

Redesign the referral program at Aprende Institute

One of my challenging tasks at Aprende Institute was to redesign the referral program. This program is important because it generates part of the revenue, and we need to understand the motivations of the students to refer others, as well as the needs of guests to convert them into students. This is an end-to-end product that was required careful consideration.