CASE STUDY — SUMOL SUMMER FEST SITE
CASE STUDY — SUMOL SUMMER FEST SITE
Sumol Summer Fest — redesigning a festival site
Sumol Summer Fest
redesigning a festival site
Sumol Summer Fest — redesigning a festival site
PRODUCT DESIGN, INTERACTION DESIGN, PROTOTYPING
PRODUCT DESIGN, INTERACTION DESIGN, PROTOTYPING
Overview
Sumol Summer Fest already had a site. They just wanted it better: faster to navigate, cleaner on mobile, and more aligned with the energy of the festival.
This was a client project developed at a creative agency, in a team of two: UX/UI design and front-end development working closely throughout the process. I owned the full design side, from the initial audit and research through wireframes, visual design, prototyping, and coordination with the developer during the build.
The site went live ahead of the full lineup announcement, with the first confirmed artists already live.
The problem
Three things stood out after the initial audit:
Three things stood out after the initial audit:
BEFORE
BEFORE
·
Buying tickets required navigating away from the site entirely: no context was preserved
Buying tickets required navigating away from the site entirely: no context was preserved
·
Ticket options were buried below the fold, with no clear visual hierarchy between pass types
Ticket options were buried below the fold, with no clear visual hierarchy between pass types
·
The visual design felt generic: it could have been any festival, anywhere
The visual design felt generic: it could have been any festival, anywhere
·
Mobile experience was an afterthought: key CTAs were hard to reach on small screens
Mobile experience was an afterthought: key CTAs were hard to reach on small screens
AFTER
AFTER
·
Ticket CTA always visible in the sticky nav: zero steps to initiate purchase
Ticket CTA always visible in the sticky nav: zero steps to initiate purchase
·
Ticket types surfaced early with clear hierarchy and copy that explains each option
Ticket types surfaced early with clear hierarchy and copy that explains each option
·
Visual identity anchored in the festival's energy: dark, bold, loud
Visual identity anchored in the festival's energy: dark, bold, loud
·
Mobile-first layout, thumb-friendly navigation
Mobile-first layout, thumb-friendly navigation
Research
I started by mapping the existing user journey end-to-end: from landing on the homepage to completing a ticket purchase. Then benchmarked five international festival sites that handle high-volume ticket sales (Primavera Sound, NOS Alive, Coachella, Glastonbury, Rolling Loud).
I started by mapping the existing user journey end-to-end: from landing on the homepage to completing a ticket purchase. Then benchmarked five international festival sites that handle high-volume ticket sales (Primavera Sound, NOS Alive, Coachella, Glastonbury, Rolling Loud).
KEY INSIGHT
KEY INSIGHT
Festival users arrive with high intent. They already know they want to go, the site's job isn't to convince them, it's to get out of their way. Every extra click between landing and checkout is a potential drop-off.
Festival users arrive with high intent. They already know they want to go, the site's job isn't to convince them, it's to get out of their way. Every extra click between landing and checkout is a potential drop-off.
SECONDARY FINDING
SECONDARY FINDING
The "which ticket do I need?" question caused the most friction. Users landing on the ticket section couldn't quickly tell the difference between a 2-day pass and a daily ticket, descriptions were too long and the CTAs were identical.
The "which ticket do I need?" question caused the most friction. Users landing on the ticket section couldn't quickly tell the difference between a 2-day pass and a daily ticket, descriptions were too long and the CTAs were identical.
Design Decisions
01
How should the ticket CTA be positioned across the site?
How should the ticket CTA be positioned across the site?
OPTIONS CONSIDERED
–
A — CTA only on the dedicated /bilhetes page
A — CTA only on the dedicated /bilhetes page
–
B — Floating button that appears after scrolling past hero
B — Floating button that appears after scrolling past hero
C — Persistent "Comprar Bilhetes" in the sticky nav, always visible
C — Persistent "Comprar Bilhetes" in the sticky nav, always visible
Why we chose C
Festival users don't browse, they hunt. A nav-level CTA means zero friction regardless of where the user is on the page. Options A and B require the user to either navigate first or wait, both of which add unnecessary steps.
Festival users don't browse, they hunt. A nav-level CTA means zero friction regardless of where the user is on the page. Options A and B require the user to either navigate first or wait, both of which add unnecessary steps.
Outcome
The green "Comprar Bilhetes" button became a permanent anchor point across the entire site. Visually distinct from the rest of the nav — impossible to miss without being intrusive.
The green "Comprar Bilhetes" button became a permanent anchor point across the entire site. Visually distinct from the rest of the nav — impossible to miss without being intrusive.
02
How do we present the lineup without relying on a static image?
How do we present the lineup without relying on a static image?
OPTIONS CONSIDERED
–
A — Static JPG/PNG poster, non-interactive
A — Static JPG/PNG poster, non-interactive
–
B — Simple list of artist names
B — Simple list of artist names
C — Interactive typographic poster with artist names as clickable buttons, organised by day
C — Interactive typographic poster with artist names as clickable buttons, organised by day
Why we chose C
A static poster is a missed opportunity. By making each name clickable, the site turns the user's natural curiosity ("who is this artist?") into an action. The day-by-day organization also answers the immediate question for anyone still deciding which ticket to buy.
A static poster is a missed opportunity. By making each name clickable, the site turns the user's natural curiosity ("who is this artist?") into an action. The day-by-day organization also answers the immediate question for anyone still deciding which ticket to buy.
Outcome
Two blocks per day, with clear typographic hierarchy based on each artist's billing. Each name leads to a dedicated page with information about the artist, day and stage, links to Spotify, YouTube and Instagram, a video and a short description,always ending with a CTA to buy tickets.
Two blocks per day, with clear typographic hierarchy based on each artist's billing. Each name leads to a dedicated page with information about the artist, day and stage, links to Spotify, YouTube and Instagram, a video and a short description,always ending with a CTA to buy tickets.
03
Dark or light background for the festival hero?
Dark or light background for the festival hero?
OPTIONS CONSIDERED
–
A — White/light background, clean and modern
A — White/light background, clean and modern
–
B — Gradient hero with full-bleed photography
B — Gradient hero with full-bleed photography
C — Dark background with a looping festival video and artist names appearing in sequential fade
C — Dark background with a looping festival video and artist names appearing in sequential fade
Why we chose C
The festival energy is loud and nocturnal. A white background would have felt like a corporate event website.
The video immediately grounds the user in the atmosphere of the event, while the artist names fading in and out answer the first question anyone landing on the site will have.
The festival energy is loud and nocturnal. A white background would have felt like a corporate event website.
The video immediately grounds the user in the atmosphere of the event, while the artist names fading in and out answer the first question anyone landing on the site will have.
Outcome
The dark video hero became the entry point for the visual language of the entire site. Artist names appearing and disappearing in sequence create dynamism without relying on a static lineup layout.
The dark video hero became the entry point for the visual language of the entire site. Artist names appearing and disappearing in sequence create dynamism without relying on a static lineup layout.
04
How do we structure ticket options without creating confusion?
How do we structure ticket options without creating confusion?
OPTIONS CONSIDERED
–
A — Vertical list with all options and long descriptions
A — Vertical list with all options and long descriptions
–
B — Comparison table
B — Comparison table
C — Two distinct cards (Passe and Diário) with secondary options nested within each
C — Two distinct cards (Passe and Diário) with secondary options nested within each
Why we chose C
The primary decision is simple: am I going for both days or just one? The cards separate that choice immediately. Secondary options (camping, Fã Pack FNAC, Golden Circle upgrade) appear within each card without cluttering the initial decision.
The primary decision is simple: am I going for both days or just one? The cards separate that choice immediately. Secondary options (camping, Fã Pack FNAC, Golden Circle upgrade) appear within each card without cluttering the initial decision.
Outcome
Two cards side by side, each with its own variants and a dedicated CTA. The information hierarchy follows the decision hierarchy.
Two cards side by side, each with its own variants and a dedicated CTA. The information hierarchy follows the decision hierarchy.
05
How do we create a sense of community and closeness with the festival?
How do we create a sense of community and closeness with the festival?
OPTIONS CONSIDERED
–
A — Editorial highlights section with articles about the festival
A — Editorial highlights section with articles about the festival
–
B — Chronological social feed
B — Chronological social feed
C — Photo gallery from previous editions embedded in the site, with the official handle and hashtag
C — Photo gallery from previous editions embedded in the site, with the official handle and hashtag
Why we chose C
The festival already has an active community. Rather than creating new content, the gallery capitalises on what already exists: real photos of real people at the festival.
The handle and hashtag invite participation without any additional production effort.
The festival already has an active community. Rather than creating new content, the gallery capitalises on what already exists: real photos of real people at the festival.
The handle and hashtag invite participation without any additional production effort.
Outcome
A photo grid with the claim "Sol Amigos Música", the handle @sumolsummerfest and the hashtag #orgulhosamentesumol. Concert, crowd and behind-the-scenes imagery that communicates the energy of the event better than any copy could.
A photo grid with the claim "Sol Amigos Música", the handle @sumolsummerfest and the hashtag #orgulhosamentesumol. Concert, crowd and behind-the-scenes imagery that communicates the energy of the event better than any copy could.
06
How do we give historical context to the festival without interrupting the page flow?
How do we give historical context to the festival without interrupting the page flow?
OPTIONS CONSIDERED
–
A — Dedicated page for the festival's history
A — Dedicated page for the festival's history
–
B — Static section with the last three editions
B — Static section with the last three editions
C — Horizontal scroll with past edition posters, from most recent to oldest
C — Horizontal scroll with past edition posters, from most recent to oldest
Why we chose C
Horizontal scroll keeps the user on the page without the feeling of browsing an archive. The posters speak for themselves: lineup, year and visual identity of each edition, reinforcing the festival's credibility and longevity.
Horizontal scroll keeps the user on the page without the feeling of browsing an archive. The posters speak for themselves: lineup, year and visual identity of each edition, reinforcing the festival's credibility and longevity.
Outcome
A "Past Editions" section in horizontal scroll, with the official poster of each year organised in reverse chronological order.
A "Past Editions" section in horizontal scroll, with the official poster of each year organised in reverse chronological order.
Final delivery
A full redesign of the Sumol Summer Fest website, covering the homepage, individual artist pages, and a mobile-first experience across all breakpoints. The site went live ahead of the full lineup announcement, with the first confirmed artists already live.
The client was happy with the result. The site remains live at sumolsummerfest.com.
HOMEPAGE
HOMEPAGE
Artist page
Artist page
Information page
Information page
MOBILE
MOBILE
Hero
Artist page
Information page
Menu
You've hit the footer,
thanks for stopping by.
You've hit the footer,
thanks for stopping by.