Published on: September, 2018
Published on: September, 2018
Here at Belatrix, we know that customers must be at the heart of everything we do. User centered approaches are a great strategy to anticipate and meet the needs of users while building a close relationship with them. That is why, we decided to create a new design for Belatrix’s web page that will improve the overall customer interaction and that reflects our expertise and world-class services. In this case study we analyze where we started from, what was the criteria to modify and create features, and what we hope to accomplish with Belatrix’s new and fresh image.
The first step of the UX process was to analyze the performance of our previous website. Our UX design team along with marketing, sales and technical experts evaluated the strengths and flaws, and determined the main objectives and expectations of the new website. They analyzed metrics they could use as a starting point for the creation of a new UX strategy, such as the average time of sessions, and the most visited pages according to the country of origin, gender and age. Some of the most important conclusions of this stage were the need to improve the bounce rate, make the principal actions more visible, and include different options so users can easily navigate through pages, especially in our blog section, which is often the main point of access to our website. In addition, the new UX strategy aims to meet the needs of the two principal groups of visitors of our webpage: Clients and people who want to join Belatrix.
During this phase, our team evaluated our competitors’ websites and carried out interviews with external users and stakeholders.
Benchmarking. The purpose of benchmarking is to evaluate different web pages and analyze what are the strategies and elements they use in their user experience. This step is crucial to create the UX strategy, which is the foundation of the activities that the marketing team executes during the process. Here, Belatrix’s UX designer analyzed a variety of websites according to their navigation, structure and visual design:
Navigation (Header, breadcrumbs, footer, 404 page) Every web page has a different navigational structure according to the content they want to prioritize and the path they want users to follow. It’s interesting that some pages cleverly use the 404 page in their favor to facilitate navigation, including links to their portfolio or locations, so users can directly continue to explore the site. In order to create the best navigation experience, our team placed Belatrix’s differentiating factors at the heart of our UX strategy: Agile methodologies, our nearshore locations, and our personalized services.
Structure (this includes information architecture, home, products and services, internal page, contact us, work with us) The structure depends on the strategy of communication; what are organizations going to show users in the first place to engage them with their products? Some websites display on their first sections certifications and international recognitions, while others prioritize their methodologies and services. Also, our team found out that some features in certain websites go beyond their usual function. For example, some webpages offer different contact forms that are placed in different sections of the site. In some of them users can visualize special dates and days off according to the different locations of the organization’s offices. Based on these parameters, our team decided to add a new section: Industries. This section aims to improve the relevancy of our content for businesses in specific areas such as healthcare or fintech. Designers and stakeholders also decided to group “success stories” and “industry” sections to show real stories of how we have successfully worked in these areas.
Visual design (Typography, color palette, composition, responsive performing). This research provides a guide of what our competitors are visually doing on their web pages to obtain conversions and create loyalty in their customers. Based on this investigation, our team decided to create visual structures that reflect our expertise while evoking a sense of closeness. Thus, they combined a clean design, sans-serif typography, and a reduced color palette, with pictures that show people from our company in their everyday endeavours. There are also new micro interactions that make the user journey more attractive and enjoyable.
Interviews. The objective of the interviews is to explore users and stakeholders´ insights regarding the expectations of the new design. Our team interviewed 17 people from different areas of the company and based the interviews on five general questions:
What is this product going to be?
Who is this product for?
What worries you about this project? What’s the worst thing that could happen?
What should this project accomplish for the business?
How do you personally define success for this project?
There were also, a group of specific questions for stakeholders in the following areas:
Marketing
Comercial
Engineering
For each group of stakeholders we traced specific objectives: The interviews with marketing stakeholders aimed to understand how our clients should evolve, what is the role of the website in our marketing strategy and who are our competitors. The goal when interviewing sales stakeholders was to determine the profile of the user that will take the decision to purchase, what makes us more attractive than our competitors, and the aspects to improve. Finally, the questions for engineering stakeholders aimed to determine the technology that our engineers used in the development of the project.
The second phase focuses on putting in practice the UX strategy. Here, our UX designer along with other areas of the company such as marketing and content development, worked together to create the information architecture, content sheet, wireframes and prototypes.
The first step of this phase was to build the information architecture which focuses on organizing and labeling content to make it understandable to users. Our team reorganized the webpage by means of card sorting. This is a method that aims to prioritize and evaluate content based on the objectives of the business and how users tend to associate and group information. After analyzing the current aspects of the webpage, they came to the conclusion to reduce the principal sections, and created a new navigation map that is more fluent and coherent. It is the spine of Belatrix’s new website.
To create the content sheet, our team worked along with the thought leadership team who complemented existing information, and wrote new content for the new sections of the webpage. This demonstrates the importance of a collaborative workflow, which is part of Belatrix´s company culture, as well as showing the need for UX designers to take into account the importance of copywriting. The UX writer is, in fact, one of the emerging job titles in UX that we discussed in our recent article “The most important UX trends for 2018”
After developing the content sheet, our UX designer created wireframes, which are sketches of the structure of the website and carried out a visual benchmarking to build the visual design. After research and analysis, our team created the “look and feel” of the website. The “look” refers to the overall style of the webpage while the “feel” is the sensation a user has when using the interface. These elements determine the response of the components of the website and its tone or “personality”. In our case, we decided to create a clean elegant design that shows our expertise, with content that is interesting, brief and enjoyable. Our team also aimed to maintain a “friendly” tone that reflects the closeness we have with our clients and the personalized services that we offer.
The next step was to create an interactive prototype to detect and solve issues by means of usability tests with people from Belatrix.
In the final step of the second phase UX and UI designers worked together with technical stakeholders to
develop the HTML language
.
The launch strategy is composed of 2 steps: internal and external launch. For the internal launch our team created a campaign to let our employees know about the new release of the website, so they are familiar with it and are able to guide users through the interface and harness all the new possibilities that it offers.
For the global launch, the design, sales and marketing stakeholders created a campaign through emails, social media and content to promote Belatrix’s new website. They took into account the “niches” of our users, such as the channels through which they prefer to access our content, and the days and time they are most likely to visit social media.
Designers and stakeholders reviewed all the steps of the process in order to “polish” features and compare the metrics that were defined in the UX strategy with the current metrics. The objective of this iterative process is to track performance and collect information for further improvements.
We like to think of what we have done as a work in progress. We believe that there is always something to learn, and everyday we continue to work hard on improving our methods to provide you with the best experience.
Check out our new website here!
