Business website

Comunicare Italiano

A company website where you can find all the information you need to begin your Italian learning.

Freelance project

João Pessoa, Brazil

Type

Researcher, Designer

Education

Oct 2023 - Mar 2024

Comunicare Italiano is an Italian language school in Brazil whose website was infiltrated by hackers last year, resulting in changes to the layout and content of the pages. However, this incident presented the ideal opportunity to redesign the website in alignment with the business's branding and values, and to enhance service visibility through a more structured Information Architecture.

The problem

Purpose

Location

Role

Time

Category

Research Analysis

To begin, I gathered data on the business's services and goals to obtain valuable insights for decision-making considering the client's preferences and values.

Then, by analyzing the original website's heatmaps, I identified who are the users, what they want and what they interact with.

The Company

Comunicare Italiano offers language courses for learning Italian and serves as a certification exam center. What sets the business apart is its experienced teachers and personalized teaching approach. They aim to convey a sense of quality while infusing fun and enthusiasm into the learning experience. Green is the brand's primary color.

The Users

I used both high-level user information provided by the business and Hotjar data to identify the following user characteristics:

The heatmaps collected in October 2023 indicate that users interact most with the Certifications and Courses sections on the homepage, along with the contact number of the company, despite it not being a clickable element (Heatmap 1). Likewise, the move map (Heatmap 2) confirms a particular interest among users in the Courses sections and in more detailed information about upcoming Certification exams.

Heatmap 1: Clicks on the homepage during desktop sessions.

Heatmap 2: Movements on the homepage during desktop sessions.

Competitive Audit

I conducted a competitive analysis of both direct and indirect competitors' websites to assess how our site compares to others. Our website will primarily showcase a list of services offered and provide easy contact options for users.

In addition to the landing page, the website will include sections such as Courses, Certification, and About. There will be clear calls to action to encourage users to contact the company, view the catalogue, and fill out a questionnaire regarding availability and needs.

Analyzing the competitors, I identified new sections to be introduced in the sitemap for the benefit of our users. These new sections, as outlined below, will be tested in the testing phase.

Due to numerous issues with the original website's layout, grid, readability, among others, I chose to streamline the research phase and launch an initial version of the website.

So after analyzing the research data, I drew some paper sketches to define the website's Information Architecture, and then I created a sitemap to outline the pages and sections. From there, I prioritized the most important ones for inclusion in the low-fidelity wireframe of the homepage.

Let's fix the obvious first!

Information Architecture

The previous website featured numerous buttons on the homepage, each leading to different course sections. To streamline navigation, I grouped all courses together on a single page and differentiated them from the Certifications.

Additionally, I created an About page to showcase the company and another page detailing both existing and newly implemented services, identified through competitive analysis and discussions with the client.

The sitemap consists of 7 pages besides the homepage, but only 4 appear in the top navigation bar. After defining the pages, I outlined the content of each section, marking with a letter those deserving to be on the homepage, whether due to their importance or for distinguishing Comunicare from other schools.

This also ensures all pages are represented on the landing page, with priority given to the most important ones based on research data (Courses and Certifications), positioned higher on the page.

Low-fidelity Wireframes

After meeting with the client again and collecting all the content for the selected sections to be featured on the homepage, I developed an initial version of the low-fidelity wireframe, integrating all the data gathered during the research phase.

Additionally, a new services page was identified as necessary during the meeting, which was later linked to the homepage through a new section (section F).

Working in low fidelity enabled me to distribute the text across the landing page, ensuring a balance between visual elements and textual content. This process was then replicated for all the other pages.

New section added

After defining the new information architecture, I proceeded to select colors, typography and other visual elements to craft the high-fidelity pages.

Colors

Buttons

Typography

Lively and engaging style

Diverse components, including emojis, vibrant icons, and staff member images, contribute to this effect. Moreover, the inclusion of hero images that reflect the characteristics of the target audience in key sections fosters a stronger human connection. The speech bubble immediately conveys the brand name Comunicare, which means "to communicate". All these visuals are chosen to align with the message of each section of the page, enriching and reinforcing it.

Additionally, a new version of the logo was crafted, making slight changes to better align with a more modern typography and lighter colors. This small adjustment ensures that it fits better in the header section.

High-fidelity UI Design

Original logo

New logo

Logical groups

Spacing

Layout grid: 12 columns

Width 64, Gutter 24

Font Measurements

Font: Plus Jakarta Sans

Contrast and Color Accessibility

I reviewed the designs to ensure they complied with WCAG AA standards for color contrast. As part of this process, I made slight modifications to improve the contrast of the text on the secondary button.

Canvas section: width 1250, length 800

Responsive UI Design

Even though my research indicated a higher number of sessions on mobile devices, I implemented a top-down design approach, starting from the largest screen down to the smallest screen to ensure all necessary elements were included on the larger canvas.

Then, all eight pages of the website were made fully responsive. This involved indicating to mobile users that they could scroll through the content, removing repetitive visual elements, reducing text content and titles, and in some cases, even hiding entire sections to ensure an optimized mobile experience.

Desktop view

Mobile view

After launching the website, I used observational tools to collect quantitative and qualitative data on user behavior. Additionally, I gathered feedback from real users through surveys.Then, I compiled all the insights and made some improvements based on my findings.

Alright, now let's discover how users interact with the website!

Usability Study

I wanted to examinate the usability of the website, including navigation, content layout, conversions, design bugs and overall user satisfaction.

For this reason, I divided the research into two stages: Observing the user and Asking the user. I used a combination of methods such as observational studies in the first part and surveys, and feedback widgets in the second one. All the insights from this research are available on the Miro board at this link.

Heatmaps Analysis

The first step was to set up a Miro board to compile data from the analysis of the heatmaps generated by Hotjar. I analyzed the scroll map, click map, and move map to understand user behavior across all eight pages of the website over the past three months, across all devices.

These initial observations (yellow notes) provided valuable insights on potential:

• assumptions to be validated (pink notes), for example by reviewing user session recordings;

• feedback to be gathered from users through widgets and surveys (blue notes);

• actions and changes to be implemented in further steps (green notes).

Sessions Recordings

Since no rage clicks or design bugs were identified previously, the main goal here was to discover improvement opportunities.

I selected four assumptions as urgent, based on features that are more profitable for the business and more useful for the users, and I classified them into three topics: navigation, content, and hesitation.

To find answers, I watched recordings from user sessions. Although some Hotjar functionalities were unavailable due to the free plan, like filtering by exit page, U-turns, etc., valuable insights were still gained.

Study Results

I. Observing the user

Six actionable insights were obtained from this stage of research: some of them directly led to changes to be made, while others will require further investigation in the next phase of research.

1. I N S I G H T // n a v i g a t i o n

   The click map of the Certification page shows users clicking frequently on the CTA button above the fold to enroll, but many don't scroll to see the procedure, as we can see in the scroll map. In the recordings, users only scroll after clicking multiple times on the enroll button, indicating the CTA may not effectively guide them through the process.

A C T I O N

• Change the CTA to link to the section that explains the procedure. This encourages users to scroll through the page and increases engagement.

2. I N S I G H T // c o n t e n t

   The second and third most clicked items on the Certification page are the tabs of the FAQ questions at the bottom of the page, which was confirmed in the recordings. This indicates that users may have additional questions not covered in the page.

A C T I O N

• Create a survey within Hotjar to gather feedback on users' perception of available information.

3. I N S I G H T // c o n t e n t

   The move map and click map on the Courses page indicate high user activity around the sections for Certification for citizenship and for the Army, which are also the main sources of income for the company.

A C T I O N

• Add a mention on the Homepage for exams and courses aimed at the Army;

• Add a new section on the Homepage for citizenship certification, including a specific CTA button explaining how to obtain it;

• Include citizenship as a benefit of obtaining the certification.

4. I N S I G H T // h e s i t a t i o n

   The most clicked item on the Courses page is the CTA button leading to the questionnaire, but many users don't fill it out, resulting in a U-turn, as confirmed in the recordings.

   Users click on the text fields but not on the submit button, as shown in the click map, confirmed by the move map's high activity areas.

A C T I O N

• Change the button label to reduce confusion and U-turns.

• Set up an Exit Survey within Hotjar to understand user expectations and prevent drop-offs on that page.

5. I N S I G H T // c o n t e n t

   The click map of the Services page indicates that users are most interested in the following services:

   • Language Resources

   • Linguistic Interpretation

   • Study Vacation

A C T I O N

• Reorder tabs based on top 3 user clicks.

• Set up a survey to understand which services are most useful for users.

6. I N S I G H T // n a v i g a t i o n

   The primary CTA above the fold on the homepage is not getting enough clicks by users.

A C T I O N

• Change the CTA label to improve clarity and attract more clicks.

Surveys

I set up three short surveys inside Hotjar to be displayed to users in specific parts of the website:

Feedbacks

I also set up a feedback widget inside Hotjar to gather responses about overall user satisfaction with the website. The widget also allows users to select specific parts of the page, indicating which elements they like and which I should improve.

Study Results - In Process

II. Asking the user

I created a series of Instagram stories to promote the new website and attract new users to respond to the surveys. The data from these surveys is still being processed and will be available soon.

Iteration and Improved Design

Here's an updated version of the website with the implemented changes.

Before

After

Before

After

Before

After

Before

After

Before

After

New section added to the homepage

Before

After

Some metrics

The number of sessions on the website increased over the last three months compared to the metrics collected in October 2023 before the redesign.

• Using Wix as the client’s chosen website builder limited design choices in terms of UI elements, animations, etc., compared to other platforms.

• AI has proven to be extremely useful in the design workflow, especially in brainstorming ideas for page sections.

• Writing marketing content for a real client and making adjustments during the design process after every meeting was a great learning experience!

• I simplified the company's processes by creating forms and links on the website that were previously sent manually and not standardized, like an automated proficiency test on Formaloo.

Insights and Challenges

What's next?

• Add more free resources for users and expand the tests on Formaloo.

• Optimize the website for search engines to improve its visibility online.

• Review alt text to ensure it benefits both SEO and site accessibility.

• Keep monitoring the website through Hotjar, making improvements, and testing them. Design is never done!