MovieGlu
I led the full UX/UI redesign and front-end development of MovieGluās website, transforming its brand identity and user experience to drive B2B engagement. MovieGlu powers movie-related data for over 60 countries, offering APIs and widgets for showtimes, cinema listings, and more. My work improved navigation, increased usability, and helped attract high-value clients.
I led the full UX/UI redesign and front-end development of MovieGluās website, transforming its brand identity and user experience to drive B2B engagement. MovieGlu powers movie-related data for over 60 countries, offering APIs and widgets for showtimes, cinema listings, and more. My work improved navigation, increased usability, and helped attract high-value clients.
I led the full UX/UI redesign and front-end development of MovieGluās website, transforming its brand identity and user experience to drive B2B engagement. MovieGlu powers movie-related data for over 60 countries, offering APIs and widgets for showtimes, cinema listings, and more. My work improved navigation, increased usability, and helped attract high-value clients.
I led the full UX/UI redesign and front-end development of MovieGluās website, transforming its brand identity and user experience to drive B2B engagement. MovieGlu powers movie-related data for over 60 countries, offering APIs and widgets for showtimes, cinema listings, and more. My work improved navigation, increased usability, and helped attract high-value clients.
I led the full UX/UI redesign and front-end development of MovieGluās website, transforming its brand identity and user experience to drive B2B engagement. MovieGlu powers movie-related data for over 60 countries, offering APIs and widgets for showtimes, cinema listings, and more. My work improved navigation, increased usability, and helped attract high-value clients.
Team
1 Product designer (me), CEO, Developer (API), Content Strategist
1 Product designer (me), CEO, Developer (API), Content Strategist
1 Product designer (me), CEO, Developer (API), Content Strategist
1 Product designer (me), CEO, Developer (API), Content Strategist
Tools
Figma, WordPress, Midjourney, Adobe Photoshop, Relume
Figma, WordPress, Midjourney, Adobe Photoshop, Relume
Figma, WordPress, Midjourney, Adobe Photoshop, Relume
Figma, WordPress, Midjourney, Adobe Photoshop, Relume
Role
Web Design, Design systems, Brand Design, UX Research, Stakeholder Meetings
Web Design, Design systems, Brand Design, UX research, Stakeholder Meetings
Web Design, Design systems, Brand Design, UX Research, Stakeholder Meetings
Web Design, Design systems, Brand Design, UX Research, Stakeholder Meetings
Timeline
May 2024 - July 2024
May 2024 - July 2024
May 2024 - July 2024
May 2024 - July 2024
Redesigned MovieGlu's website, boosting engagement by 30%, cutting errors by 15%, and driving B2B client growth.
Redesigned MovieGlu's website, boosting engagement by 30%, cutting errors by 15%, and driving B2B client growth.
Redesigned MovieGlu's website, boosting engagement by 30%, cutting errors by 15%, and driving B2B client growth.
Redesigned MovieGlu's website, boosting engagement by 30%, cutting errors by 15%, and driving B2B client growth.
Redesigned MovieGlu's website, boosting engagement by 30%, cutting errors by 15%, and driving B2B client growth.
Context
After being approached by the CEO for a rapid website overhaul, I led the UX/UI redesign to address navigation and engagement issues. By restructuring information architecture and building a design system, I boosted B2B engagement by 30%. Collaborating with stakeholders, I delivered this project in two months as the sole designer and developer.
After being approached by the CEO for a rapid website overhaul, I led the UX/UI redesign to address navigation and engagement issues. By restructuring information architecture and building a design system, I boosted B2B engagement by 30%. Collaborating with stakeholders, I delivered this project in two months as the sole designer and developer.
Role
As the sole UX/UI designer and developer, I was responsible for:
Conducting a UX audit to identify usability issues and friction points.
Performing a competitive analysis to benchmark against leading industry websites.
Redesigning the website with a focus on straightforward navigation, strong visual hierarchy, and an intuitive information architecture.
Developing a design system from the ground up
Implementing the fully responsive design within WordPress, handling the front-end structure and styling.
Collaborating with the CEO and content strategist in feedback loops.
Ensuring the new design increased user engagement and improved B2B lead generation.
This project required me to wear multiple hatsāfrom research and strategy to design and front-end developmentāwhile delivering results on a strict deadline.
As the sole UX/UI designer and developer, I was responsible for:
Conducting a UX audit to identify usability issues and friction points.
Performing a competitive analysis to benchmark against leading industry websites.
Redesigning the website with a focus on straightforward navigation, strong visual hierarchy, and an intuitive information architecture.
Developing a design system from the ground up
Implementing the fully responsive design within WordPress, handling the front-end structure and styling.
Collaborating with the CEO and content strategist in feedback loops.
Ensuring the new design increased user engagement and improved B2B lead generation.
This project required me to wear multiple hatsāfrom research and strategy to design and front-end developmentāwhile delivering results on a strict deadline.
Problem
MovieGluās previous website was failing to convert visitors into paying clients. Key issues included:
Poor Navigation & User Drop-off ā The old website had usability issues, leading to high abandonment rates.
Ineffective Branding & Messaging ā The website wasnāt clearly communicating the value of MovieGluās APIs and services to potential B2B clients.
Competitive Disadvantage ā Compared to other movie API providers, MovieGluās website wasnāt visually competitive or reflective of its industry-leading capabilities.
SEO & Engagement Concerns ā Data showed that users werenāt staying long enough or interacting deeply with the siteās content, impacting search engine visibility and business inquiries.
MovieGluās previous website was failing to convert visitors into paying clients. Key issues included:
Poor Navigation & User Drop-off ā The old website had usability issues, leading to high abandonment rates.
Ineffective Branding & Messaging ā The website wasnāt clearly communicating the value of MovieGluās APIs and services to potential B2B clients.
Competitive Disadvantage ā Compared to other movie API providers, MovieGluās website wasnāt visually competitive or reflective of its industry-leading capabilities.
SEO & Engagement Concerns ā Data showed that users werenāt staying long enough or interacting deeply with the siteās content, impacting search engine visibility and business inquiries.
Quick Facts
Quick Facts
Backstory: Movie Glu serves real-time movie and showtime data in over 60 countries, supporting top cinema brands.
The Problem: Poor navigation and weak conversion rates hindered lead acquisition.
What I Did: Led UX/UI design, front-end development, and implemented a scalable design system.
Why: To enhance B2B engagement and improve the brand's competitive position.
Backstory: Movie Glu serves real-time movie and showtime data in over 60 countries, supporting top cinema brands.
The Problem: Poor navigation and weak conversion rates hindered lead acquisition.
What I Did: Led UX/UI design, front-end development, and implemented a scalable design system.
Why: To enhance B2B engagement and improve the brand's competitive position.
Solution
Solution
Starting with a UX audit and some in-depth research, emphasising accessibility and responsive design, I built a fully responsive design system to bring MovieGluās new identity online. The design system covered everything: typography, colour schemes, UI componentsāeverything needed to create a seamless, engaging experience across devices that speaks to their brandās new voice.
Starting with a UX audit and some in-depth research, emphasising accessibility and responsive design, I built a fully responsive design system to bring MovieGluās new identity online. The design system covered everything: typography, colour schemes, UI componentsāeverything needed to create a seamless, engaging experience across devices that speaks to their brandās new voice.
Impact Snapshot
š 30% increase
š 30% increase
š 30% increase
in user engagement (tracked via SEMrush)
šÆ 20% jump in task completion rates
šÆ 20% jump in task completion rates
šÆ 20% jump in task completion rates
after 8 design iterations
š¼ New client aquired
š¼ New client aquired
š¼ New client aquired
shortly after launch, validating the improved B2B appeal
š 15% reduction in user errors
š 15% reduction in user errors
š 15% reduction in user errors
(measured via usability testing)
ā³ Delivered within two-months
ā³ Delivered within two-months
ā³ Delivered within two-months
meeting business timeline goals
š£ Process
1ļøā£
Research
1ļøā£
Research
1ļøā£
Research
1ļøā£
Research
1ļøā£
Research
2ļøā£
Sitemaps
2ļøā£
Sitemaps
2ļøā£
Sitemaps
2ļøā£
Sitemaps
2ļøā£
Sitemaps
3ļøā£
Wireframes
3ļøā£
Wireframes
3ļøā£
Wireframes
3ļøā£
Wireframes
3ļøā£
Wireframes
4ļøā£
Design System
4ļøā£
Design System
4ļøā£
Design System
4ļøā£
Design System
4ļøā£
Design System
5ļøā£
Web Development
5ļøā£
Web Development
5ļøā£
Web Development
5ļøā£
Web Development
5ļøā£
Web Development
I tackled navigation and conversion issues. Using web Analytics (SEMrush), I identified engagement patterns and reduced the bounce rate.
What I Did:
š Heuristic Evaluation: Reviewed UX practices.
š Analytics Review: Analysed user data.
š Benchmarking: Studied industry best practices.
I tackled navigation and conversion issues. Using web Analytics (SEMrush), I identified engagement patterns and reduced the bounce rate.
What I Did:
š Heuristic Evaluation: Reviewed UX practices.
š Analytics Review: Analysed user data.
š Benchmarking: Studied industry best practices.
Step 2: Information Architecture
After identifying key usability issues in the UX audit, I focused on structuring the websiteās content and user flow to improve navigation and engagement. This part of the process included adding several new pages that the Business stakeholders wanted to include. I conducted several meetings to finalise the structural layout.
Why
MovieGluās previous website had poor information hierarchy, unclear navigation, and friction in the user journey. Users struggled to find key information about APIs, and conversion points were weak. A clear, structured layout was needed to guide users seamlessly.
What I Did
š Sitemap Redesign ā Reorganised page structure and navigation to make essential content (APIs, pricing, documentation) more discoverable.
š Stakeholder Collaboration ā Gathered feedback from the CEO and content strategist to refine content placement.
Step 2: Information Architecture
After identifying key usability issues in the UX audit, I focused on structuring the websiteās content and user flow to improve navigation and engagement. This part of the process included adding several new pages that the Business stakeholders wanted to include. I conducted several meetings to finalise the structural layout.
Why
MovieGluās previous website had poor information hierarchy, unclear navigation, and friction in the user journey. Users struggled to find key information about APIs, and conversion points were weak. A clear, structured layout was needed to guide users seamlessly.
What I Did
š Sitemap Redesign ā Reorganised page structure and navigation to make essential content (APIs, pricing, documentation) more discoverable.
š Stakeholder Collaboration ā Gathered feedback from the CEO and content strategist to refine content placement.
Methodologies:
Sitemap Redesign: Reorganised pages to prioritise essential content.
Wireframes: Created low-fidelity wireframes to test usability.
What I Did
š Low-Fidelity Wireframes ā Sketched layout ideas to establish the structure of key pages (Home, API Overview, Pricing).
š Wireframing Key Pages ā Created low-fidelity wireframes in Figma to test layout variations before moving to high-fidelity designs.
š Stakeholder Reviews ā Gathered feedback from the CEO to ensure alignment with business goals and technical feasibility.
Methodologies:
Sitemap Redesign: Reorganised pages to prioritise essential content.
Wireframes: Created low-fidelity wireframes to test usability.
What I Did
š Low-Fidelity Wireframes ā Sketched layout ideas to establish the structure of key pages (Home, API Overview, Pricing).
š Wireframing Key Pages ā Created low-fidelity wireframes in Figma to test layout variations before moving to high-fidelity designs.
š Stakeholder Reviews ā Gathered feedback from the CEO to ensure alignment with business goals and technical feasibility.
Step 4: High-Fidelity UI Design & Design System
After validating the structure with wireframes, I moved into high-fidelity UI design, ensuring a polished, modern, and scalable interface that aligned with MovieGluās brand identity.
Why
Wireframes established the functionality and structure, but the final UI needed to be visually engaging, accessible, and brand-consistent to attract and convert B2B clients.
What I Did
šØ Visual Design in Figma ā Developed high-fidelity mockups with a refined colour palette, typography, and component styling.
š Built a Scalable Design System ā Created a library of UI components (buttons, forms, cards) to ensure consistency and efficiency across pages.
š Brand Alignment ā Strengthened MovieGluās identity by modernizing the look while maintaining brand recognition.
Results:
A polished, modern UI that reinforced MovieGluās credibility and business value.
Faster design iterations due to a reusable design system.
Ensured accessibility compliance, making the platform inclusive for all users.
Step 4: High-Fidelity UI Design & Design System
After validating the structure with wireframes, I moved into high-fidelity UI design, ensuring a polished, modern, and scalable interface that aligned with MovieGluās brand identity.
Why
Wireframes established the functionality and structure, but the final UI needed to be visually engaging, accessible, and brand-consistent to attract and convert B2B clients.
What I Did
šØ Visual Design in Figma ā Developed high-fidelity mockups with a refined colour palette, typography, and component styling.
š Built a Scalable Design System ā Created a library of UI components (buttons, forms, cards) to ensure consistency and efficiency across pages.
š Brand Alignment ā Strengthened MovieGluās identity by modernizing the look while maintaining brand recognition.
Results:
A polished, modern UI that reinforced MovieGluās credibility and business value.
Faster design iterations due to a reusable design system.
Ensured accessibility compliance, making the platform inclusive for all users.
Step 5: UAT Testing and Prototype
Before moving into development, I conducted Usability Acceptance Testing (UAT) and prototype iterations to ensure the design was functional, intuitive and met stakeholder expectations.
Why
Testing the prototype before implementation helped catch usability issues early, refine interactions, and validate key design decisionsāensuring a smooth transition to development.
What I Did
š§Ŗ Usability Testing with Stakeholders ā Ran tests with internal teams, gathering feedback on navigation, responsiveness, and clarity.
ā© Rapid Iterations ā Addressed usability pain points, refining the UI and micro-interactions for a seamless user experience.
š± Interactive Prototyping ā Used Figma to create a clickable prototype for stakeholders to experience the whole user journey, testing user flow and interactions.
Step 6: Implementation and Development
With the high-fidelity UI designs finalized, I transitioned into development and implementation, ensuring the designs translated seamlessly into a fully functional website.
Why
A great design is only effective if itās properly implemented. Since I was responsible for both UX/UI design and front-end development, I needed to ensure the final product matched the design vision while maintaining performance, accessibility, and responsiveness.
What I Did
š» Front-End Development in WordPress ā Implemented the new design using customised themes, layout builders, and CSS adjustments.
Step 6: Implementation and Development
With the high-fidelity UI designs finalized, I transitioned into development and implementation, ensuring the designs translated seamlessly into a fully functional website.
Why
A great design is only effective if itās properly implemented. Since I was responsible for both UX/UI design and front-end development, I needed to ensure the final product matched the design vision while maintaining performance, accessibility, and responsiveness.
What I Did
š» Front-End Development in WordPress ā Implemented the new design using customised themes, layout builders, and CSS adjustments.
Impact
Impact
With the new website launched, I tracked key performance metrics to measure its effectiveness in engagement, usability, and business conversions.
Why
A redesign is only successful if it delivers real-world results. By analyzing pre- and post-launch data, I was able to quantify the impact of the new design and validate the improvements.
What I Measured
š User Engagement Boost ā 30% increase in user retention, tracked via SEMrush & Google Analytics.
š Reduced User Errors ā 15% fewer task completion errors, improving usability.
šÆ Higher Task Completion ā 20% improvement in user journey efficiency.
š¼ Client Acquisition ā The new site helped MovieGlu onboard new B2B clients post-launch.
ā³ On-Time & On-Budget Delivery ā Project completed within two months, meeting stakeholder expectations.
With the new website launched, I tracked key performance metrics to measure its effectiveness in engagement, usability, and business conversions.
Why
A redesign is only successful if it delivers real-world results. By analyzing pre- and post-launch data, I was able to quantify the impact of the new design and validate the improvements.
What I Measured
š User Engagement Boost ā 30% increase in user retention, tracked via SEMrush & Google Analytics.
š Reduced User Errors ā 15% fewer task completion errors, improving usability.
šÆ Higher Task Completion ā 20% improvement in user journey efficiency.
š¼ Client Acquisition ā The new site helped MovieGlu onboard new B2B clients post-launch.
ā³ On-Time & On-Budget Delivery ā Project completed within two months, meeting stakeholder expectations.
Outcome
ā
Increased user engagement by 30%, making the site more intuitive and easier to navigate.
ā
Reduced friction in the conversion funnel, leading to new B2B client acquisitions.
ā
Elevated the brand identity, aligning it with top-tier industry standards.
ā
Increased user engagement by 30%, making the site more intuitive and easier to navigate.
ā
Reduced friction in the conversion funnel, leading to new B2B client acquisitions.
ā
Elevated the brand identity, aligning it with top-tier industry standards.
Key Takeaways
š§āš§āš§āš§ Collaboration Over Wearing Too Many Hats ā While I handled both UX and development, I realised I thrive in cross-functional teams where I can focus on design and ensure seamless handoffs.
š Data-Driven Design Works ā Research and usability testing led to measurable impact, proving the value of an iterative approach.
š Adaptability is Key ā Navigating tight timelines and evolving priorities reinforced the importance of agile problem-solving.
This project reinforced the power of strategic and growth UX design practices in driving business outcomes while shaping my perspective on the kind of team environment I thrive in. Moving forward, Iām excited to contribute to cross-functional teams where collaboration enhances both the design and implementation process.
