01 OVERVIEW

01 OVERVIEW

Arroyo Stage & Screen

Designing a premium digital experience for a new acting program.

I designed and built a responsive website that introduces the program, establishes credibility, and gives prospective students a clear path to apply.

Role
UX/UI Designer + Framer Developer

Timeline
1 week to launch + 1 week of iteration

Tools
Figma, Framer

Deliverables
UX/UI Design, Responsive Design, Framer Development

Live Site

Visit Website

Arroyo Stage & Screen

Designing a premium digital experience for a new acting program.

I designed and built a responsive website that introduces the program, establishes credibility, and gives prospective students a clear path to apply.

Role
UX/UI Designer + Framer Developer

Timeline
1 week to launch + 1 week of iteration

Tools
Figma, Framer

Deliverables
UX/UI Design, Responsive Design, Framer Development

Live Site

Visit Website

Role
UX/UI Designer + Framer Developer

Timeline
1 week to launch + 1 week of iteration

Tools
Figma, Framer

Deliverables
UX/UI Design, Responsive Design, Framer Development

Live Site

Visit Website

02 THE CHALLENGE

02 THE CHALLENGE

brown pencil on white surface

Arroyo Stage & Screen was launching without an established digital presence, with only one week to design, build, and launch the site before enrollment opened.

The client had detailed information about the program, instructors, philosophy, and application process, but it needed to be organized into a clear and compelling experience.

The website needed to:

  • Establish trust quickly

  • Feel professional and premium

  • Explain the program without overwhelming visitors

  • Make the next step obvious

  • Work just as well on mobile as desktop

PROGRAM OVERVIEW CONTENT

  • Philosophy

  • Training Approach

  • Instructors

  • Schedule

  • Admissions

  • FAQ

  • Apply

03 DEFINING THE EXPERIENCE

03 DEFINING THE EXPERIENCE

I focused on helping visitors answer three questions as quickly as possible.

What is this?

Clearly introduce the program and what makes it different.

Is this right for me?

Explain the experience, philosophy, and value of the program.

How do I join?

Create a simple and obvious path to apply.

These became the foundation for the page structure and content hierarchy.

04 TURNING CONTENT INTO A CLEAR STORY

I organized the page around the order in which a prospective student would naturally want to learn about the program.

01
Introduction
What is
Arroyo Stage & Screen
02
The Program
What students will experience
03
Why Arroyo
What makes the approach different
04
Instructors
Who students will learn from
05
Details
Dates, structure, and key information

06
Apply
A clear next step for interested actors

This helped turn a large amount of information into one focused narrative.

05 VISUAL DIRECTION

MOOD & INSPIRATION

silhouette of three performers on stage
woman in white dress dancing on stage
person in black pants and brown shoe

COLOR PALETTE

Near Black
#070606
White
#FFFFFF
Warm Gold
#B9925A
Soft Gold
#D0AA6A
Primary Red
#CC102D

TYPOGRAPHY

Aa
Cormorant Garamond
(Headings)
Aa
Google Sans
(Body)

The visual direction draws from film, theater, editorial design, and subtle noir influences.


The goal was to create a cinematic, premium identity without relying on traditional acting-school clichés.

04 TURNING CONTENT INTO A CLEAR STORY

I organized the page around the order in which a prospective student would naturally want to learn about the program.

01
Introduction
What is
Arroyo Stage & Screen
02
The Program
What students will experience
03
Why Arroyo
What makes the approach different
04
Instructors
Who students will learn from
05
Details
Dates, structure, and key information

06
Apply
A clear next step for interested actors

This helped turn a large amount of information into one focused narrative.

05 VISUAL DIRECTION

MOOD & INSPIRATION

silhouette of three performers on stage
woman in white dress dancing on stage
person in black pants and brown shoe

COLOR PALETTE

Near Black
#070606
White
#FFFFFF
Warm Gold
#B9925A
Soft Gold
#D0AA6A
Primary Red
#CC102D

TYPOGRAPHY

Aa
Cormorant Garamond
(Headings)
Aa
Google Sans
(Body)

The visual direction draws from film, theater, editorial design, and subtle noir influences.


The goal was to create a cinematic, premium identity without relying on traditional acting-school clichés.

06 DESIGNING THE INTERFACE

06 DESIGNING THE INTERFACE

1. CLEAR OPENING MESSAGE

A focused headline, cinematic imagery, and a single primary action help visitors quickly understand the program and what to do next.

2. CLEAR APPLICATION PATHS

The primary Apply CTA appears at key decision points throughout the experience, giving interested students a clear next step whenever they are ready.

3. STRONG CONTENT HIERARCHY

Large headings, concise sections, and clear spacing break detailed program information into smaller, easier-to-scan sections.

4. RESPONSIVE EXPERIENCE

The layout, typography, and imagery adapt across screen sizes while preserving the same hierarchy and visual identity.

07 SHIPPING & ITERATION

The site needed to move from concept to launch in just one week, which meant prioritizing the information and interactions that mattered most.

After launch, I worked with the client for an additional week to refine the experience as new requests, content changes, and feedback came in.

EXTENDING THE EXPERIENCE

Weekly Program Breakdown

Detailed program information was organized into a clear week-by-week structure so prospective students could understand what they would experience.

Application Experience

A focused application flow gave interested students a simple next step without adding unnecessary friction.

WORKING THROUGH CONSTRAINTS

01

Tight Timeline

With enrollment approaching, I prioritized the core experience needed to launch confidently within one week.

02

Evolving Scope

New content and requests were introduced throughout the project, requiring me to balance new ideas with the original timeline and design system.

03

Client Alignment

Regular feedback helped refine the visual direction, messaging, and details while keeping the experience consistent.

OUTCOME

The final site gave Arroyo Stage & Screen:

A professional digital presence ready for enrollment

A clear way to communicate a detailed two-week program

A focused path from interest to application

A responsive experience across desktop, tablet, & mobile

A flexible structure that could accommodate post-launch updates

WHAT I LEARNED

This project reinforced the importance of prioritization and communication under a tight deadline.

As the scope evolved, a clear hierarchy and reusable design system made it easier to incorporate feedback without losing consistency.

NEXT STEPS

With more time, I would add analytics and evaluate:

Application CTA engagement

Application completion

Scroll depth

Mobile vs. desktop behavior

Where prospective students leave the experience

Those insights could guide future iterations as the program grows.

07 SHIPPING & ITERATION

The site needed to move from concept to launch in just one week, which meant prioritizing the information and interactions that mattered most.

After launch, I worked with the client for an additional week to refine the experience as new requests, content changes, and feedback came in.

EXTENDING THE EXPERIENCE

Weekly Program Breakdown

Detailed program information was organized into a clear week-by-week structure so prospective students could understand what they would experience.

Application Experience

A focused application flow gave interested students a simple next step without adding unnecessary friction.

WORKING THROUGH CONSTRAINTS

01

Tight Timeline

With enrollment approaching, I prioritized the core experience needed to launch confidently within one week.

02

Evolving Scope

New content and requests were introduced throughout the project, requiring me to balance new ideas with the original timeline and design system.

03

Client Alignment

Regular feedback helped refine the visual direction, messaging, and details while keeping the experience consistent.

OUTCOME

The final site gave Arroyo Stage & Screen:

A professional digital presence ready for enrollment

A clear way to communicate a detailed two-week program

A focused path from interest to application

A responsive experience across desktop, tablet, & mobile

A flexible structure that could accommodate post-launch updates

WHAT I LEARNED

This project reinforced the importance of prioritization and communication under a tight deadline.

As the scope evolved, a clear hierarchy and reusable design system made it easier to incorporate feedback without losing consistency.

NEXT STEPS

With more time, I would add analytics and evaluate:

Application CTA engagement

Application completion

Scroll depth

Mobile vs. desktop behavior

Where prospective students leave the experience

Those insights could guide future iterations as the program grows.

Create a free website with Framer, the website builder loved by startups, designers and agencies.