01
Audience behavior
Research translated viewing habits into content hierarchy, rhythm, and clearer calls to action.
Digital identity / Launch experience
Youth
Radio
Phase one / Ongoing
Reintroducing a youth-led media platform for its next chapter.
Working hero placeholder
Add approved launch-page imagery or project film
Our voices,
amplified.
Project overview
Youth Radio is returning after a pause. I designed a launch page to rebuild trust and encourage new student enrollment, informed by audience research and built in Webflow.
- Role
- Lead UI/UX and visual design, audience research, launch-page identity, Figma wireframes, Webflow build
- Primary challenge
- Create an immediate, credible “we’re back” experience that gives prospective students a clear reason to sign up
The opportunity
A trusted return for young creators.
The launch needed to carry Youth Radio’s history forward without making the experience feel archival. The work began by investigating how Gen Z and Gen Alpha audiences view, scan, and respond to digital content.
That research informed a custom layout that prioritizes short, direct entry points, an abstract visual rhythm, and clear paths to applying, supporting the work, and exploring the organisation’s story.
Research references
Research that shaped the launch.
The direction began with Youth Radio’s purpose, then translated audience behaviour and media habits into a clear visual and interaction approach.
Youth Radio’s purpose
The relaunch needed to feel like a credible return to an active community of makers, artists, journalists, producers, and mentors, not a campaign speaking at them.
How the audience moves
The audience is fluent in digital interfaces and quick to recognise what feels performative. The experience needed clear entry points, room to explore, and direct reasons to engage.
Visual principles
The direction prioritised a human, grounded tone, restrained visual structure, and enough flexibility to hold different voices, moods, and intensities without imposing one personality.
NTS
An audio-first media platform where a strong identity supports discovery without overpowering the work.
MCA Chicago
A strong identity and clear layout let the cultural programme lead.
The Whitney
Editorial hierarchy and restrained typography create a calm, authoritative container for the work.
Kane Robinson
Raw editorial structure, archival imagery, unexpected humour, and surprising moments of motion create a distinctive reading experience.
Style guide
A flexible visual toolkit for the return.
The style guide supports the launch page. The full site will undergo major style changes informed by a presentation and feedback session with Youth Radio students.
01 / Typography
Space Grotesk gives the launch a clear, modern editorial voice without overpowering youth-made work. IBM Plex Sans supports readable long-form text and metadata, with fluid heading scales across screens.
Type in use / ResponsiveSpace Grotesk + IBM Plex Sans
H1 / 52–92 / 1.1
We’re back.
Louder.
H2 / 30–48 / 1.1 · Max width 672
The work starts with young creators.
Body / 16 / 1.45
Editors and mentors support the process, while the voice stays with the people telling the story.
Metadata / 14 / 1.4
Responsive scale H1 clamp(52px, 4.26vw + 37.5px, 92px) / 1.1 H2 clamp(30px, 5.5vw, 48px) / 1.1 · max 672px Body 16px / 1.45 · Meta 14px / 1.4
02 / Colour
An EQ-inspired system uses high-contrast foundations for the interface, with green and red reserved for feedback states. The system stays deliberately simple, allowing student-made work to bring colour and energy to the page. Subtle hover states preserve contrast while confirming a button has changed. The applied examples document the built page’s CTA, validation, and confirmation behavior.
Colour storyEQ inspiration
Direction
Colours
#0E1110Backgrounds, strokes and typography on light surfaces
#F5F7F6Backgrounds, strokes and typography on dark surfaces
#DDE1DFHover and pressed state for primary CTAs
#00C98BEQ green for success notifications
#D94A4AEQ red for critical errors
Applied states
Text updates from Youth Radio.
Text updates from Youth Radio.
Or get text updates.
We’ll text occasionally. Standard message rates may apply. Reply STOP to unsubscribe. We’ll never sell your info.
Please enter a 10 digit phone number.
Or get text updates.
You’re subscribed. Thanks for staying close.
03 / Motion
Motion follows the same honest, low-pressure approach: no fluff or decoration, only clear feedback and navigation that reflect how young people actually use the web.
Interface language
Functional motion
Scroll to test
Content stays in focus.
Scroll down to clear the header. Scroll up to reveal the wordmark, then click or tap it to return immediately to the top.
The action is direct, not decorative.
CTA feedback
A restrained grey shift confirms hover and pressed states while preserving contrast.
Wordmark action
The wordmark is the return-to-top control. Its response is immediate, keeping navigation clear and familiar.
Motion principle
Movement supports orientation and feedback. It never competes with youth-made work.
01 / Layout system
Built for how the audience browses.
02
Figma wireframes
Wireframes established the page structure before visual design and Webflow implementation.
03
Responsive system
The layout was designed to retain clarity and energy from large screens through mobile.
Figma wireframes / Hero
At 1280px, the page uses 24px margins and gutters. Concise, direct hero copy fits the research-led hierarchy, while the asymmetric composition guides the eye left to right. Primary information stays left-aligned within each content zone, giving the asymmetry a dependable reading order. The second paragraph extends below the fold to invite scrolling, and the slightly off-grid video adds restrained tension and colour to the otherwise monochrome hero.
Figma wireframes / History
Rather than a long scroll, the history becomes an optional carousel that highlights key events in outlined cards. Within each card, the date, title, and body share a left edge so the sequence stays easy to scan as it moves. Sharp brackets reinforce the page’s abstract, text-led simplicity, while the divider draws on the graphic-equalizer motif from the colour-page style guide. The carousel dividers were removed in the final page because they obscured the next card at smaller breakpoints.
Figma wireframes / Calls to action
CTA language was deliberately low-pressure. “Get our stories” offered a gentler alternative to donating, while “No spam” and “Unsubscribe anytime” reduced friction and reassured visitors they remained in control. The donation and sign-up paths occupy distinct zones, but their content remains left-aligned so each choice is immediately legible. In a later stakeholder meeting, this was replaced with the single CTA, “Get text updates”: the team felt Youth Radio’s established trust supported a more direct request for a phone number. That assumption proved correct in the conversion figures reported during the fall recruitment drive.
Figma wireframes / Tablet to mobile
The hero responds from tablet to mobile by preserving the copy as the reading anchor while the video shifts to suit the narrower composition. At tablet, the CTAs stack vertically to clear space for the video to move beneath them. The video keeps an automatic vertical position, so it follows the taller CTA stack instead of relying on fixed breakpoint offsets. The movement protects hierarchy and keeps the image expressive without competing with the message.
Launch identity
A launch identity for the return.
The identity starts with Space Grotesk, then reshapes its letterforms into a bold wordmark and compact yr monogram. The wordmark carries the main identity, while the monogram works at the smaller sizes needed for social avatars.
The direction is neo-brutalist: high contrast, geometric forms, and an industrial but deliberate feel. The custom lowercase y has a squared-off descender that suggests an audio lead being plugged in, connecting the mark to Youth Radio’s broadcasting roots. In the social avatars, its inner u-shape is rounded to make the mark feel more approachable at a smaller scale, where it also resembles a pause button. A black-and-white palette keeps the identity clear across digital screens and print.
02 / Trust through history
A legacy designed to build trust.
The custom horizontal card sequence lets visitors move through decades of Youth Radio’s story without turning the page into a long, passive timeline. Key moments are outlined to guide exploration.
Swipe or use arrow keys to explore
1993
Opening in Berkeley
Youth Radio opens in Berkeley, CA to amplify youth voices through journalism and audio storytelling, during a period of limited youth representation.
Late 1990s
Youth voices on air
Youth-produced reporting and commentary brought perspectives rarely heard in mainstream media, grounded in lived experience and community.
2000s
Awards
Youth-produced journalism earns major awards, validating youth-led reporting at a national level. Alfred I. duPont-Columbia Award (2000), Peabody Award (2001), Edward R. Murrow Award (2001).
2001–2004
National breakthrough
Youth Radio’s work reaches audiences far beyond the Bay Area, with youth-produced stories airing on national public radio and other major outlets.
2000s–2010s
Partnerships
Partnerships with media organizations helped distribute youth stories widely, connecting local voices to national and global conversations.
2010–2014
Digital-first shift
As media changed, so did Youth Radio, expanding beyond broadcast to become a digital-first newsroom led by young creators and collaborators.
2014–2023
Building skills that last
Youth Radio continued training young people as journalists, creators, and mentors, supporting voices that carried their skills into the wider world.
2024
A pause
Work paused for impact. Youth Radio paused operations. The work stopped, but the need for youth voices did not.
2026
We’re back
Youth Radio is back, coming forward. It has been rebuilding new pathways for young people to create, publish, and be heard in today’s media landscape.
1993–2026Outlined cards mark key moments
In use
Session recordings showed visitors moving through the full page and frequently engaging with the history sequence. This suggests the legacy content gave new audiences useful context as they decided whether to take an action.
The history sequence required responsive refinement during the Webflow build. Mixed card lengths, horizontal snapping, and smaller landscape screens were tested in-browser to keep the interaction readable and easy to navigate.
Webflow launch page
The full-page launch screen follows the history interaction, showing where it sits within the overall composition at a readable scale.
Launch results
A return that reached people.
Live PostHog data shows that the launch page gave recruitment traffic clear next steps. During the recruitment drive, 4.15% of homepage visitors selected Apply Now, while Get Text Updates created a lower-pressure route for prospective students to stay connected.
18.7K
Homepage unique visitors
502
Apply Now link visitors
613
Get Text Updates page visitors
4.15%
Apply Now conversion during recruitment drive
What the launch makes possible
A launch platform with room to grow.
The launch page established a flexible digital foundation for Youth Radio’s return. Its live performance data now informs the information architecture, interaction priorities, and next phase of the full-site redesign.