DOMAIN REGISTER
Hostgator domain page redesign.
Introduction
Company
Hostgator is a multinational company that provides website hosting, domain registration, VPS and dedicated server, tools for creating websites, among others. At the headquarters in Brazil, Hostgator sites in Mexico, Chile and Colombia are also developed.
Industry:e-commerce and hosting.
Challenge
In 2020, the brand gained updates to its identity, with color changes, iconography, button styles and positioning changes as well. This gave rise to the opportunity to review the entire structure of the domain registration page, which was outdated both in terms of identity and information, thus being unattractive to the user.
Platform:desktop and mobile.
Process
My assignment
Discovery: Perform research and analyze collected data.
Definition: Generate insights through the results and define the problem.
Ideation: Formulate and make hypotheses tangible.
Validation: Validate prototype solution with users and receive feedback.
Teamwork in data analysis, heatmap analysis, quantitative research, prototyping and usability testing.
Tools
XD, Hotjar and Analytics.
Domain questions
-
what is domain
-
Register more than one domain
-
domain transfer
-
Linking email to domain
Doubts about values
-
Renewal values
-
extension values
-
Domain + hosting prices
Technical problems
-
Order processing failure
-
Doubts about the documentation for purchasing the .com.br extension
Discovery
Research
To validate the usability of the page in Brazil and base the insights for a new page on the site, Hotjar's resources were initially used with the analysis of a heat map of user interactions, identifying the points of greatest clicks and also those that did not have a high degree of relevance. Along with this analysis, a qualitative research was carried out with users present on the page interacting in real time with the objectives of understanding the ease of navigation, the clarity of the content and the points for improvement.
The collected data were obtained from1,297 responsesand compiled as follows:
Hotjar was also used to analyze the heat map and click map for both desktop and mobile, where both environments have similar behaviors.
The red band clearly covers the domain search field, which is the main action on the page, but one fact that called attention was the fact that it had an explanation of what a domain is together with the video just below in the orange band, however the interaction with the video it was very low.
The section on domain transfer was already in the gray area of the map, showing that this information was not in a favorable position.
Consultancy
Subsequently, a consultation was carried out with specialists and internal departments to validate the following questions:
-
Google USA: exploit o mmarket of the same segment and evaluate the mobile experience.
-
Support and Sales: identify the relevance of issues raised by customers in domain-related tickets.
-
Supersonic: analyze the experience of payment and pricing cycles.
Google specialists brought some references from players from other countries with insights into the positioning of information in the structure of the page and a very detailed evaluation of usability and user experience, also signaling points of attention in the objectivity of the page, reinforcing the keywords per question of SEO.
The support and sales teams said that the biggest doubts were about the lack of clarity on the amount paid, mainly for domain renewal, the lack of clarity that the amount paid was only for the domain and not for the domain plus hosting and many calls about the lack of of attention and checking at the time of registration resulting in typing errors.
Supersonic is a consultancy specialized in CRO (Conversion Rate Optimization) focused on conversion rate and the team presented some improvements that were based on data analysis and A/B testing of periodicity of payment cycles in order to increase conversion results in domain .
Usability test
The objective of the usability test right at the beginning of the project was to analyze the original page and diagnose the effectiveness of the page with the navigation, identity and information present at the time by real users and identify which doubts and obstacles they faced. For this, the scope of the test was to validate the understanding of what a domain is, the clarity of prices, the effectiveness of the extensions carousel, the usability of searching for a domain and the flow to find the domain transfer option.
The test was carried out remotely with 7 participants with different levels of knowledge on the subject, aged between 25 and 40 years, residents of Santa Catarina, São Paulo and Rio de Janeiro. Totaling 3 people from internal teams with little contact with the site and 4 external people, 2 customers and 2 non-customers.
The tests were divided between devices: 4 on desktop and 3 on mobile. The results were compiled as follows:
Synthesized results
-
They are not sure if they understand correctly how much they are going to pay for the domain upon renewal.
-
More lay users did not understand what a domain is and what an extension is.
-
They commented that the illustrations do not attract attention.
-
Some did not find or did not know where to find the domain transfer option.
-
They commented that they like the extension selector to see other options in addition to the conventional ones.
-
They commented that when clicking on an extension option displayed in the carousel, it is not clear that this option is selected.
-
They commented that the information is not clear, perhaps due to the way it is distributed on the page.
-
They would not reach the end of the page because they believed that there would be nothing very relevant (especially on mobile).
-
They commented that when typing an existing domain in the search field, the feedback and the list of options are not visually attractive.
Definition
Insights
We kept research and data in mind to validate and inform our design decisions, so we were able to map user pain points and improvements. In order to offer a more complete, frictionless and easy navigation experience, we consider the items below as priorities:
Requirements
-
Updating the page for the new brand identity and positioning proposal.
-
Improvement of the content of sessions and frequently asked questions according to the new positioning.
-
Update video information and identity about domain.
-
Assistance to the user in the simple and clear understanding of what domain and extension are.
-
Improvement in er flowand positioning do domain transfer.
-
would improveon naming and clarity of domain and renewal pricing.
-
Improved feedback when users type a domain in the search field.
-
Efficient presentation all available extensions.
-
Improved mobile navigation with usability practices.
-
Deeper navigation on the page through anchors.
Ideation
Benchmarking
The references that the Google team provided in the consultancy were considered, as well as a study of national and international competitors and similar ones. Through this study, it was possible to identify improved positioning of elements, more fluid navigation, user help content insights and changes related to ux writing.
New identity
The focus was on maintaining consistency in accordance with the new global style guide that was premised highlight the protagonist Snappy, use the new basic color palette, button style, standardized style of iconography and larger typography, in addition to standardized spacing as well.
This stage was important for the development of new components with the new identityque resulted in a gain of time for the construction of other pages.
Solution design
To encourage momentum and minimize overhead, we kept tasks simple and straightforward. The user interface is designed to be calm, welcoming and intuitive, and the content is presented in small blocks so as not to overload you cognitively.
Starting with the main area of the page, the order of the elements was inverted, starting with the search bar with more prominence and the suggestions for extensions with the value and discount afterwards. Still in the search bar, the decision was made to remove the extensions select and leave the user free to search freely, so the input phrase was changed from "search" to "yourdomainperfect.com" giving the user an example of how to do it. If the user clicked on any extension available below the search, it was added to the search field.
In order to facilitate the domain transfer flow and reduce the number of tickets opened in this regard, the section was removed from the page and became a link just below the domain search field, in the user's field of vision, taking him to a page dedicated only to the transfer. On this page we present all the necessary information to make a transfer, including a step by step and frequently asked questions.
We added a carousel of the most popular extensions with a brief description of their purposes, also including their respective values and discounts. To direct the user to other options, we use an anchor leading to the session that will be described later on.
With the intention of helping the most lay user to understand what is domain and extension, the entire content of the page was revised and simplified. The session explaining the domain underwent textual and visual changes with bullets highlighting the benefits of creating an exclusive domain. In support of this content, two new sections were added, one with tips on how to create a good domain that reflects the user's business and another with a step-by-step explaining in a simple way how the domain registration happens, in addition to visually showing what is the domain and what is the extension.
As part of the new brand positioning, we wanted to show that Hostgator was a reference in hosting and domain registration, made by experts, providing security and confidence to the user. For this, a session was built showing the benefits of registering with the company.
What was previously a featureless section, with outdated icons that did not fulfill the function of attracting the user's attention with extensions aimed at companies or areas of activity and location as well, now stands out through better-built content, with images that reflected the content that also changed. Extension options now have values and are clickable, and when clicked, the extension is automatically added to the floating search bar that remains present throughout the scrolling of the page.
The anchors of this section and the carousel section of popular extensions lead the user to a table that presents extensions divided by categories, namely highlights, new, national, international and professional. All have the respective contracting and renewal values and when clicking on an option the extension is automatically added to the floating search bar.
As well as the entire content of the page was revised, the frequently asked questions were also updated in information and new questions were added according to the doubts removed from the tickets opened in support. Instead of open-ended questions, they were collapsed with the intention of giving the user freedom to open them when necessary and optimizing page space.
As experts on the subject, we wanted to help the user throughout their journey, mainly by providing explanatory content and relevant tips. For this, the Hostgator blog was also completely restructured, gaining greater relevance and thus we added a section at the end of the page with related content.
One of the factors that Google's consultancy alerted us to was to optimize and facilitate page navigation, especially on mobile. Anchors strategically added in some sections help users to find topics of interest more conveniently. This interaction favors deeper navigation on the page, which we previously found to be unsatisfactory.
Another way to provide the user with comfort in this navigation was to add an internal menu in the mobile version, which is activated when the user mentions going up the page. We understand that due to the smaller device screen ratio, the page becomes much more extensive than the desktop version and the menu was a way to offer shortcuts to the page sessions.
Validation
Usability test
To validate our solution hypotheses, we decided to do a new test and, with the prototype ready and navigable, we conducted a total of 5 remote testswith customers and non-customers from 25 to 40 years old, residents of Santa Catarina, São Paulo and Rio de Janeiro. Ddivided between devices: 3 on desktop and 2 on mobile.
The purpose of structuring the research was to validate the new architecture of the page, the flow for transferring the domain, the explanatory contents and the clarity of the values. Some questions from the first test script were reused for comparison and new tasks were added, such as finding an available domain for a bakery.
In this task, we were also able to validate the new positive and negative feedback by typing a domain in the search bar, in addition to understanding the amounts to be paid. We also add uanother task to find where the transfer could be made and to validate the understanding of the content of the page.
The results were compiled as follows:
Synthesized results
-
They do not understand the information and prices related to the purchase of the domain + hosting
-
They did not expect/found it strange that the default extension option in the search was ".com"
-
They expected that when searching for the domain stem, all available options would be listed (not just the .com)
-
They commented that a select of extensions could help in the search (as it was before)
-
When searching for a domain, they missed the .com.br result
-
Didn't find the asterisk explanation about website hosting
-
They said they did not consider the information in the feedkback bullets relevant and found the information confusing and/or redundant
-
They asked about the possibility of finding a professional domain not listed on the page
Through these data, it was possible to list all the problems reported in the test in a spreadsheet and perform an analysis of insights and suggested solutions for each item. Then, an evaluation was carried out based on the degree of severity from 0 to 4 and the sum of these values indicated the most critical points, making it possible to analyze them and as a team to define priorities.
With this definition we managed to speed up the development of the page and launch it with the objective of obtaining results from the solution with large-scale user interactions.
Learnings
This project taught me how important it was to test the current scenario so that we could already fix some flaws before we even designed any solution and not carry them forward. With the team focused on basing each decision on data, it resulted in a robust project, focused on the user and on the company's interests as well.
The whole research process was essential because theUser contact is too powerful in validating hypotheses, flows, understanding terms, and so on. Sensitivity is needed in listening, but also in what the user is doing, but not speaking.
A great learning that I take from this project is that UX is not just solving the problem, but facilitating conversations about design, it is analyzing, processing and transforming information into something useful to result in a great design of a really effective solution. A solution that is not stuck, because iteration is what will keep it susceptible to success.