E-commerce 

American Holocaust

Movie Trailer digital experience 

WHAT IS THE FILM ABOUT?

American Holocaust  follow's 8 storylines through a dystopian world set in the Summer of 2020. The capital “Metropolice”, is under siege - sirens, helicopters, & fireworks are the soundtrack to the revolution. To make things worse, a global pandemic has swept the world & particularly America, which is ruled by “The Supremacy”. Curfews have been implemented on sections of the populous. The link between each story is a genocide that has reached a critical point, the American Holocaust.

WHAT DID I DO?

SERVICES

My role was the lead UX Designer that collaborated with the developer and film director to create an approachable digital experience released on mobile and web platforms for the film that carries a dystopian yet political aesthetic in a 3 month span. I also assisted on set to intake the consistent humanizing feeling and replicate the environment onto the website.

UI Design 

Art Direction

Web design

GOAL?

As the lead designer I was to deliver an e-commerce and mobile web platform that would sell merchandise to help fund the rest of the independent film. While it's goal is to engage the audience to inspire real change within our communities through a fictional story, it was important for the film director to spread awareness on signing a petition calling for zero tolerance police brutality, establishing higher education as a human right for all, &  democratization of early education .. to name a few. 

IDEA'S, ITERATE & COMMUNICATION

The first state of the project was to collaborate with the film director to visualize the layout to display  the trailer and merchandise through a consistent and deliverable theme. At first we discussed keeping the project minimalistic with just the the trailer & merch  due to the short time line that was initially given. But after further discussions on the film, learning how he was inspired, his ethics, and the importance of humanizing his experience through a platform we both agreed it was important to give the audience more to deliver a more conversational message among his audience. 

SECTIONS

Trailer

Merchandise

Inspiration 

Petition 

About the

director

Movie Script

BRIEF NOTES

- To Promote the film

& engage the audience what to expect. 

- Accessible topics to lead user  for clarity to other sections of the platform

- Display merchandise 

but engage audience with the emotional aspect through the items.

- Deliver message for fundraising 

- Include images from event 

- brief of story to inspire conversational subjects with audience 

- Inspire others to make change together as a community by encouraging the audience to sign

- Display link to previous work

- Brief intro about director

- Action Images

- Display link to google doc movie script or create seperate page. 

WIRE FRAMING 

Once the layout was finalized, I created the wire frames and an interactive prototype (Web & Mobile) through Invision to discuss page adjustments such as adding social media icons, merchandise displayed, the best placement and format for the movie script, and  proper image placement to determine the style and flow of the platform. 

Home 

Section 1

Inspiration

Section 3

Merchandise 

Section 2

Petition & About Director 

Section 4

Add Icons

Movie Script link

About Film

Fundraising

explanation

Merchandise 

Display

Add real images 

from event

Add Director

personal work link

Add "View More" 

button for 2nd page

on brief info on the

meaning of Holocaust

Add Petition

link

Insert Fake Logos

from film

THE STYLE

Inspired by the trailers dystopian aesthetic and political message.

We achieved the final look by merging behind the scene imagery, digital illustrations from the film and following political colors that give the site a smear campaign feeling.

With detailed images of the directors altercation with the police during a protest,  It was important for the Director to include his inspiration for the film that led him to create a petition. Which served as an extension of the over all guest experience. The landing page captured more than just the trailer & merchandise but the inspiration for others to help create change within their communites 

Merchandise

Currently we have 50% of the film, the money we raise from merchandise will go to production costs, equipment & location rentals, cast, as well as VFX & other post-production needs.

  • Instafame Hoodie

  • $120

MOBILE APPROACH

Replicating the websites foundation, incorporating new images & applying familiar shortened design patterns to reduce the user's learning curve

I started by conducting a full audit on the website which uncovered inconsistencies and accessibility issues for a mobile platform.

To solve this, I created a library of reusable components (buttons, images etc), which ensured consistency and a faster build time for the developer.

Working closely with Gina, the developer. We collected insights to deliver strong solutions for all sections of the site.

My focus being on UI, I helped transfer our idea's from low to high fidelity prototypes to test with the film director to ensure we were creating the aesthetic of the film. 

FINAL