website for film festival voting

FilmVote

responsive website ui/ux

My Role
Project Lead
UI/UX Design
UX Research

Team
Aubrey K. Young (Solo)

Project Duration
2 months

the situation

Independent film fans seek a secure and transparent voting system for film festival entries.

the goal

Create a responsive website enabling users to watch, review, and rate independent films for upcoming festivals.

User Research

Research Summary

Goal: understand the behaviors and frustrations of users who regularly stream long-form media and are interested in independent film festivals.

Participants: Adults aged 19-45 from diverse backgrounds, living and working in metropolitan or suburban areas. Participants were assumed to be familiar with movie streaming technology.

research results

My user study identified the following key pain points:

1

Users wish to increase voter participation in independent movie voting

2

Users seek to enhance confidence in the independent movie awarding process through secure voting

personas

After analyzing the interview data, 2 personas emerged:

Raymond's motivation is ensuring the best films receive recognition based on a reliable and trustworthy voting system, thereby supporting the independent film community

Natalie considers independent movie screenings the perfect venue to engage with industry professionals and exchange contact information, paving the way for future opportunities.

Low Fidelity Design

My Approach

To keep this project within scope while also focusing on making a site that is easy to navigate, my approach targets indie movie-goers during the voting process.

User Journey

Raymond’s user journey goal is to cast a secure vote in an upcoming film festival.

Sitemap

“Less is More”: Adopted a minimalist approach to ensure the site is straightforward and user-friendly. The focus is on essential features that provide value without overwhelming users, allowing for effective voting and film engagement.

Lo-fi Wireframes (Paper)

The layout imitates popular streaming services, reducing the learning curve and making the app familiar for users. This encourages a seamless transition from browsing to viewing, enhancing overall user satisfaction.

Filmvote lo-fi paper 1 — paper wireframes

Lo-fi Wireframes (Digital)

I emphasized large, engaging images reminiscent of a streaming service, and a signup button above the fold to engage users immediately.

Filmvote lo-fi digital home screens — Home screens

Filmvote lo-fi digital review screens — Review screens

Filmvote lo-fi digital sign in screens — Sign-in screens

Filmvote lo-fi digital watch screens — Movie watch screens

Usability Testing

The following user concerns emerged after usability testing, which I used to create my hi-fi mockups.

1

User Confusion

"I wasn't sure at first where to sign up, so I went for the menu. I used the sign-up button there."

Problem: Users were mistakenly clicking the navigation button to sign up instead of an intended Call-to-Action (CTA) button.

Solution: I placed the “Sign me up!” button prominently above the fold to ensure visibility. This strategic positioning draws immediate attention, guiding users directly to the sign-up process.

2

Toggle Feedback

"There's a lot of information on the rate and review screen; I might want to rate the movie immediately after watching, but review it later."

Problem: Users expressed a preference for fewer screens to navigate through before they could rate and review movies, indicating a desire for a more streamlined process.

Solution: I implemented a toggle between the rate and review screens, allowing users to switch between the two without needing to navigate to separate screens.

High Fidelity Design

Colors & Fonts

FilmVote's blue and yellow colors are purposefully opposing to draw the user's eye to the site's main functions. The image-dominant sections have a light background to allow the movie posters to stand out.

#004ba0

#f8bc39

Poppins is a clean, modern, and geometric font. Readability and many different font variants make it a very useful typeface.

coup de grâce: final screens

FILMVOTE represents a responsive website that includes a secure voting system and an interface reminiscent of modern streaming sites.

DESKTOP:

MOBILE:

Design Details

•FULL BRIEF•

•HI-FI PROTOTYPE•

Future Iteration Ideas:

In recognizing the need for dedicated voting and discussion platforms, the following ideas aim to enhance user engagement and broaden the scope of the FilmVote app.

The emphasis is on creating a more inclusive environment for various media types, such as books and music. Goodreads would be a great candidate for further development of voting and discussion tools.

Next step improvements:

1

Niche discussions

Expanding the voting system to other forms of media, i.e. books and music

2

Movie tags

Movie tagging to allow for streamlined categorization and searching for specific movie genres