Ranking Freestyle Italia

Building the identity and digital platform behind Italian freestyle rankings.

Ranking Freestyle Italia is an independent project for the Italian freestyle rap battle scene. It turns battle results into season rankings, statistics and profiles that follow every freestyler over time. We have been with it since the first logo: identity, the first website, the custom platform it runs on today, the graphics it publishes every week, and the tools it is growing next.

Industry
Hip-hop culture, digital media, data platform
Location
Italy
Year
2025, ongoing
Services
BrandDesignProductDevelopmentBrand IdentityUX/UI DesignWeb DesignCustom platform developmentData visualizationOngoing graphic design
4seasons of data on every profile, 2023 to 2026, unranked years included
9columns of data for each freestyler in the season table
2platforms over time: a CMS site first, a custom-built product today
The challenge

Giving structure to an evolving cultural scene.

The Italian freestyle scene is made of battles, artists, crews and organisers spread across the country. Results told the story of each artist, but they lived in videos, posts and memory, with no shared structure to collect and compare them.

Ranking needed an identity the culture would recognise, interfaces that make dense numbers readable, a platform able to grow with the project, and a communication system that could keep up with a season of weekly results.

Approach

Four pillars, one ecosystem.

Identity, data, product and communication grow together.

  1. 01A recognisable identityBold, competitive, made for the culture.
  2. 02Readable dataRankings, rounds and points anyone can follow.
  3. 03A product that scalesFrom a CMS site to a custom platform.
  4. 04A communication systemGraphics that keep pace with the season.
What we did

One project, step by step

Brand

Brand identity

An identity made to stand out, and to carry numbers.

1.1The mark and the coloursA bold R in a yellow seal, crowned, with “Ranking Freestyle Italia” running round the edge. Yellow on deep navy, the same pair on the site, in the tables and on every graphic.
Ranking yellow#FAE17ENight navy#1F2632Ink#11151CPaper#FFFFFF
1.2A condensed voice for names and numbersUppercase condensed type for freestyler names, titles and points: loud like a battle poster, compact enough for a table.
1.3Graphics that keep movingRanking news, match day updates and tributes: the identity lives on as a weekly flow of graphics for the site and social channels.
Brand

Editorial communication

Graphics that support the editorial project, week after week.

2.1Recurring formatsRanking News for platform updates, Ranking Rewind for the stories of the scene, with series that run over several episodes, like “Inside Joke, part 01”. Each format has its own label, so the audience recognises it before reading.
2.2One system, many storiesThe same building blocks every time: the R seal, the crown, the yellow and white condensed headline, the faded RANKING pattern and the site address at the foot. Photos and stories change, the brand stays recognisable.
2.3From the post back to the platformEvery graphic points to rankingita.com: news posts show the real interface, Rewind episodes lead to the blog and the freestyler profiles. Communication and product feed each other.
Product

Platform evolution

From a website to a custom-built digital product.

3.1Version 01, CMS basedDesigned in Webflow, converted with Udesly, managed in WordPress: rankings, freestyler profiles and event content went live, and the structure of the data was proven.
3.2Version 02, custom platformAs seasons, history and statistics grew, the product moved to its own custom architecture. Not a fix for the first version: the technology changed to fit the product.
Development

Data-driven UX/UI

Making every result count.

4.1A profile that tells a careerBio, class, city and record up top, then the season tabs from 2023 to 2026, and a quick suggestion link so the community can keep it correct.
4.2Head to head, battle by battleMost faced opponent, “bestia nera”, consistency bonus, and every match with event, round, year, video link and a won or lost tag.
4.3Built for the phoneOn mobile the side rails fold into a single menu, cards scroll sideways and the table keeps the columns that matter.
4.4Beyond the seasonAn all-time ranking that adds up every year, with bars to read the gaps at a glance, and a blog that tells the stories behind the numbers.
Key featureInterface systemCustom platform

One layout, three states. Space goes to the data.

The platform works like an app: navigation on the left, the season in the middle, news, newsletter and community on the right. Both side rails open and close.

When a rail closes, the table does not just stretch: it gains columns. With everything open it shows the essentials; with more room it adds average, TDS and rookie points.

  1. 01Left railNavigationFull labels, or a slim rail of icons.ExpandedIcons only
  2. 02CenterThe seasonCards, top freestylers and the table, which adapts its columns.Cnt · T.v. · 2° · 1° · SFMedia · TDS · Rookie
  3. 03Right railCommunityNews, newsletter, collaborate, socials.OpenClosed
ABoth rails open
Everything in view: the table keeps the core columns.
BNavigation collapsed
The left rail becomes icons, and “Media” appears.
CCommunity rail closed
More room for the season: TDS and rookie points join the table.
Timeline

From the first logo to what’s next

  1. 2025Brand identity and first platformThe visual identity, then a Webflow, Udesly and WordPress site with rankings, profiles and results.
  2. 2025 to 2026A deeper statistics systemSeason rankings, history, unranked artists, single contest results and event tiers.
  3. 2026Custom platformThe move from the CMS to a custom-built product.
  4. 2026Ongoing graphic designWeekly communication for the season, the scene and partners.
  5. Oct 2026Graphic generator, in developmentGraphic creation inside the platform.
Results

More than a website. A brand and digital product built to evolve.

  1. 01A brand identity that works on the site, in the tables and on social.
  2. 02Season and all-time rankings, profiles and match history that anyone can read.
  3. 03A custom platform with an adaptive layout, ready for new tools.
  4. 04A weekly flow of graphics, and a generator on the way.
See it liverankingita.comvisit the website
Ongoing

Not a launch. An ongoing evolution.

From data to design: the next chapter brings graphic creation inside the platform, close to the data it communicates. Shown here as a direction, not as finished features.

ProductIn developmentIntegrated graphic generatorPlatform data, then a visual composition system, then graphics consistent with the Ranking identity. Bringing database, design system and content production closer together.
BrandOngoingOngoing graphic designRanking updates, match day results, artist graphics, event content and partner presentations.
Next projectEl MichiMore than a vegan restaurant. A digital home for food, community, coworking and events.read the case study
Start a project

Tell us where you want to go.

We'll help work out the right approach. It starts with one question.

What do you need? Pick any, or none.
{{ p.name }}{{ p.name }}

{{ p.hA }} {{ p.hB }}

{{ p.lede }}

{{ U.industry }}
{{ p.industry }}
{{ U.location }}
{{ p.location }}
{{ U.year }}
{{ p.year }}
{{ U.client }}
{{ p.url }}
{{ U.services }}
{{ t.name }}{{ x.s }}
[IMAGE] {{ hero.cap }}
[IMAGE] {{ hero.cap }}[IMAGE] Mobile
{{ f.n }}{{ f.l }}
{{ U.chalEb }}

{{ p.chalH }}

{{ c.t }}
{{ U.apprEb }}

{{ appr.h }}

{{ appr.p }}

  1. {{ pr.n }}{{ pr.t }}{{ pr.p }}
{{ U.cinEb }}

{{ cin.h }} {{ cin.sub }}

{{ cp.t }}

{{ cin.url }}
{{ cin.recCap }}{{ cin.recNote }}
{{ cin.sbEb }}

{{ cin.sbH }}

{{ cin.sbP }}

  1. {{ fr.n }}{{ fr.t }}{{ fr.p }}
{{ cin.veoEb }}

{{ cin.veoH }}

{{ cin.veoP }}

  1. {{ vs.n }}{{ vs.t }}{{ vs.who }}{{ vs.p }}
  2. {{ cin.veoNote }}
{{ cin.syEb }}

{{ cin.syH }} {{ cin.sySub }}

{{ cin.syP }}

{{ ch.n }}{{ ch.t }}
{{ U.scrubLive }} · {{ cin.pctTxt }}
{{ cin.syNote }}
  1. {{ cc.n }}{{ cc.t }}{{ cc.p }}
{{ cin.lnEb }}

{{ cin.lnH }}

{{ cin.lnP }}

  1. {{ ls.n }}{{ ls.t }}{{ ls.p }}
{{ U.baEb }}

{{ ba.h }}

{{ ba.p }}

{{ U.before }}{{ ba.beforeWhen }}
{{ bi.cap }}
{{ U.after }}{{ ba.afterWhen }}
{{ ai.cap }}
{{ U.didEb }}

{{ U.didH }}

{{ c.terrName }}

{{ c.title }}

{{ c.intro }}

{{ st.num }}{{ st.t }}{{ st.p }}
[IMAGE] {{ st.a.cap }}[IMAGE] {{ st.a.cap }}[IMAGE] {{ st.b.cap }}[IMAGE] {{ st.a.cap }}[IMAGE] {{ st.b.cap }}[IMAGE] {{ st.c.cap }}[IMAGE] {{ st.a.cap }}[IMAGE] {{ st.b.cap }}{{ c.n }}{{ c.h }}Aa{{ p.typeName }}ABCDEFGHIJKLM abcdefghijklm 0123456789
{{ U.featEb }}{{ tg.t }}

{{ ft.h }} {{ ft.sub }}

{{ fp.t }}

  1. {{ fl.n }}{{ fl.site }}{{ fl.t }}{{ fl.p }}{{ fd.f }}
{{ sh.k }}{{ sh.label }}
{{ sh.note }}
{{ U.tlEb }}

{{ tlH }}

  1. {{ ph.when }}{{ ph.t }}{{ ph.p }}
    2.
{{ U.resEb }}

{{ resH }}

  1. {{ r.num }}{{ r.r }}
    2.
{{ U.quoteEb }}
{{ quote.text }}
[C]{{ quote.who }}{{ quote.role }}
{{ U.liveEb }}{{ p.url }}{{ U.visit }}
{{ U.ongEb }}

{{ ong.h }}

{{ ong.p }}

{{ og.terr }}{{ og.status }}{{ og.t }}{{ og.p }}
{{ U.nextEb }}{{ next.name }}{{ next.hA }} {{ next.hB }}{{ U.readCase }} [IMAGE] {{ next.cap }}
{{ U.moreEb }}{{ U.allWork }}
{{ tx.eb_start }}

{{ tx.start_h }}

{{ tx.start_lede }}

{{ tx.need_q }} {{ tx.need_hint }}
{{ cta }} {{ tx.or_write }} hello@beeasydesign.com