Roles:

  • UX
  • Development
  • Research
  • UI Design
  • Content Creation
  • Wireframes

Website

Overview

Dinamite Team is a Muay Thai gym based in Lisbon, Portugal. It has a reputation amongst the sports community and is know for being the best at its practice. However, there was a lack in their communication.

Even though they had a good work dynamic and an excellent work ethic, it wasn't being expressed properly. A lot of clients were based on the word of mouth and reputation. I decided to contact them in order to change that.

They expressed their needs, what they value and how they see the project going and I acted accordingly, always adding my point of view on how the strategy should be implemented and how they should approach some issues.

Goals

Clean the image of Muay Thai

Increase the convertion rate

Create a visual communication for the brand

Implement the Muay Thai Spirit in the website.

Keywords

Muay Thai

Competition

Team

Attendance

Dynamic

Health

Companionship

Problem

Combat sports are getting more and more common yet they can still be associated with ego, greed, violence, humiliation and toxicit masculinity. Even though these practises are based in respect, empathy, attendance and effort, a lot that is portraited in social media are the knock-outs and the press-releases of personal defame. Combat Sports has various questions to answer. Most people don’t want to get hurt, and this anxiety prevents them even to give it a try.
This is not a made up idea.

Reasearch

Competitive Research

In order to get a perception on how the industry works, i
went on to do a research of the competition. I was trying to discover their methods on:
Their design strategy
What values they show
Responsive design.
Between others

1Fight

Pros

  • Simple introduction
  • Direct information
  • Correct amount of information

Cons

  • Layout not breathing
  • Typography hierarchy
  • Bugs in menu

Jazzy Fight Club

Pros

  • Ok presentation
  • Graphically clean

Cons

  • No main page.
  • Starts on the about page.
  • Not enough info.

ZFortes Fight

Cons

  • Simple introduction
  • Direct information
  • Correct amount of information

Results

Most of gyms were facing the same problems: Efficent work,
lack of communication functionality.

User understanding

User research

In order to improve my perspective of Muay Thai and why people got so addicted to it, I interviewed 10 Muay Thai athletes and/or entusiasts. I was looking for a reason why people looked the at Muay Thai the way they did, how muay thai changed their lifes and how it should be communicated.

Turning point.

With the interviews i had the chance to meet several coaches of the sport. The reality is that in the 90’s the training was actually quite different from the present. It was more rough, more aggressive and to be aceepted you needed to show some stubbornness. The idea of sport combats today was influence by its practiced a long time ago. So in order to create a new perception we need a new way of contact.

“I started trainer duo to social media and in for the purpose to get fit”

“My first class was intimidating but you get used to it”

“Training a martial art, or sport combat is essential for the development of character”

Personas

With the result from the user research came the creation of personas. Tried to fill in the most of the results that the interviewed gave.

User Journey

The user journey was created in a form of understanding the process and what elements we should put first, when designing. Since emotion, is a very important aspect of this project, as well as safety, we need to craft precisely what the journey would be like.

Sitemap

After understanding the emotions and the journey of the user, I created this information architecture with the right display of information in order to guide and ensure that the values was given to the user. The sitemap was design with the information distributed to the respective page.

User navigation

After the information was distributed, the user navigation was formed in a way to instruct how the user would be guided.

Wireframes

After that, the lo-fi wireframes were formed. Displayed diferent layouts during pages and a initial video in the beginning. It was important that the information was correctly distributed and well spaced.

UI Kit

During the creation of the UI there were a few things to consider. To not frighten the user unconscious and to give the sense of safety there would need to be a good sense of space, so they wouldn't take only in the information and don’t read into their wrong perception what Muay Thai is. Therefore the user focussed only on the information needed. In that matter there were lines design to guide the eyes of the user. In case of fight or flight, I choose to guide.

H1- This a Heading all in uppercase

H2- This a Heading all in uppercase

P- This a Heading all in uppercase

Content Creation

In the production of the UI I did the content creation. I Created icons, photographed the staff and filmed the intro video and edited it. The icons had a thin line and match with the values. The photos captured the team (trainers, nutritionist, physiotherapist) and merchandising. The video was captured in order to show the practises involved. I tried to get a lot of the techniques and lot of action to showcase some adrenaline.

Adobe Illustrator

Adobe Premiere

Adobe Photoshop

Developement

After the whole design. I developed the website in HTML and CSS using Visual Studio code. I Made the website responsive in all matters and then it got published.

Conclusion

This was a long process project. It was interesting to see the sport industry and the Muay Thai community. It was a project that expanded and increased my skills off design and development, it was for sure a challenge and a pleasure. I also hoped that this project inspired other professionals to invest in their communication.