The Melody Maids Movie
Website & Brand Development
%20(1265%20x%20827%20px)%20(1266%20x%20494%20px)%20(1).png)
Timeline - Tools - Role
Timeline
April - July 2025
Tools
WIX Studio, Chat-GPT 5, Claude, Figma, Canva
Role
UX Contractor
Website Developer
Brand Designer and Marketing Manager
About
Situation
Digital Presence
The Melody Maids documentary team needed their first-ever digital presence to showcase the film, provide press resources, and engage audiences. With no brand system in place, the project required a complete brand identity build along with a responsive website that could serve both storytelling and press needs. The challenge was to establish a cohesive brand identity and design a website that balanced historical storytelling with modern UX practices.
Task
Core Tasks
Before jumping into solutions, I needed to get really clear on what problem I was solving. The Melody Maids team didn’t just need a website — they needed their first-ever digital identity to showcase the film, simplify historical storytelling, and provide resources for press and audiences.
📍Build a multi-page responsive website from scratch
→ Establish a digital presence that introduces the documentary and engages audiences across devices.
📍 Develop a cohesive brand identity system
→ Create a scalable set of typography, colors, and visual patterns that could extend from the site to the press kit.
📍 Simplify and reframe complex historical content
→ Use UX writing principles to translate long-form material into clear, engaging, and accessible copy.
📍 Provide press-ready materials
→ Deliver professional bios, an electronic press kit (EPK), and cast content in a centralized hub for media.
📍 Ensure usability and accessibility
→ Design with responsive scaling, alt text, and contrast compliance to make the site inclusive and easy to use.
Together, these tasks required delivering not just a website, but a digital ecosystem that could support both the film’s story and its promotional needs.
Action
To deliver on these objectives, I structured the work into phases that connected research, definition, design, and iteration.
1) Research & Analysis
I began by benchmarking against a film documentary website to understand common strengths and gaps. From there, I mapped bios, press content, and storytelling assets to clarify what content belonged where. To move faster, I also tested AI-assisted copywriting and font exploration, using them as starting points that I refined for consistency and authenticity.
I conducted a competitive audit of the documentary website Temple Grandin. The client specifically presented the Temple Grandin site as a design reference, and my goal was to build something inspired by it—while improving usability, accessibility, and overall UX design.
My audit revealed insights such as:
📊 Content & Messaging
→ Inconsistent tone of voice, readability challenges, weak UX writing, and limited accessibility support.
📊 Forms & Conversions
→ Minimal focus on forms and conversion paths, with poor error prevention, weak mobile-friendliness, unclear outreach forms, and poorly placed calls-to-action.
📊 Performance & Interactivity
→ Establish a digital presence that introduces the documentary and engages audiences across devices.
2) Define
With content mapped, I shifted focus to structure. I developed information architecture and user flows that separated, but still connected, two key pathways: audience storytelling and press access. Scoping the MVP to a responsive site, brand system, and press kit kept the project lean while covering all critical needs.
3) Design
Once the foundation was clear, I moved into the design stage. Consistent UI patterns were applied across the website and press kit to ensure the experience felt cohesive and scalable. My design execution included:
⏱️ AI-Supported Site Building in Wix Studio:
→ Expedited wireframing by utilizing WIX studio templates, allowing ample time for heavy customizations
🎨Developed a Scaleable Design System:
→ Color palette, typography, reusable components, and UI Kit to ensure consistency
✍️Applied UX Writing Principles:
→ Daily & weekly summaries, trend highlights, and simple logs
🟰Incorporated WCAG Accessibility Standards:
→ Color contrast, alt text, keyboard navigation support
.png)
4) Test & Iterate
With the first high-fidelity designs in place, I moved into testing and iteration to refine both usability and storytelling. It was important for me to ensure the site was not only visually aligned with the film’s identity but also accessible, responsive, and easy to navigate across devices.
I conducted usability testing sessions with stakeholders, capturing client feedback on navigation, clarity, and ease of use. To complement this, I sought live feedback from a Senior Product Designer who provided expert insights into UX design systems. Both perspectives helped me identify opportunities for refinement and improvement.
From there, I focused on improving the following areas:
🟢 Integrating stakeholder feedback through multiple review rounds
🟢 Running accessibility checks for color contrast, alt text, and screen responsiveness
🟢 Refining historical content into concise, readable copy using UX writing principles
🟢 Adjusting navigation and layout for clarity on both desktop and mobile
🟢 Weekly health and activity summaries
🟢 Iterating on brand elements to ensure consistency across the website and press kit
By concentrating on these areas, I was able to transform the designs into an experience that was both user-centered and true to the film’s story and legacy.
The first image below shows my initial high-fidelity draft. After several rounds of iteration and feedback, the second image represents the final design delivered to the client.
Action
Results
Reflection
The final deliverable met all major objectives and gave the Melody Maids team a cohesive digital identity.
✅ Launched the Melody Maids’ first-ever digital presence, delivering a multi-page, responsive website optimized for both desktop and mobile to ensure seamless cross-device usability.
✅ Developed a scalable brand identity system—including typography, color palette, reusable UI components, and visual guidelines—applied consistently across the website, EPK, and supporting promotional materials.
✅ Improved clarity, readability, and accessibility of historical storytelling by applying UX writing principles, chunking long-form archival content into scannable modules, and meeting WCAG contrast and navigation standards.
✅ Delivered a complete set of press-ready materials (bios, images, logos, EPK) integrated directly into the site’s IA, streamlining access for journalists, festival organizers, and media stakeholders.
✅ Strengthened stakeholder alignment through iterative feedback cycles, design critiques, and usability testing, ensuring the final product balanced historical authenticity with modern digital expectations.
These results provided the documentary with its first digital home, ensuring it could engage audiences while giving media access to professional, press-ready resources.
Reflection
Front-to-End Project Reflection
This project taught me how to balance historical storytelling with modern digital design. Creating a brand system from scratch pushed me to lean on both design fundamentals and AI workflows to accelerate copywriting and branding decisions, while still prioritizing clarity and accessibility.
The biggest lesson: iteration with stakeholders was essential. Feedback loops shaped the site into a product that not only represented the film’s legacy but also resonated with audiences, press outlets, and festival stakeholders.
