Background

Brief:

• FilmThreeSixty, an eminent film production company, sought to revamp its website to more accurately reflect the caliber of its work and appeal to a growing digital audience. They wanted a platform that not only showcased their portfolio but also provided users with a seamless and cinematic experience.
• To create a sleek, interactive website with a strong emphasis on user experience and interface design, ensuring both desktop and mobile users enjoy a cinematic feel reflective of the company's brand.

Research

Audience Analysis:

• Undertook interviews and surveys with FilmThreeSixty's clientele to understand their online browsing behaviors, preferences, and pain points.
• Feedback has shown that the one-page website cannot represent what the company's offerings are which makes it hard to drive the audience's interest.

Competitor Analysis:

• Analyzed competitors' websites to distinguish market trends, identify strengths, and pinpoint areas of improvement.
• Case Studies, work examples, and package offerings have been widely used in other websites.

Content Strategy:

• Teamed up with copywriters to ensure the content mirrored the brand voice, was captivating, and catered to the target audience's needs.
• Data given in Google Analysis indicated the importance of SEO keywords and user accessibility (i.e. Navigation).

UX & UI on the current 1 page design:

• Color Palette: Predominantly darker shades with a focus on blacks and subdued hues.
• Typography: A mix of bold and regular fonts, with highlighted text.
• Layout: The design uses full-screen visuals, accompanied by textual content on some segments. Multiple images are clustered in some sections, potentially overwhelming the viewer.
• Navigation: Categories are listed without specific call-to-action buttons, and the overall navigation seems minimalistic.

Problem statement:

The layout lacks a clear hierarchy and consistent typography, making it difficult for users to quickly grasp the company's offerings and value proposition. Consequently, there is a need for a design overhaul that streamlines content presentation, enhances user experience, and aligns more closely with modern design principles and the brand's identity.

Focus 1: User Interface (UI) Design

• Developed a color palette and typography that embodies a cinematic aura.
• Designed with the aim of keeping the user engaged; the addition of hover states for buttons, page load animations for smoother transitions, and swipe-up animations when new content arrives in the viewport enhanced the overall browsing experience.

Focus 2: Responsive Design

• For desktop: Ensured that the content was spread out evenly with appropriate spacing and font sizes, taking advantage of the larger screen real estate.
• For mobile: Utilised accordion designs for content, making it easy for users to skim through and navigate.
• Modern users anticipate dynamic websites. The incorporation of interactive elements, complemented by intuitive iconography, not only made the site stand out but also amplified user engagement.

Considerations

Balancing the business objectives with the user goals, and avoiding information overload, and visual clutter have been the main objectives of this design.

​

PACKAGE OFFERINGS​

1. Consistency: From the layout structure to the use of icons, fonts, and buttons, the design maintains a consistent visual and interaction pattern. This consistency makes the user experience predictable and intuitive.
2. Scannability: The use of bold headings, clear separation between packages, and organized listing of features allows users to quickly scan the content and grasp the main points without needing to read everything in detail.
3. Affordance: Elements like the "Enquire now" buttons are designed in a way that they clearly look clickable, guiding users on the possible interactions available.
4. Progressive Disclosure: Features like "Show Less" and "See Package Details" allow users to access more information if they wish, without overwhelming them with too much content upfront.
5. Accessibility: The design uses contrasting colors to ensure that text and elements are readable. While it's not evident from the image alone, ensuring that the design is navigable and readable for users with disabilities would be an important UX consideration.
6. Clear Call-to-Action (CTA): The CTAs ("Enquire now" and "Talk to us today") are visually distinct and strategically positioned to drive user actions.
7. Flexibility: The design includes a statement at the bottom about creating custom packages, indicating flexibility and catering to users with specific needs.
8. Trust and Transparency: The inclusion of a note about terms and conditions ("*Terms & Conditions Apply") provides transparency and can help build trust with users by setting clear expectations.
9. Alignment and Spacing: The design uses a grid structure with consistent spacing between elements, enhancing the visual harmony and making it easier for users to process the information.

Final Design

• Marketing Mindset: Engaging deeply with the brand and its offerings enabled the design to mirror FilmThreeSixty's ethos. Projects of this scale and importance require a designer to transcend traditional roles and adopt a marketer's perspective.
• Responsive Design: Prioritizing both desktop and mobile users is imperative in this digital era. Using accordion designs for mobile showcased the power of understanding user behaviors across different devices, leading to informed design decisions.
• Interactivity and Iconography: Modern users anticipate dynamic websites. The incorporation of interactive elements, complemented by intuitive iconography, not only made the site stand out but also amplified user engagement.
• Collaboration: The harmonious collaboration between the designer and copywriters ensured that content and design seamlessly melded, creating a unified brand narrative. The design was completed in Figma and the final hand-off to the Webflow developer was smooth and successful with a pre-defined style guide and detailed annotation. I was monitoring and testing the site as it was built to ensure the functionality and usability of the website have been achieved to our desired level for our users.