Movie Search

Web Development - UI Redesign
May 2023
Project Overview
MovieSearch, an ambitious movie search app, initially faced limitations in UI design due to constrained React.js skills. The app's potential was evident, but it needed a transformation to fulfil its promise. This case study documents the journey from a modest UI to an elegant redesign with a sleek black backdrop and vibrant fluorescent green accents.
Problem
The original version of MovieSearch, built with limited React.js proficiency, failed to provide an intuitive and engaging user experience. The challenge was to elevate the UI to a level that matched the app's robust backend capabilities and rich movie database.
Skills used
UX/ UI Design, React, Javascript, CSS, HTML, API database and NodeJS
Colours
Introducing Elegance with Fluoro Green:
The redesign focused on combining a minimalist aesthetic with a bold colour scheme. A black background was chosen to provide a cinematic feel, while fluoro green accents were strategically used to highlight key elements, creating a visually dynamic and aesthetically pleasing interface.
Navigation
Streamlined Navigation: The user flow was restructured to ensure intuitive navigation. Clear and consistent pathways were established, allowing users to effortlessly search for movies, explore genres, and access additional features with minimal friction. Changing the direction of the menu allows for ease of selection when accessing from a mobile.
Home Page
Greater detail for a personalised experience: The home page was adapted to eliminate unnecessary clicks that a user needs to take to get to their search results. Including items such as new releases, movies currently at the cinema, and visuals of the posters will allow the user to peruse more movies rather than the singular search box.
Direct catalogue search
Direct Search: One of the key concepts for the original build was to make sure we had direct links to the search page. This allows users to directly navigate to the search function URL and eliminates the need to move through the site. Using Reach.js and Node we identified key items of movie data and displayed this in a table for users to search.

The adapted design allows for this feature to still exist, however, I have added images to enhance the visual layout and white space around each search result.
Search Results: Another key point to this project was to search the data base for people who worked on these movies. The format was to be similar to movie results however we had to graph the ratings of the movies and list these in table form. Adapting this allowed me to include images and increase the colours for a streamlined result.
Reflection
Overall this project was a great starting point for the redesign of a movie search app. The baseline skills that I gained when building the original version have allowed me to understand the possibilities and backend necessities for an application that requires API's, accessibility tokens, and search functions. This was then a positive experience when moving away from the original task and developing the UI to suit the site and increase it's visual intrigue.