Avaí Futebol Clube | UX/UI Design

•

[PT/BR]

Introdução ao Projeto

O Avaí F.C. é mais do que um clube de futebol; é uma instituição com uma rica tradição local. Este projeto de redesign do site visava modernizar a estética, a experiência do usuário e as funcionalidades, diferenciando o Avaí F.C. no cenário do futebol brasileiro.

Briefing Inicial

O objetivo era claro: redesenhar o site antigo para criar uma experiência de usuário sem precedentes, alinhada com as demandas de um mundo cada vez mais digital. O foco estava em modernizar a estética, melhorar a experiência do usuário e adicionar funcionalidades inovadoras.

Desafios

UX/UI Design:

• Aceitação à mudança e inovação por parte dos torcedores e da administração do clube
• Website extenso com mais de 30 páginas
• UX Writing e auditoria de todo o conteúdo textual
• Aplicação devida das cores para evidenciar a tradição do azul do clube
Desenvolvimento:

• Integração automatizada do Sofascore com o Jet engine
• Constantes erros e ajustes necessários nas APIs integradas
• Prazo curto em relação à complexidade do projeto

Escopo do Projeto

O escopo do projeto revela a complexidade e a profundidade do trabalho realizado. Foram necessários 5 meses de esforços concentrados em UX/UI e desenvolvimento para trazer esta visão à vida.

[EN/US]

Project Introduction

Avaí F.C. is more than just a soccer club; it's an institution with a rich local tradition. This website redesign project aimed to modernize the aesthetics, user experience, and functionalities, setting Avaí F.C. apart in the Brazilian soccer landscape.

Initial Briefing

The objective was clear: to redesign the old website to create an unprecedented user experience, aligned with the demands of an increasingly digital world. The focus was on modernizing the aesthetics, enhancing the user experience, and adding innovative functionalities.

Challenges

UX/UI Design:

• Acceptance of change and innovation by both fans and the club's administration
• Extensive website with over 30 pages
• UX Writing and auditing of all textual content
• Proper application of colors to highlight the club's traditional blue
Development:

• Automated integration of Sofascore with Jet engine
• Constant errors and necessary adjustments in integrated APIs
• Tight timeframe relative to the project's complexity

Project Scope

The project scope, visualized in a Gantt Chart, reveals the complexity and depth of the work carried out. A total of 5 months of concentrated efforts in UX/UI and development were required to bring this vision to life.

[PT/BR]

Discovery

A etapa de "Discovery" foi fundamental para entender o cenário atual e estabelecer um ponto de partida sólido para o projeto. Dentro desta macro etapa, realizamos diversas atividades, incluindo "Desk Research" (pesquisas secundárias), análise do Google Analytics e benchmarking.

O "Desk Research" nos permitiu fazer uma análise aprofundada do site existente, identificando pontos fortes e fracos, bem como áreas que necessitavam de melhorias significativas. A análise do Google Analytics nos deu insights sobre o comportamento do usuário, enquanto o benchmarking com os principais clubes de futebol nacionais e internacionais focou na organização e composição visual dos elementos.

[EN/US]

Discovery

The "Discovery" phase was pivotal for understanding the current landscape and establishing a solid starting point for the project. Within this macro stage, we conducted various activities, including "Desk Research" (secondary research), Google Analytics analysis, and benchmarking.

The "Desk Research" allowed us to perform an in-depth analysis of the existing website, identifying strengths and weaknesses, as well as areas requiring significant improvements. Google Analytics analysis provided us with insights into user behavior, while benchmarking with leading national and international soccer clubs focused on the organization and visual composition of elements.

[PT/BR]

Define

A macro etapa "Define" foi crucial para a construção das três personas do projeto: Camarote, Sócio Setor A e Demais Setores. Utilizamos ferramentas como o mapa da empatia e o value proposition canvas para entender profundamente as necessidades e desejos de cada grupo. Isso nos permitiu definir o tom de voz esperado para cada persona, que posteriormente foi harmonizado em um tom de voz geral para o projeto.

É importante salientar a ausência da etapa de "Jornada dos Usuários". A razão para isso foi que a maior parte das páginas e funcionalidades já estava definida pelo cliente, além da necessidade de abordar uma vasta gama de conteúdos específicos, como "Institucional", "Conselho Deliberativo", "História", "Diretoria", entre outros.

[EN/US]

Define

The "Define" macro stage was pivotal for constructing the project's three personas: Luxury Box, Section A Member, and Other Sections. We employed tools like the Empathy Map and the Value Proposition Canvas to deeply understand the needs and desires of each group. This allowed us to define the expected tone of voice for each persona, which was later harmonized into a general tone for the project.

It's important to note the absence of the "User Journey" stage in this project. The reason for this was that most of the pages and functionalities were already defined by the client, in addition to the need to cover a wide range of specific content, such as "Institutional," "Deliberative Council," "History," "Board of Directors," among others.

[PT/BR]

ideate

Na fase "Ideate", a arquitetura da informação foi meticulosamente reestruturada para otimizar a usabilidade e a acessibilidade. A despeito da estrutura pré-existente, com páginas e funcionalidades já estabelecidas, a equipe identificou a necessidade de uma reavaliação crítica.

Utilizamos a técnica de Card Sort em um ambiente colaborativo com stakeholders do clube, visando priorizar e reagrupar conteúdos de forma lógica e intuitiva. Esse processo estratégico foi crucial para a elaboração de um sitemap coeso e eficiente. Posteriormente, desenvolvemos Wireframes de Média Fidelidade para visualizar a estrutura proposta, permitindo ajustes interativos antes da fase de design de alta fidelidade.

Essas etapas foram fundamentais para acomodar uma extensa gama de informações sem comprometer a experiência do usuário.

[EN/US]

Ideate

In the "Ideate" phase, the information architecture underwent meticulous restructuring to optimize usability and accessibility. Despite the pre-existing structure, with its set pages and functionalities, the team identified a critical need for reassessment.

We employed the Card Sort technique in a collaborative setting with club stakeholders, aiming to logically and intuitively prioritize and regroup content. This strategic process was pivotal in crafting a cohesive and efficient sitemap. Subsequently, we developed Medium-Fidelity Wireframes to visualize the proposed structure, allowing for iterative adjustments before the high-fidelity design phase.

These steps were instrumental in accommodating an extensive range of information without compromising the user experience.

[PT/BR]

Prototype & Delivery

Inicialmente, elaboramos um guia de estilo abrangente que serviu como alicerce para a construção da interface. Com a interface definida, avançamos para a prototipagem, onde cada elemento foi meticulosamente posicionado para garantir uma experiência do usuário coesa e intuitiva.

Paralelamente, a etapa de desenvolvimento foi marcada pela integração de APIs sofisticadas, como o Sofascore para estatísticas de jogos e o Flickr para a galeria de imagens do clube. Um dos desafios mais significativos foi garantir a responsividade do site em diversos dispositivos, assegurando que a experiência do usuário permanecesse consistente e envolvente, independentemente da plataforma utilizada.

[EN/US]

Prototype & Delivery

Initially, we crafted a comprehensive style guide that served as the foundation for interface construction. With the interface set, we moved on to prototyping, where each element was meticulously positioned to ensure a cohesive and intuitive user experience.

Running in parallel, the development stage was marked by the integration of sophisticated APIs, such as Sofascore for game statistics and Flickr for the club's image gallery. One of the most significant challenges was ensuring the site's responsiveness across various devices, making certain that the user experience remained consistent and engaging, regardless of the platform used.