One of the most exciting projects I did in E2S Creativa was the web design for Girona Fibra, a telecommunications company from the Spanish province of Gironès, part of the Spanish telecommunications group Avatel.

Avatel recently acquired Girona Fibra, and despite being a company very rooted in its area, they didn't have a website up to par, so we were commissioned to redesign it along with a complete marketing campaign.

Basket Girona, the basketball team of which Girona Fibra is a sponsor

The schedule was tight, as Girona Fibra was to become a new sponsor for Basket Girona Club the next season, which was two months from then. The Girona Fibra logo would be visible everywhere at the matches, so their new website would have to be already published and properly working.

As a E2S Creativa’s web designer, my role was to think, design, and hand to the developers a valid web design for the new Girona Fibra website.

Briefing Keylines

We did a kick-off meeting with Avatel's marketing department which gave me the following briefing:

• They needed a design for the new Girona Fibra website, mobile and desktop viewports. They had their in-house developers, and given the little time we had, my work was to develop a highly detailed design so they could develop it as fast as possible.
• Girona Fibra already had corporate branding, and they wanted to keep it. Therefore, I had to preserve the logo, colors, fonts, and other elements that already existed and were used in other applications.


Girona Fibra proposed site map

• The sitemap they imagined was the following:
  
  
  • Home page with a header (mainly to show featured plans and promotions), a summary of plans, and promotional banners.
  • Their plans, which were divided into Fiber and Fiber + Phone should have specific landing pages.
  • About us page.
  • Contact page.
  • News page.
  • Legals page.
• The entire contracting process would be carried out by telephone, so the CTAs that the website would contain led to the same contact form, where the user would specify which rate was of interest and the Girona Fibra agents would contact the user later.
• There was an existing customer online platform, so the user had to have easy access to it at all times. Their contact e-mail and Whatsapp number had to be visible as well.

Competitive Analysis

After the kick-off meeting and with all the information I had, the logical next step was to study the competitors, for structure, features, and other elements.

I decided to analyze the websites of 3 of the biggest telecommunications companies in Spain, Vodafone, Movistar, and Orange. I decided to analyze these pages focusing especially on the structure and the properties that these offer.

Competitors Home pages

Competitors Plan landing pages

Vodafone

• Static Header
• Featured plans
• Plan cards on Home
• Single landing page for each plan
• Featured plan and promotion banners
• FAQs on product pages

• Without header banner (instead featured promotion cards)
• Without plan cards on Home
• Single landing page for each plan
• Featured plan and promotion banners
• FAQs on product pages

• Dynamic header (Carrousel)
• No Plan Cards on Home
• Category configurator instead of single plan landing page
• Featured plan and promotion banners
• FAQs on product pages

Wireframe Design Process

I extracted a lot of information from my Competitor's Analysis, and with it and the briefing information, I started drafting a mid-fi wireframe, to start defining a basic structure.

From the Competitor’s Analysis draw certain conclusions. Although 2 of 3 of the analyzed competitors had a single landing page for each plan, these mostly worked as a product page to be purchased, with an “extras configurator” before contracting the actual plan. As in Girona Fibra all the plan contracts are made on the phone and the extras were contracted along the phone contracting process, for me it made more sense to keep the plan landing pages to category pages (Fiber and Fiber + Phone).

My main premise was to keep things simple, so I tried to extract the structural philosophy of the pages I analyzed and adapt it to the reality of Girona Fibra, an operator with fewer rates and promotions than its competitors, which allowed for a cleaner structure and intuitive.

Initial Mid-fi Screenshots

• On the Home page, I decided to have a carousel header, as it has more flexibility than a static header. Below I would place the Plan Cards showing the available plans divided by the two existing categories.
• As all the plan contracting was to be made by phone, I placed a contact form on the bottom of each page, so it would be easy for the user to find it and contact Girona Fibra after reading all the information about their desired plan.
• As I acknowledged that it was a common practice and it would help the web positioning, I placed a drop-down FAQs section below each Category landing, to be filled with relevant and helpful information for the user.
• Additionally, as the briefing stated, I placed a contact button (that would lead to the contact page) and contact information, which would be always visible.

After finishing my Mid-fi draft I booked a meeting with Girona Fibra marketing department. They found the mid-fi wireframe very pertinent and aligned with their needs, just made some helpful observations:

• They wanted a better segmentation and a more visual solution for the two categories on the Homepage.
• They wanted to add an extras section on the Fiber + Phone page.
• They wanted a more visual solution for reason selector on the Contact page as well.

Amended Mid-fi Screenshots

I decided to solve the Homepage and Contact page problem similarly implementing an animated selector that would act as a switch to change categories. Finally, I added cards for the extras part to maintain the design consistent.

With all these changes applied, I could move forward to applying the style to my Mid-fi and creating a Hi-Fi prototype.

Application of Style

As I commented before, Girona Fibra already had a kind of corporate design system, wish although it was not very well defined, It sat some bases in color and typography that had to be respected.


Color

The main color of Girona Fibra was #2FB6BC, a greenish blue (or bluish green, as you prefer ;) ). From this color, they used some gradients, specially a 50%. Finally they used a sort of bluish black (#1A1A1A) as a Black color.


Typography

Girona Fibra typography is Aalto Sans Pro, in different weights.


Iconography

Apart from the “wireless waves icon”, Girona fibra didn’t have a preestablished icon system, so I created one. I wanted icons to represent the most basic products a company in their field offered, but I wanted their shapes to be friendly and pleasing to the eye.


Images

As I detected in my competitive analysis, the majority of telecommunications companies use many images of people, Avatel included, usually using technological products or carrying out actions according to the slogan of the promotion of the moment. With the help of my studio colleagues, we created images that met these requirements and were in line with the brand to be added on the website headers.

Hi-Fi Design

With the structure and style clear, I started to design the Hi-Fi prototype. In this stage, I started defining the Desktop viewport as well, since it was only a rearrangement of the elements present in the mobile viewport in this case. Still, I relocated and resized always thinking of the correct visualization and the correct legibility so that the final page could be responsive.

For this phase, Girona Fibra provided claims and texts for the promotions, headers, and About Us page, and I adapted my structure and graphic elements to them.

Hi-fi screenshots - Mobile

When I finished my design proposal, me and my colleagues arranged a meeting with Girona Fibra to show them the completed prototype in the two viewports, mobile and desktop, along with all the other deliverables of the marketing campaign we are preparing for them.

Hi-fi screenshots - Desktop

They appreciated the design and found it to be quite aligned with their needs and expectations. They did not require any major changes, so it was time to prepare the file for the handoff to the developers.

Here you can find the Figma file for the mobile and the desktop versions:

From the beginning, I already took into account the limited time we had to deliver the design and their time to implement it, and since no further collaboration with the developers was expected and required on my part while they were programming the website, I took charge of preparing a well-commented and clear design file, with the two viewports well differentiated and with the styles well defined, so that for them it would be the most understandable and the easiest to implement it.

The part of the design that was going to have to be updated most often would be the header carousel slides in the Home, so I created some templates in which the creatives could be designed in three different sizes (or use these sizes to create them outside of Figma), so that these could be adapted and displayed correctly in any viewport.

With this helper and some other tips, I believe that I created clear and concise deliverables, which contributed to a quick and correct coding of the design without major impediments.

You can find the final result at the following link: Girona Fibra.

Reflection

• Adaptability in Time Constraints: I learned to manage tight deadlines effectively while still delivering high-quality work. Implemented ways to ensure a smooth transition to development.
• Effective Briefing Practices: I realized the importance of clear and comprehensive briefings to accurately guide project goals.
• Iterative Design Approach: I discovered the value of revising designs based on feedback to achieve better outcomes.
• Client Collaboration: I learned to build strong relationships through open communication and responsiveness to feedback.
• Innovative Problem-Solving Solutions: I learned to implement creative solutions to address design challenges and improve functionality.

The redesign project for Girona Fibra was a comprehensive and rewarding experience that showcased the importance of aligning design processes with client needs and industry standards. By thoroughly understanding the client’s requirements, adapting design approaches to fit tight deadlines, and maintaining consistency with existing branding, I was able to deliver a website that met both functional and aesthetic goals.

The iterative design process, guided by detailed feedback and collaborative efforts with the development team, allowed for continuous improvements and refinements. The emphasis on responsive design principles ensured that the final product provided a seamless user experience across various devices, which is crucial for today’s diverse digital landscape.

Ultimately, this project reinforced the value of clear communication, effective problem-solving, and meticulous quality assurance. The successful launch of the Girona Fibra website not only enhanced their online presence but also solidified their position as a key player in the telecommunications sector in the region. This experience has further honed my skills in web design, client collaboration, and responsive design, which I will continue to apply to future projects.

Thanks for reading!