I am teaming with my brother Dan, in designing and creating a movie review website for his graduate school project.
My role as the UI designer is to create a simple to use, yet aesthetically pleasing site that targets those interested in learning more about which movies are worth investing their money and/or time into.
With so many movie sites out there already, Dan knows his site will need to win his audience over with his amazing content and writing style. If his site is pleasant to view and interact with, it will go along way with keeping his readers coming back.
Dan wants his site to:
- Bring in traffic from other film fans
- Allow users to subscribe to his newsletter
- Show off his writing and film analysis skills
I began sketching wireframes on paper, below are the variations of the home page and the review screen.
After the initial sketches, I mocked up the wireframes in sketch to get a visible workflow
Once the rough design was approved by Dan, I began working on the prototype and final design.
Desktop Home Screen
I came across a spacing issue in my first rough design, because I laid out the reviews in columns and rows. This quickly made the page disorganized and chaotic due to the number of reviews he has, and will continue to add as he writes new reviews.
My solution was to replace the columns and rows with a scrolling carousal menu. This not only makes the page more interesting, but easier to navigate without scrolling down the page to find the reviews you’re looking for.
The Carousel Menu works really well for the mobile design as well, saving lots of space. The hamburger menu offers an easy and compact navigation option, and the brand identity carries over from screen to screen fluidly.
The review screens are interactive, and include a clickable trailer option to engage the user even further in the film and review. Being able to see the movie preview enhances the user’s understanding and connection to Dan’s writing.
I have found this to be a fun and rewarding project, especially because it’s helping my brother with his school work. The next step will be to assist Dan in coding his site, and bringing everything to life.