Day 2. Making a standalone application for smart movie search.
Long story short: in our second meeting, we worked on the design of our smart movie search app. Having identified the problem we wanted to solve with the app, we faced a number of expected UI/UX issues. Then we determined which services we needed to integrate with, and as a result, we designed several screens of the future app.
We have two ideas:
- design a smart search concept for some existing streaming service, like Netflix, Disney, Amazon, HBO Max
- and make our own full-fledged smart movie search app.
As a result, at the second Sunday meeting we decided to focus on our app: to make a design prototype and develop it. The three of us called online and started discussing and making the design. We designed it in Figma in a common workpace, and at the same time, we discussed and looked for references and competitors.
What issue we’re trying to solve: how integrating AI into a consumer product can improve the user experience.
The idea behind our app is not just to provide movie suggestions based on genre, year, country, or mood, but to enable users to find a movie by asking open-ended questions. Allow users to ask for recommendations, help them to recall a particular movie, suggest similar movies, let them describe a concept of a movie that they might not even exist and receive an answer. Additionally, our app also provides information on where the movie can be watched or purchased, and allows users to jump right to the service.
We started with a simple sketch and ideas quickly began to emerge.
The core of the application is the search output. We decided to immediately make a clear, beautiful design of the movie card and streamlined transitions to services where the movie can be watched.
After making a few options, we realized what data we wanted to show the user.
- Primary: poster, title, description, where to watch
- Secondary, but useful: “Watch trailer” button, director, actors, year, age rating, duration, IMDb link.
- Controversial: genre, IMDb rating.
So it turned out, our app requires integration with IMDb to collect movie data, YouTube to download trailers, and Google to gather information on where the movies can be watched.
Here are some interesting points from our design work session. We answered some of them right away, and we’ll think about the rest during the design process.
- What is the format of the poster? Are we going to take it behind the text, it’s quite fancy these days, or are we going to stay in the conventional film format? We stopped on the classic — it’s easier to design and easier to develop, there will be no conflicts with the poster’s fonts, and the text will be visible.
- Should we show the genre? By making up possible questions, it became clear that the genre and mood of the film would already be expressed in the request itself from the user. Remove the genre.
- Do we need the IMDb score on the movie card? This is where it gets interesting. We remove it because the user came with his own request, under his unique mood and preference. The result of his search should not be evaluated, even if the rating relates to the movie and not to the request. By playing with ChatGPT, I realized that it often suggests one specific movie for my specific query. And that’s cool! One exact match gives more value to the result. The movie I found fits my desire, it’s what I want, I don’t want to be upset with the 6.3 rating. I don’t want my vibe or my imagination be evaluated. The idea may be questionable, but the opposite has not yet been proven. The solution so far is this.
- Do we need to show only one result or maybe ten? Usually, designers suggest that less is better. I believe we should follow this rule. The more precise the user’s request, the fewer search results should be displayed. The final result must be accurate. For example, Chat GPT does this well. When I searched for “weird, but smart with beautiful music and about american students in 80th” it only provided one movie, and I loved it. It creates the impression that the result is very accurate, and I found the exact movie I was looking for.
- How to show multiple results? List, scrolling horizontally or vertically? 🤔
- Do we need a “Show more” button, “More results” button, etc.? 🤔
- Keep the cards open at once, or reveal them with a nice animation? 🤔
- We decided to place an advertisement. Where to show the banner? How about displaying ads only on the results page 🤔
So, here are the results of Day 2, in which we focused entirely on the design of our app:
Welcome screen
Search result card
Main screen
Thank you! See you!
