Project: Website Redesign

The Challenge: Redesign Detour’s website to address the needs of Richard Linklater and his fans.

Solution: Reduce the number of pages and consolidate into one parallax scrolling website.

Summary: It had been close to ten years since Richard Linklater updated the website for his production company — Detour Filmproduction. The existing website had slowly crept up in page count, becoming an unwieldy mass of copy with confusing navigation (see homepage below).

There were close to 25 pages on the website, many of them with little to no copy. (See example below.)

In order to redesign the website effectively, we had to take a systematic approach, grounded in research and focusing on the user.

Step 1: Content Audit

I did an inventory of all the pages, along with a deep dive into analytics — what were the most valuable pages receiving the most traffic.

Step 2: Interviews with key stakeholders

Through my research, I was able to gather the most important actions those coming to the website needed to take. I also delved into the wants and needs of the organization as well as website users.

Key takeaways:

• The website needed to be easy to update.

• The most frequent action taken on the website was to look up information on internships, so that needed to be easily accessible. This is especially important as Detour needs a regular stream of new interns every semester.

• There had to be a section for latest news to keep the website fresh.

• Stills from the movie should be a key component of the look of the website.

• Ability to contact the organization without giving away email addresses.

Step 3: Sitemap

The key to this project was to focus on the user and provide all the information to website visitors at a glance. With a parallax website, visitors would be able to scroll through each section easily and even jump to the critical elements.

The sitemap included:

• Hero image

• Latest news content buckets (x 6)

• Biography

• Filmography

• Internships

• On Sale

• Contact Form

Step 4: Wireframes and Production

In consultation with Detour’s leadership, we chose the most visually appealing stills from Richard Linklater’s filmography. The hero image would feature his latest film — Boyhood. Each section from there would include other hit movies. After completing the wireframes, we moved into production.

After Q&A and rounds of approvals from the client, we launched the final website.

Final Website - Key Improvements

Latest News - This section allowed the organization to make updates as soon as new developments occurred. The links also allowed users to jump straight to things like internships.

Filmography - Provided users links to buy or rent Linklater’s movies, providing revenue for the company

Internships - An easily updated section that allowed the organization to change information on applications every semester.

Contact Form - Finally, a contact form that let users get in touch without having to divulge actual email addresses of Detour Filmproduction employees.