Claro Telecom
C L A R O T V S C H E D U L E P A G E A N D C O M P O N E N T
C L A R O T V S C H E D U L E P A G E A N D C O M P O N E N T
The discovery phase activities helped me understand the user base accessing the Claro TV Guide. Through meticulous analysis, I delved into key metrics such as user demographics, website traffic, geographical origins, user behavior, and engagement metrics. Furthermore, I conducted benchmarking studies to gauge market trends and identify areas of improvement.
The culmination of this endeavor resulted in the delivery of beautiful designs that not only elevate the aesthetic appeal of the Claro TV Guide but also enhance usability and functionality. By striking a harmonious balance between form and function, the redesigned interface offers an immersive experience tailored to the diverse needs of Claro's user base.
Moreover, strategic integration of promotional elements facilitates seamless cross-selling of Claro's movie streaming products and bundled packages, driving revenue growth and enhancing user engagement.
Info
C L I E N T
Claro Telecom
Claro Telecom
Y E A R
2021
2021
R O L E
UX/UI Designer
UX/UI Designer
T O O L S
Google Analytics, Hotjar, Figma, Photoshop
Google Analytics, Hotjar, Figma, Photoshop
Process
1. Research
In the endeavor to redesign Claro TV Guide page, a crucial phase involved delving into user behavior through meticulous analysis of data gleaned from Google Analytics. This deep dive unearthed invaluable insights such as bounce rate, time on page, returning user dynamics, traffic sources and user demographics that laid the groundwork for informed design decisions.
The discovery phase served as a vital foundation for the Claro TV Guide page redesign, providing nuanced insights into user behavior and preferences. Armed with these revelations, subsequent design endeavors were guided by a holistic understanding of user needs, steering towards the creation of a revamped guide tailored to elevate user experience and drive engagement.
Claro Telecom personalized Google Analytics page
1.2. Information Architecture
Utilizing insights gathered from Google Analytics, navigation flows, and Hotjar's heat map analysis, I conducted a comprehensive examination of the Claro TV Guide page and its components. This thorough exploration provided nuanced insights into user behavior, preferences, and interactions, which served as invaluable guidance for iterative design enhancements.
Key insights included observations on the most clicked components, user scrolling patterns, access patterns of existing customers, continuity in user flow, opportunities for cross-selling, and utilization patterns of various components. By leveraging these data-driven insights, I ensured that the information architecture of the page facilitates intuitive navigation, enhances content discovery, cross selling opportunities and optimizes the overall user experience for Claro customers.
Hotjar's Heat Map
Most Clicked links
Navigation Flow
3. Heuristic evaluation
For the Claro TV schedule component I embarked on a meticulous heuristic evaluation process, leveraging a custom methodology devised by a fellow designer. This approach not only assesses the severity of heuristic violations, but also generates error rates and prioritizes improvements, providing a comprehensive framework for improving the user experience. This methodology incorporates a multidimensional analysis, considering factors such as severity of the usability heuristics violation, problem generated by this violation, adherence to usability heuristics, task completion and user interaction time.
The evaluation process results in the calculation of the component’s error rate. This rate is derived from the aggregated violation severity factors of all identified issues, providing a quantitative measure of the overall usability issues in the component.
Claro TV schedule component
Breach Severity Factor Method
Heuristic Analysis table
4. Benchmarking
Expanding the discovery phase, I conducted a benchmarking analysis comparing the Claro TV Guide with leading TV schedules accessed in Brazil and internationally. This included VIVO, SKY, HBO, TELECINE, ESPN, DISCOVERY, BBC, GLOBO, SBT, CULTURA, tvguide.com, and meuguia.tv. By studying their interfaces and user experiences, I gained insights into industry standards and user expectations. This guided enhancements to the Claro TV schedule component, ensuring alignment with best practices and delivering a more competitive and user-friendly experience.
5. Interaction Design
As the construction of Claro's pages was done via CMS, after presenting suggestions for content and order of sections, I leave this task to the content managers, so I continued with the redesign of the Claro TV schedule component. To this end, I suggest a study to understand the user journey with TV products and the redesign of the complete page with “mobile first” in mind (the vast majority of access volume at the time).
Based on the Heuristic evaluation and the Benchmarking analysis I started by creating mid-fidelity prototypes.
Based on the Heuristic evaluation and the Benchmarking analysis I started by creating mid-fidelity prototypes.
Mid Fidelity Prototype
6. UI Design
Claro TV Schedule Mobile mockups
After stakeholders feedback and approval - in collaboration with the development team to ensure feasibility - I initiated the creation of high-fidelity prototypes. Adhering to Claro's branding guide, I integrated their visual identity elements into the UI design. This ensured consistency and brand recognition. Alongside, recognizing the need for comprehensive user engagement, I also began the creation of channel and TV show pages. This expanded the scope of the project, allowing users to access detailed information about their favorite channels and shows.
TV Schedule Component - HiFi Prototypes Options
TV Show Page - HiFi Prototypes Options
Channel Page - HiFi Prototypes Options
7. Specifications
With the high fidelity prototypes signed off, I collaborated closely with the development team to facilitate the implementation of the approved designs. So I created a specification sheet guide to guide development implementation.
Claro TV Schedule component specifications
A: Filters
When any filter button is active the color changes to red.
A1: ‘Sort’ drop-down menu
Change the channel viewing order. 3 options: A-Z, Z-A and 123 (Number)
A2: ‘Channel filter’ drop-down menu
Shows channels according to categories:
• All channels;
• Favorites;
• NET Channel;
• Courtesy² Open Channels;
• Varieties;
• Sports;
• Documentaries;
• Children's;
• Adult;
• Films;
• NOW Channels;
• Telecine Channels;
• HBO channels;
• Channels premiere.
• All channels;
• Favorites;
• NET Channel;
• Courtesy² Open Channels;
• Varieties;
• Sports;
• Documentaries;
• Children's;
• Adult;
• Films;
• NOW Channels;
• Telecine Channels;
• HBO channels;
• Channels premiere.
B: Calendar
The Date of the current day is shown as the text ‘TODAY’ and the following day as ‘TOMORROW’. The text ‘TODAY’ is horizontally aligned with the ‘Now’ button (C).
C: Now Button
If the user scrolls the calendar to any data, as soon as he clicks on the 'Now' button the calendar (as well as the content shown) returns to today's schedule at then time.
D: Hours
The times shown are always in 30 min intervals based on the current time, starting at 00:00. For example:
00:00 _____________________ 00:30
00:30 _____________________ 01:00
01:00 _____________________ 01:30
01:30 _____________________ 02:00
...
00:00 _____________________ 00:30
00:30 _____________________ 01:00
01:00 _____________________ 01:30
01:30 _____________________ 02:00
...
Vertically, the hours are aligned in relation to the ‘Now’ button (C). Horizontally, the hours are aligned in relation to the 30min programming box (E). Thus, the positioning of the beginning of the text for the first hour shown (14:00) is aligned with the left side of the box and the end of the text for the second hour shown (14:30) is aligned with the right side of the box, as drawn in layout.
E: Box Program (30 min.)
Max title text box size: 208px X 35px - with 2 lines.
Note: If the program box is at the current time, above the 'time needle' (K), the program box will have a red stroke, otherwise the stroke is gray.
E1: Schedule
Max time text box size: 208px
No line break (Only 1 line)
No line break (Only 1 line)
F: Box Channel
Max logo size: 74px X 59px centered in the box.
G: Highlight program box
Max title text box size: 188px X 35px - with 2 lines.
Being highlighted changes the colors of the box and text, as well as the colors of the stroke.
Being highlighted changes the colors of the box and text, as well as the colors of the stroke.
Note: If the program box is at the current time, on top of the 'time needle' (K), the program box will have a “gold” stroke, otherwise the stroke is dark red, the same color as the background.
H: Box Program (45 min.)
The size of the 45min box is equal to the sum of the size of the 30min box and the size of the 15min box (119 + 240 = 359px).
Max size title text box: 327px X 35px - 2 lines.
When the program is longer than 30 minutes and the box leaves the screen space, the button for the program page (I) is always 10px away from the end of the screen.
Note: The size of the programming boxes is always proportional to the duration of the programming.
I: Navigation button for program page or channel page
It is always located 10px from the right corner of the box that contains it. However, if the program is longer than 30 minutes, and the box leaves the screen space, the button (I) is always 10px away from the end of the screen.
J: Box Program (15 min.)
Max title text box size: 87px X 35px - 2 lines.
Note: When in the default state (119px Now On touch, the box expands to size and follows the specifications of the 30min programming box (E) showing the rest of the title and time. When expanding, it pushes the following boxes.
K: Temporal needle
Note: When in the default state (119px Now On touch, the box expands to size and follows the specifications of the 30min programming box (E) showing the rest of the title and time. When expanding, it pushes the following boxes.
K: Temporal needle
The needle serves to show the elapsed time of the program within 30 minutes. The needle always travels the space of a 30-minute program box (E and G), that is, 240px, and after 30 minutes it returns to the beginning.
In the drawing of the grid on the side, it goes from 2 pm to 2:30 pm, then returns to the initial position, and will start a new time, now from 2:30 pm to 3 pm.
8. Iteration
Following the completion of screen coding by the development team, we conducted user testing sessions to validate the usability of the implemented features. Upon receiving positive feedback from users, indicating good acceptance of the interface, I proceeded to design the desktop mode prototypes.
thanks
obrigado