Inside Out

Movie websites help the viewers to get a gist of the movie. Not only this, but they also provide information that is not visible on the big screen. Movie websites are an essential medium to connect with the audience.

This project was about creating a single-page website for the movie - Inside Out. The aim was to capture the whole essence of the film on the web screen and provide all the necessary information to the viewers.

Project Details

Team

Individual project

My role

User research, Wireframing,
Design

Tools used

Adobe Photoshop,
Adobe Illustrator,
Adobe XD

Timeline

November, 2017 to December, 2017

Laptop screen displaying the landing page for the movie website 'Inside Out'

User Research

For the user research, I conducted 1:1 interviews with people from different age groups. Through these interviews, I got to know some fascinating insights and information. These interviews also helped in deciding the target audience for the website. Inside Out is a family movie, and it is relatable to all age groups. Hence while determining my target audience, I had to consider this factor as well.

The target audience selected for this project were parents and teenagers.

"I can imagine my kid using this website and collecting all the official posters, videos, and merchandise from the website. It could be a helpful tool for adults as well, where they can know the details about the individuals who worked on the film."
- Diya Thomas (39), Interior Designer

"A website like this could help me to connect with the movie better. From a brand perspective, it will also help Disney to expand their system."
- Ajay Shah (18), Student

Portrait shot of a woman in her 30s

Rashmi Jain (38)

Rashmi is a single mother with two children residing in Mumbai, India. She works as a Creative Director at a consulting agency, making INR 420K per year. She is highly detail-oriented and loves to spend time with her children.

Needs and requirements

  • Information about movie
  • Review from critics
  • Informative yet entertaining

Card Sorting

The aim of creating a single-page website was to tell the story in one flow. The card sorting method was selected to structure the content for this website, as this method was quick and efficient.

I asked Individuals within the target audience to sort out the cards according to their preference. In the end, all the results were averaged out to the final few alternatives to clear out confusion and give a direction to this project.

Insights from card sorting

  • 5/5 individuals would like to see the title of the movie first.
  • 3/5 individuals felt that storytelling is more important than credit information.
  • 2/5 individuals would love to get information about production houses and distributors.

After completing the card sorting exercise and analyzing the collected data, it helped to structure the website.

The structure of the website is in the following order -
Title → Characters → Story → Trailers → Gallery → Merchandise → Credits

Wireframes

Wireframes acted as a base for the final screen, and thus this was a very crucial stage. The wireframes had to fit in the content accurately, but they also had to complement the structure.

The aim with this was to -
Maintain a unified flow with visual and content for the website

Final Design

For the final design, I have to take inspiration from the movie and implement it on the website. From typography to the color palette, every influence has been through the movie.

The goal was to -
Achieve the same visual aesthetics of the movie on this website.

The final design of the website 'Inside Out'

Take-Aways and Next Steps

As a movie enthusiast, it was a fun project to work on. There were so many things to learn and gain from this project. I understood varied user's perspectives while conducting the card sorting exercise. It was fascinating to see how different people would like to see information differently. It was challenging still interesting to address the needs of all primary users.

Because I focused on desktop-based devices for the outcome, I would like to see how this design could be responsive to mobile devices. Another thing to think about could also be the timeline for this website. Would the website run just until the movie is in theatres, or would it be live even after that? These are few decisions I need to consider for the next steps.

Characters of the movie surrounding a laptop displaying the landing page for movie 'Inside Out'

You May Also Like

Earth surrounded by colorful dots

Building a cohesive and in-depth data visualization that informs the viewers about all the information related to space missions from 1957 to 2020.

Animated gif of the logo 11Parsec

Building the Brand identity for a design studio named ‘11Parsec’ and providing various collaterals and a brand manual.