Stars and Stripes

Branding | UX/UI | Illustration

Stars and Stripes is a drive-in movie theatre located in New Braunfels, TX. The family theatre is known for its double features every night, rain or shine.

Accolades
Team Members

Research and Documentation| Juliana Ratchford, Kiera Bailey

Wireframes, Design, and Illustrations | Juliana Ratchford

Opportunity

Stars and Stripes shows double features nightly, but often has trouble with backed-up ticket queues on weekends, difficulty in ordering food without leaving the movie, and inability to report crises quickly. This rebranding and kiosk design addresses the opportunity to enhance the drive-in theatre experience through both a nostalgic and effective means.

solution

By creating a kiosk that can optimize Stars and Stripes' problem areas, it will attract more movie-going individuals to have a better experience.

identity
Logo Signature

When creating the signature, I wanted the typeface to reflect the mid-century era's playful and eye-catching design while acknowledging the iconography that is suggested in the name. For the brandmark, I implemented three stars to represent the three screens that the drive-in shows all of its movies on.

Branding
Branding
App extension
User personas
Stephen Johnson

Retiree, Grandfather

Alejandra Cruz

Manager at JC Penney, Mother of three

Jesse Lovett

High School Student

empathy map

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Paper prototypes
wireframes

While working on the kiosk and app, I did research on using a dark theme for the interface, worked on several 50's-themed illustrations, and tightened the user flow. View the full process below.

Final outcome
Noctune Home ScreenNoctune registration screen
registration

When users launch the app, they’ll be prompted with two options to register. Users also have the option to sign in with other services such as Facebook, Google, Amazon, etc.

registration

When users launch the app, they’ll be able to sign up for a Servitmo account or login to a pre-existing account. Upon registering for an account, users will need to agree to the Terms and Conditions and a Nondiscrimination/Anti-Harassment Policy.

Noctune Onboarding ScreenNoctune registration screen
onboarding

After completing the registration process, users will have the option to view the onboarding process which explains how Noctune filters audio media depending on users' check in details.

onboarding + Map

After users login or create an account, they'll be able to view the onboarding process and access a satellite map. Active Servitmo responders will be noted on the map as a plus symbol. Users can tap the Servitmo button at any time to begin a report at their current location.

Checking in

When checking into Noctune, users will answer several prompts about what they’ll be doing throughout the evening, their energy level, stress level, distractions, overall mood, setting, and how late they will stay awake.

From this point, Noctune will create a summary of the check in, generate a unique playlist tailored to what audio they should listen to, and mark audio in their likes that is not recommended to listen to that night.

Sending a report

When users begin a report, they will enter information in four phases: Individual description, what the person is doing, incident photo, and urgency.

On each phase of the report, users will have the ability to type in additional notes as they see fit. Users are able to make changes until the report is closed by a Servitmo responder.

Noctune Dashboard ScreenNoctune Summary screen
Dashboard

After checking in, users will be able to view the playlist curated by Noctune which will list recommended playlists in addition to a combined playlist with all media recommended. Users will also have access to all check ins and edit information accordingly.

Incident Picture

If users take a photo of the incident, they must first answer the disclaimer policy which discourages taking photos if the user feels unsafe. Photos will not be available for viewing to users in an effort to respect the privacy of the individual(s).

Noctune Onboarding ScreenNoctune registration screen
audio player

Noctune offers all audio media support, from music, to e-books, to podcasts. Users have access to many popular features, like changing audio speed, adding to a customized playlist, and more. The interface is simple to keep users on task.

Viewing Reports

After submitting a report, the information will be available to view and edit under the "Submitted Reports" panel. If a photo has been taken, the photo cannot be viewed. Instead, this indication will appear as a camera icon listed in the report. Closed reports will only show the address of the incident, the date the incident occurred, and the team member who responded.

Additional Check ins + breaks

Throughout the evening, users will be asked if they want to check in again. For this process, they will once again rate their energy, mood, distractions, and stress. Users have the choice to skip check ins, however, more check ins allow for a better listening experience.

When submitting their ratings, if they have negative ratings, the Noctune app will suggest for them to take a longer break or go to sleep if they are able. Otherwise, Noctune will prompt for users to take a break.

Chatting with a responder

If the user on the Servitmo app is experiencing crisis, they also have the ability to fill in a report for themselves. This process is a bit different from the normal reporting system, however. Users will answer a short series of questions about what they need and how they are feeling in that moment.

Depending on the user's responses, the app will suggest resources if users decide not to speak with a team member. If they continue filling in responses, they will be connected to chat with a Servitmo responder that can assist their needs.

App extension
User personas
Stephen Johnson

Retiree, Grandfather

Alejandra Cruz

Manager at JC Penney, Mother of three

Jesse Lovett

High School Student

empathy map

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Paper prototypes
wireframes

While working on the kiosk and app, I did research on using a dark theme for the interface, worked on several 50's-themed illustrations, and tightened the user flow. View the full process below.

Final outcome
Noctune Home ScreenNoctune registration screen
registration

When users launch the app, they’ll be prompted with two options to register. Users also have the option to sign in with other services such as Facebook, Google, Amazon, etc.

registration

When users launch the app, they’ll be able to sign up for a Servitmo account or login to a pre-existing account. Upon registering for an account, users will need to agree to the Terms and Conditions and a Nondiscrimination/Anti-Harassment Policy.

Selecting A Double feature

Upon driving into the ticket area, users will be able to use the kiosk to either scan a pre-purchased ticket, or buy a ticket at the drive-in. Users can browse through the three screens and look at movie information as well.

Ticket kiosks will only allow buying tickets for that evening to keep this process quick for patrons.

Noctune Onboarding ScreenNoctune registration screen
onboarding

After completing the registration process, users will have the option to view the onboarding process which explains how Noctune filters audio media depending on users' check in details.

onboarding + Map

After users login or create an account, they'll be able to view the onboarding process and access a satellite map. Active Servitmo responders will be noted on the map as a plus symbol. Users can tap the Servitmo button at any time to begin a report at their current location.

Details and payment

After selecting a double feature, users will enter in additional details, and select their payment method.

The kiosk device offers support for credit, online payment services such as ApplePay or SamsungPay, and offers an employee on stand-by to help with cash payments.

App functionality + Kiosk

Users with the app will be able to purchase tickets ahead of time and scan the ticket barcode at the kiosk to enter.

When entering, the movie-goers will go to their respective movie areas and will be able to access the all-purpose kiosk in their area to order food or report an emergency.

Checking in

When checking into Noctune, users will answer several prompts about what they’ll be doing throughout the evening, their energy level, stress level, distractions, overall mood, setting, and how late they will stay awake.

From this point, Noctune will create a summary of the check in, generate a unique playlist tailored to what audio they should listen to, and mark audio in their likes that is not recommended to listen to that night.

Sending a report

When users begin a report, they will enter information in four phases: Individual description, what the person is doing, incident photo, and urgency.

On each phase of the report, users will have the ability to type in additional notes as they see fit. Users are able to make changes until the report is closed by a Servitmo responder.

Noctune Dashboard ScreenNoctune Summary screen
Dashboard

After checking in, users will be able to view the playlist curated by Noctune which will list recommended playlists in addition to a combined playlist with all media recommended. Users will also have access to all check in's and edit information accordingly.

Incident Picture

If users take a photo of the incident, they must first answer the disclaimer policy which discourages taking photos if the user feels unsafe. Photos will not be available for viewing to users in an effort to respect the privacy of the individual(s).

Kiosk Home + Ordering Food

Movie kiosks will be limited to food ordering and reporting emergencies to keep usage brief.

Additionally, the kiosk screens will default to a dark mode setting to avoid distracting lighting that can negatively affect other patrons.

Noctune Onboarding ScreenNoctune registration screen
audio player

Noctune offers all audio media support, from music, to e-books, to podcasts. Users have access to many popular features, like changing audio speed, adding to a customized playlist, and more. The interface is simple to keep users on task.

Viewing Reports

After submitting a report, the information will be available to view and edit under the "Submitted Reports" panel. If a photo has been taken, the photo cannot be viewed. Instead, this indication will appear as a camera icon listed in the report. Closed reports will only show the address of the incident, the date the incident occurred, and the team member who responded.

Placing an order

When placing an order at the kiosk, users can select various toppings, add additional items to their order, and view standard nutrition and allergen information.

After ordering, users can choose if they want their receipt digitally sent to them, and will proceed to the central restaurant area for pickup.

Emergencies

If users need to report an emergency or disturbance, they will be prompted with several options that will contact a staff member, or call 911 respectively.

Additional Check ins + breaks

Throughout the evening, users will be asked if they want to check in again. For this process, they will once again rate their energy, mood, distractions, and stress. Users have the choice to skip check ins, however, more check ins allow for a better listening experience.

When submitting their ratings, if they have negative ratings, the Noctune app will suggest for them to take a longer break or go to sleep if they are able. Otherwise, Noctune will prompt for users to take a break.

Chatting with a responder

If the user on the Servitmo app is experiencing crisis, they also have the ability to fill in a report for themselves. This process is a bit different from the normal reporting system, however. Users will answer a short series of questions about what they need and how they are feeling in that moment.

Depending on the user's responses, the app will suggest resources if users decide not to speak with a team member. If they continue filling in responses, they will be connected to chat with a Servitmo responder that can assist their needs.

Process
Creating the video

In creating the final title sequence, there were several stages of refining the final concept, including storyboards, roughs, and comps. View the full process below.

Process
Making the packaging

While working on the kiosk and app, I did research on using a dark theme for the interface, worked on several 50's-themed illustrations, and tightened the user flow. View the full process below.

reflections

This project was incredibly fun to work on and design for. I'm extremely satisfied with the illustrations I created for this project and feel that the design communicates the nostalgia of a Drive-in Theatre. If I were to expand this project, I would design more of the app functionality.

References and sources
Text Link