Design and Web Development for a Film Production Company

This project involved redesigning FXMM Studio's existing website to improve usability, visual appeal, and functionality, while also laying the groundwork for better search engine performance.

My biggest challenges were to redesign a website in a niche market to appeal to potential clients, as well as leaving the website as accessible as possible for the production team to upload new artists, projects, and other updates to the site.

The process combined UX research, UI design, and WordPress development to deliver a sleek, modern site tailored to the client’s needs.

The initial phase focused on auditing the website’s design, copy, and performance.

FXMM Studio already had a website running and I was contacted to conduct a SEO / SEM assessment.

Once I visited and interacted with the website, I noticed there was a lot of work to be done. At this point, jumping straight to SEO/SEM seemed like a large time and energy investment that wouldn't lead to the desired path (getting calls and meetings with potential clients).

I suggested working on the UX and UI first, and leave SEO management and Google Ads for later.

I ran a competitor's analysis as well, where I chose 4 companies with similar target audiences in the same region, and scrutinized their websites to understand how they present their services and see if they had any points in common in their interface, structure, etc.

During the strategy development stage, my goal was to ensure that the redesign aligned with both FXMM Studio's business objectives and user needs.

Users needed to quickly determine a) what the company does, b) why choose this film production company and c) take the next steps (schedule a meeting or email the co-founder).

Here are the key components for this redesign:

Restructure the website to emphasize FXMM Studio's portfolio, to showcase their film production and photography work.

Highlight artist and project profiles to engage potential clients and collaborators.

Leverage insights from the competitor analysis to refine site navigation and improve both the audiovisual and the written content.

Identify common design patterns in the industry to create a familiar user experience, while maintaining character and personality.

Reorganize the entire website's layout and content, making sure the user has all the necessary information easily accessible and presented in a logical flow.

Add call-to-action elements to guide user interaction, which were missing or not clear enough with the pre-existing design.

Design intuitive navigation and content presentation to reduce bounce rates and improve engagement.

Improve accessibility for internal users (the production team) to manage updates independently, ensuring long-term sustainability.

Improve the website's performance using SEO strategies to rank higher in search engine results, focusing on elements such as site speed, metadata, and structured content for better visibility.

Optimize the layout for both desktop and mobile devices.

During this phase I started with some sketches to structure content and reorganize the existing website.

These sketches were quickly turned to wireframes and digital prototypes to test a new visual interface and branding.

The goal was to reorganize content and showcase the work of FXMM, which was related to film production and photography.

After developing some mockups and prototypes, the client wanted to follow a different creative direction and I started working closely with one of their graphic designers.

We collaborated with the redesign of FXMM, with the goal of balancing a sleek, modern interface while still adding valuable content to the end user, which was the ultimate visual direction.

I collaborated with the graphic designer to refine both the interface and the content, following their visual direction and adding more elements and sections, and pages when needed.

As the WordPress developer, my goal was translating the content from mockup to life. I had a few mockups available from Figma with some of the pages. I sketched and created wireframes for the rest of the pages following the existing creative direction.

I was in charge of copywriting, developing all elements in the website and making sure all pages were responsive, adding and editing images for pages and individual posts, and creating content for each post.

I decided to use both Gutenberg and Elementor for their flexibility in building custom layouts such as full-screen videos and images, carousels, and tabbed blog posts sorted by categories.

The biggest challenge —and achievement— was creating custom post types that allowed FXMM team members with no WordPress experience to easily upload new artists or projects in the future.

Using ACF, I set up custom fields to add or modify artist profiles and project details, making it simple for the team to manage and add new content to the website.

Programming is not my field of expertise but I was familiar with CSS and used it for customization purposes.

I also utilized AI tools to help generate JavaScript code for creating specific page behaviors, such as automatically hiding the header and adjusting its color to match the background.

Now that the website is fully operational, my recommendation to the design and the management team was to work on improving the website's search engine performance.

I suggested adding an Insights page, which would serve as a dynamic hub for sharing valuable and engaging content.

This page could feature updates about the company, interviews with the production team, announcements about upcoming events, and other relevant news in the film production niche.

This Insights page would increase the brand's visibility, reach and trustworthiness, and would guarantee a constant source of content to improve the websites' ranking on SERPs and domain authority.

Incorporating relevant keywords, internal links, and multimedia elements on this page would further enhance search visibility.

We plan to implement these next steps next year.