Eagle Owl Documentaries Website - Case Study
Full website project from branding to wireframes and implementation of code
Project Description
A local independent filmmaker contracted me to create a new brand and website to highlight their work. As part of the project, I generated wireframes, custom branding, and a dynamicc website experience leveraging HTML, CSS, and Javascript.
Role
Designer for everything except logo design
Length of project
2 months, plus some time for edits.
Initial Research
In the first phase of this project, I wanted to get an idea of what my client was looking for. Because they already had a clear idea of direction for both functionality and content for this project, as well as a lot of market research done already, most of my time was spent sitting down and interviewing them.
Findings
- Wants a website that “can do anything” – doesn’t want to be restricted to any one type of filmmaking.
- Main purpose of website is a personal portfolio.
- Other stakeholders include only people she may one day want to work with – other filmmakers, producers, sponsors or co-directors.
- Main calls-to-action include: getting information, contact, and watching the movies.
- Competition on the market is doing the same thing, but doing it so differently that there isn’t need for comparison. The goal is not to be the most successful and famous filmmaker, the goal is to make inspiring projects about things they are passionate about.
Gut tests
In previous projects, I found gut tests to be incredibly helpful to bring clients on board with new ideas, standard web practices, and to get an idea of design ideas to absolutely rule out off the start.
In this test, I prepared 10 examples of websites of varying styles, and my client gave me their immediate and then secondary reaction to each website.
I discovered from this test that simplicity is better. My client was looking for a minimal design with just a touch of uniqueness would be helpful for them to stand out.
Design
Based on research and interviewing my client on their preferred direction, I came up with some options for the direction of their brand.
Here is the final style tile I created, as well as three other initial options for the brand. The client went with the first one.
IMPLEMENTATION
The most time-consuming part of this project was the actual implementation of the website.
I used wireframes developed in Adobe XD to test and adjust layout and flow with the client before any implementation. This saved time later when I started coding, since there were no more “quick edits” to be made.
The final dynamic website was implemented leveraging HTML, CSS and JavaScript.
Biggest Challenge
My biggest challenge in this project was fitting in time for every step of the design process so the client could be involved, have time to give feedback, test, and eventually actually be happy with the final result. The time allotted for this project was two months.
Final Website
Solution
Creating a structured timeline for each day, as well as frequent and clear communication with the client. I also spent extra time with them, allowing them to offer up ideas for each page, and incorporating ideas from their sketches directly into my design process.
Other takeaways
By coding the website from the ground up, I learned about web development best practices and coding structure as well the power of Javascript to enhance user experiences. Additionally, I found that generating a detailed timeline allowed me to surface additional complexities in the project and to create a more accurate estimation for the client. As a result, I finished the project ahead of schedule, enabling me to take additional client requests that were originally out of scope.
Final website
Thanks for reading!
Check out more of my projects below ↧