Enable people to gain a film education and attend local cinema events.
I designed and launched a new site with input from filmmakers, professors, and students.
Every once in a while, you meet a client who has everything going for them. Yet there is something that feels amiss.
In 2017, the University of Cincinnati launched a film department. The department hosts a new major and film screenings across Cincinnati.
Despite high expectations for the program, initial enrollment rates were low. Film screening attendance was lackluster as well.
Why was this? Well, it turns out people had no clue the new department existed. Ouch.
To solve this, I worked with professors to create a website encouraging students to jump on board and enroll.
Research and goals
I met with professors to identify what users would want from our site. We realized that a well-designed website would enhance the majors reputability and allow perspective students to find out more about it. We also wanted to improve how the public can learn about events.
After establishing our design strategy and goals, I developed sketches and wireframes with 3 goals in mind:
- An event calender for users to buy tickets and see who's attending
- In-depth pages for the following programs: major, minor, and certificate
- A subtle newsletter sign-up form integrated with MailChimp
A light-weight, static version of the site would be “difficult” for professors to mantain. I moved the site to Squarespace, which makes it easy for anyone to update.
However, this forced me to use lots of custom code to override Squarespace's template presets.
Due to a limited budget, I was the sole creator for this project. Here is the process I followed.
During the discovery phase I grouped together several UI examples which would serve as inspiration for what I wanted our users to experience.
Being in the academic realm, I knew large chunks of text were unavoidable. My goal was to make these paragraphs easily digestable, so I tested dozens of sans serif fonts until one fit the bill.
Great typography requires a balance between versatility and expressivity.
My top 3 picks were Avenir, Proxima Nova, and Aktiv Grotesk. I settled on Proxima Nova because I found it the easiest to read - especially in longer paragraphs. It was versatile too. I used it for everything on the site (including titles and headers).
Useable, simple, and elegant hierarchy is critical to any website - ours included. To keep it simple, I used one word items rather than dropdown menus.
A landing page is the first thing a user sees when they visit our site. It's also the biggest factor in determining whether they stay. To fit our new status, I gave the page a modern look. Diagonal lines and gradient backgrounds are all the rage in 2018. It's also a fresh look in an industry notorious for outdated interfaces.
The Center promotes an average of 2 events per week. Before the website, users would find these events through our Facebook page, which worked great for a while. However, users wanted in-depth descriptions of the events. If you're familiar with Facebook's newsfeed algorithm, you know it doesn't like lengthy descriptions.
To get around this, I implemented a plug-in which automatically populates the site's event calender with our Facebook page's events. On the site, users can read in-depth descriptions of each event and purchase tickets as well.
The professors are extremely pleased with the site overall. Both students and the general public have complimented the site on it's functionality and elegance. It's 100% responsive on any device.
Overall, the site proved to be a huge success but it's far from perfect. Ideally, I would code the site from scratch to avoid the bloat that comes along with using a CMS like Squarespace. Still, the strategy we used worked for our purposes, because professors enjoy how easily they can add information to the site.← Go back