Gigared Hogares — a UX case study
Gigared is one of the top internet, television and fixed telephony providers in Argentina and decided it was time to rebuild its website.
--
🎯 Goals
- Increase the acquisition rate of new clients
- Improve the satisfaction level of existing clients
⚠️ Challenges
Gigared website contained a high density of information that was presented to both the future and current clients without a clear distinction. This message overlay was hurting the sales process and the overall experience of existing clients when searching for the content.
What if there was a way to respond distinctly to the needs of two very different types of user?
💡 Solutions
Navigation
Considering that the primary focus is on acquiring new clients, the main menu consists of links to the product pages along with a dominant CTA that leads to the plans page.
The clients submenu is second in hierarchy but located in an important focal point. Given this clear distinction on how to access client-only content, it is now possible to clean up product pages of everything that does not add value to the sales process.
Worth noting is that on mobile devices, the CTA is placed in the nav bar to reduce the negative effects that a hamburger menu can have over discoverability of the links.
Homepage
This is where both existing and potential clients converge. The news section is designed to inform Gigared clients about the latest benefits (and at the same advertise the benefits of being one). It is also useful to promote premium TV services (applicable for both types of user) by anchoring them to current events, such as the premiere of a popular TV series new season or the next big sports game.
Instead of using a slider/carousel, the four news are shown at the same time when the browser has a horizontal size greater than 1050px, making them all quickly scaneable at the same time.
As each news would have images of varied aesthetics, a semitransparent gradient was added over the whole news block to soften the color load, which allows the images to coexist harmoniously and it also highlights the active selection by partially dissapearing.
The same trick was later replicated in other areas, which helped to create a consistent visual style across all pages.
Right after the news section, the plans are displayed along with their main features, through which the user can make an informed decision about picking one of them. Providing a direct link to the plans page validates the initial intuition: the flow of new clients behavior reveals that less than 35% of them visit the products pages before choosing a plan.
Product pages
For those who need to know more before choosing a plan, the content of the products pages was completely reworked based on two hierarchy levels in order to reduce the user’s cognitive load and promote the quick interpretation of the most relevant information.
All the first hierarchy content is shown by default: main products with its predominant CTAs, followed by an introduction to the additional products and additional information that reinforces the sale at the end.
The second hierarchy content is composed of the additional products description and all the information that is not a essential part of the sales pitch. This content is shown only when users request for it.
In the case of the television page, for example, the additional products details are shown on the same page but it covers the rest of the content.
Through this approach, the additional product CTA does not compete with those of the main products for the user´s attention. Only one instruction is suggested at any given time, which reduces the risk of confusion and simplifies the user’s decision-making process.
Plans page
In desktop, the main plans features are placed at the same height (regardless of how many features each plan has) and the FAQs at the end help to mitigate any doubt or concern that might interfere with the user’s purchase intention.
Also, since many users used to leave the website after noticing none of the plans met their requirements, a make-your-custom-plan feature was added. As a result, custom made plans became the most popular plan by a 60% margin.
Form design
The form requires the user to complete up to 12 fields in total.
To reduce the perception of complexity, the process was divided into three easily digestible steps. A progress bar reminds the user of all the time invested in the easy steps 1 and 2, which reduce the abandonment rate on the the more cumbersome step 3).
To make the form look smaller and, therefore, less intimidating, floating labels that appear only once the fields begin to be completed.
In addition, some fields pre-contain the most typical information to save time, while others indicate the right format just before the user begins to fill in the data to prevent validation errors.
Loading speed
Not having a fast and lightweight website could translate in potential new clients leaving the site and existing clients getting frustrated. After working on the website optimization, the new loading speed enables the ideal escenario to serve both types of user.
👏 Results
The website conversion rate increased and thanks to a revamped navigation, which makes it easier for existing clients to discover the content aimed to them, the usage of tools like the online TV guide rose up by 9000%.
Additionally, Gigared receives a monthly report on the performance of all the CTAs to measure the impact that each product and plan have on the sales, which makes it possible to identify trends and improve the overall business strategy.
🔎Are you looking for a UX/UI designer?
Let´s connect on LinkedIn or through my website.
