Website Brief
Yixin(Essie) Zeng / GR 605 OL1: DIGITAL DESIGN STUDIO 1 / Spring 2022 ROXIE THEATER
Introduction
The Roxie Theater, also known as the Roxie Cinema or just The Roxie, is a historic movie theater, founded in 1912, at 3117 16th Street in the Mission District of San Francisco. It is a non-profit community arthouse cinema.
The Roxie Theater, a San Francisco landmark in the Mission District, brings people together to meet and connect through distinctive cinematic experiences. Guided by the passionate belief that engaging with a movie doesn’t end with the credits, invite filmmakers, curators, entertainers, and educators to interact with audiences. Provide inspiration and opportunity for the next generation and serve as a forum for the independent film community reflecting the spirit of the diverse Bay Area population.
Through daily film screenings, festivals, series, special events, copresentations, and educational programs, the Roxie facilitates a space for people of all ages and backgrounds to gather, connect and learn about the world and one another in an accessible environment.
Target Audience
The general public . Audiences interested in films, experimental films, film festivals, etc., can browse the website for information, pu rchase, and book tickets.
Film industry. Theater invites filmmakers, curators, entertainers, and educators to interact with audiences.
Film major students . Film or other art industry students can learn some new film information through the website, pay attention to indus try trends.
Onsite and Online Media . Bringing the entertainment media industry to the attention of new events and projects in theaters through website updates. Conduct offline interviews or online news reports.
2
Website Activities and Objectives
3
user to engage
the following activities on our
Items are listed in order of importance:
current and upcoming movie information View Select and Buy Tickets Buy membership Serving Filmmakers Donate to support theaters Rental venue
about theater information (profile, history, transportation routes, food, etc.)
to theater Social Media Platforms (Facebook, Instagram, Twitter)
The general
in
website.
View
Learn
Jump
Navigation Structure
improved current
HOMEPAGE
ABOUT About History People Community Job and Internship Opportunities Contact Volunteer
CALENDAR
VISIT
Web Calendar Printed Calendar
Health and Safety Protocols & Precautions Ticket Info Directions & Map Accessibility at the Roxie Food and Drink
MEMBERSHIP
Roxie Member Gateway PROGRAMS Roxcine Outlook
SUPPORT Donate Forever Roxie Volunteer Subscribe
FOR FILMMAKERS
Roxie Review Artist Services Roxie Mixtape
RENTALS
HOMEPAGE
ABOUT Introduction History People Community Contact Visit
Health and Safety Protocols & Precautions Directions & Map Accessibility at the Roxie Food and Drink
WATCH MOVIES Calendar
Playing this week Coming soon Program ROXCINE OUTlook Ticket info SERVICES For filmmakers Roxie mixtape Rentals SUPPORT Donate Volunteer Job and Internship Opportunitie s ACCOUNT
Membership Recent watching Subscribe Setting Sign out
4
Website Features
Moviegoers buy tickets
(Check the latest released movie information, check the screening time)
Movie fans buy a membership
Serving for film producers (Helps review screen effects tests, technical checks, etc.)
Provide sponsorship support donation methods
Open rental channels
Introducing Theater (information, history, programs, profiles, etc.)
Competitor Website
Balboa Theatre https://www.cinemasf.com/
San Francisco Cinematheque https://www.sfcinematheque.org/
Landmark's Opera Plaza Cinema https://www.landmarktheatres.com/san-francisco/ opera-plaza-cinema
The New Parkway Theater https://www.thenewparkway.com/
5
Design
The design goal is to design a more attractive and user-friendly theater website based on the theater's history, content, and positioning, in order to increase the theater's attention, audience, membership, and subscriptions.
KEY
WORDS: Modern, Systematic, Geometric, Elegant
6
Website Proposal
ROXIE THEATER
Yixin(Essie) Zeng / GR 605 OL1: DIGITAL DESIGN STUDIO 1 / Spring 2022
Introduce Project
This website design project is a semester project of GR 605 OL1: DIGITAL DESIGN STUDIO. I chose an independent movie theater:
The Roxie Theater. The Roxie Theater, a San Francisco landmark in the Mission District, brings people together to meet and connect through distinctive cinematic experiences. The Roxie Theater provides inspiration and opportunity for the next generation and serves as a forum for the independent film community reflecting the spirit of the diverse Bay Area population.
The design goal of this project is to design a more attractive and userfriendly theater website based on the theater's history, content, and positioning, in order to increase the theater's attention, audience, membership, and subscriptions.
List
of business goals
Provide users with a better experience
Increase the theater's attention
Get more audience, membership, and subscriptions
Embody the features, style, and positioning of the theatre
Better display of effective information through the website
Brand Identity
The Roxie Theater, also known as the Roxie Cinema or just The Roxie, is a historic movie theater, founded in 1912, at 3117 16th Street in the Mission District of San Francisco.
It is a non-profit community arthouse cinema.
The Roxie Theater, a San Francisco landmark in the Mission District, brings people together to meet and connect through distinctive cinematic experiences. Guided by the passionate belief that engaging with a movie doesn’t end with the credits, invite filmmakers, curators, entertainers, and educators to interact with audiences.
2
Constraints
The Roxie Theatre is a long-established non-profit theatre with an outdated website and insufficient design funding. The current website has a lot of information content, but there is no good organization and hierarchy, which will reduce the user's experience. On the whole, it is just a pile of information, without good design conditioning, a large amount of text content will make users feel bored and reduce their interest. At the same time, the highlights of the theater's characteristics are not well displayed.
Solution
Based on the theater's history, content and positioning, redesign a more engaging and user-friendly theater website to increase the theater's attention, audience, members, and subscriptions. An improved website needs to be well organized, with a clear hierarchy, and easy for the audiences to use. In the end, it can bring more users to the theater and more opportunities for independent filmmakers to show.
KEYWORDS: Modern, Systematic, Geometric, Elegant
5
Style Direction
5
Site Map
ROXIE THEATER
Yixin(Essie) Zeng / GR 605 OL1: DIGITAL DESIGN STUDIO 1 / Spring 2022
Sketch
Site Map
Digital Site Map
Navigation Terminology
ROXIE THEATER
Yixin(Essie) Zeng / GR 605 OL1: DIGITAL DESIGN STUDIO 1 / Spring 2022
Navigation Terminology
Navigation Terminology
Navigation Terminology
Navigation Terminology
Personas & Scenarios
ROXIE THEATER
Yixin(Essie) Zeng / GR 605 OL1: DIGITAL DESIGN STUDIO 1 / Spring 2022
PERSONA OF ROXIE THEATER Age Occupation Address Income 28 Programmer $85,105/ year San Francisco South Bay Price Name Jacob
working after graduating
college, and friends
in school
work.
lonely, he
movies,
would
movies,
films and theater
downtown
movies every
BIO & LIFESTYLE HABITS Location Time Facilities environment Style sense Unique content Audiences Reviews PREFERENCE Frequency SOCIAL MEDIA MOVIE TYPES PRIORITIES: Choose a theater ◆ The theater address is too far from Jacob's residential address, and it takes a long time in traffic every time. ◆ Because of work, the movie time he can choose is very limited. Theater activities Purpose Watch movies with 3 or 4 times a month Dating, relaxing, following actors or directors Self, lovers or friends FRUSTRATIONS Facebook, Instagrams Action Mystery Comedy Drama Fantasy Horror Thriller Western Art film Romance
A few years ago, Jacob started
from
who were
went to other cities because of his
Because of feeling
started watching various
but the theaters in the South Bay
only show mainstream
which were not to his taste. He found Roxie on the Internet, and he likes independent
culture very much. He drives an hour-long car
to watch
time.
PERSONA OF ROXIE THEATER Age Occupation Address Income 22 Film major student Part-time theatre staff $45,655/ year San Francisco Price Name Mia Mia
of
film director when she
and she
filmmaking
San
she
a movie
that insists
school art and independent films, with
of
movies
She
membership and subscribed
weekly,
was
HABITS Location Time Facilities environment Style sense Unique content Audiences Reviews PREFERENCE Frequency SOCIAL MEDIA MOVIE TYPES PRIORITIES: Choose a theater ◆ Mia is a bit of a clean freak so the cinema seats are a bit old and uncomfortable and not very clean. ◆ She often watches movies alone, but for safety's sake, she can only choose movies during the day. Theater activities Purpose Watch movies with 4 or 6 times a month Relaxing, Study following movie festival Self, classmates or friends
Instagram, Facebook, Twitter, Flixster, Spout Action Mystery Comedy Drama Fantasy Horror Thriller Western Art film Romance
dreamed
becoming a
was in middle school,
now studies
at the San Francisco Art Institute. In
Francisco,
discovered the Roxie Theater,
theater
on promoting old-
a lot
cool
she can't see anywhere else.
enjoyed her time at Roxie, she bought a
to the theatre
she really broadened her horizons and
inspired at Roxie. BIO & LIFESTYLE
FRUSTRATIONS
PERSONA OF ROXIE THEATER Age Occupation Address Income 45 Film Developer $95,105/ year Oakland Price Name Hiroki Sato Focusing on independent films and up-and-coming directors in the industry is his career requirement. Roxie provides a great environment where he can often interact with more producers and directors, as well as a large audience of independent film fans. Roxie is one of Hiroki's favorite movie theaters in San Francisco. Not because it's modern or the sound and video stand out, but because it has a soul and its own culture. BIO & LIFESTYLE HABITS Location Time Facilities environment Style sense Unique content Audiences Reviews PREFERENCE Frequency SOCIAL MEDIA MOVIE TYPES PRIORITIES: Choose a theater ◆ Hiroki has high requirements for all aspects of the movie, and the seats and hardware facilities make him feel less comfortable than other theaters. ◆ As a film developer, he hopes to have a bigger occasion to interact with the audience. Theater activities Purpose Watch movies with 1 or 2 times a week Working, study Self, colleagues, friends FRUSTRATIONS Instagram, Facebook, Twitter, Flixster, Spout Action Mystery Comedy Drama Fantasy Horror Thriller Western Art film Romance
Moodboard
ROXIE THEATER
Yixin(Essie) Zeng / GR 605 OL1: DIGITAL DESIGN STUDIO 1 / Spring 2022
Moodboard Keywords ◆ Modern ◆ Systematic ◆ Geometric ◆ Elegant
Styletile
ROXIE THEATER
Yixin(Essie) Zeng / GR 605 OL1: DIGITAL DESIGN STUDIO 1 / Spring 2022
Styletile Logo: Colors: Typeface: Button: This is an Example of Heading text This is an Example of Subtitle text This is an Example of Body copy #27558a #c13d40 #343234 #ffffff C: 89 M: 70 Y: 29 K: 0 C: 30 M: 89 Y:75 K: 0 C: 0 M: 0 Y: 0 K: 0 C: 79 M: 75 Y: 70 K: 45 Halyard Display Bold 30pt Halyard Micro Light 20pt Helvetica Light 14pt Get Tickets Learn More Get Tickets Learn More Mouseover Display Red Black White Blue Sample icon: This is an Example of Heading text This is an Example of Subtitle text This is an Example of Body copy Helvetica Bold 14pt This is an Example of Body copy
Storyboard
ROXIE THEATER
Yixin(Essie) Zeng / GR 605 OL1: DIGITAL DESIGN STUDIO 1 / Spring 2022
Website 1 Received a subscription email from the cinema, then click on the link to buy movie tickets
Storyboard
Website 2 Had interested after seeing the trailer on YouTube, so buy the ticket on the website
Storyboard
Website 3 Completed own independent film, book the screenings on the website for tech checks
Storyboard
Website 4 Plan to watch a movie when get off work
Storyboard
Storyboard
Mobile 1 Chat with friend on mobile, and plan a movie date
Storyboard
Mobile 2 Noticed movie information while browsing Twitter, buy tickets on mobile
Storyboard
Mobile 3 Plan relaxation activities on holiday, buy movie tickets on mobile
Storyboard
Mobile 4 Shopping and passing by the cinema, buy movie tickets on mobile
Storyboard
ROXIE THEATER
Yixin(Essie) Zeng / GR 605 OL1: DIGITAL DESIGN STUDIO 1 / Spring 2022
Storyboard
Scenario 1 Browse movies and details on your phone, choose time and genre and pay, and finally check movie tickets.
Storyboard
Scenario 1 Browse movies and details on your phone, choose time and genre and pay, and finally check movie tickets.
Storyboard
Scenario 2 Learn about Roxie's volunteers and apply to submit own personal information
Storyboard
Scenario 3 Learn about Roxie's Programs, view related information and archives related to the movie program
Web Fonts Yixin(Essie) Zeng / GR 605 OL1: DIGITAL DESIGN STUDIO 1 / Spring 2022
ROXIE THEATER
Web Fonts
90pt Halyard Micro Light 12 pt Helvetica Regular 14pt Halyard Micro Light 24pt Helvetica Bold 16pt
Montserrat Black
Web Fonts Helvetica Regular 14pt Helvetica Light 11pt Helvetica Bold 24pt Helvetica Light 12pt Halyard Micro Bold 14pt
Sketches &
wireframs Yixin(Essie) Zeng / GR 605 OL1: DIGITAL DESIGN STUDIO 1 / Spring 2022
ROXIE THEATER
01 02
Sketches
01 02
Sketches
Wireframs
Wireframs
Wireframs
Wireframs
Yixin(Essie) Zeng / GR 605 OL1: DIGITAL DESIGN STUDIO 1 / Spring 2022
THEATER
Desktop & Mobile
ROXIE
Desktop
Desktop
Desktop
Desktop
Desktop
Desktop
Mobile
Mobile
Mobile
Mobile
Mobile
Mobile