DESIGN BRIEF
A personal project where I, as the UX Designer, help a movie theatre establishment called Jasper Cinemas digitize their ticket-buying, movie browsing, and customer management process.
AUDIENCE
Movie Goers
Age 18-50
Family units (children 5+)
Anyone who is a loyal customer or potential loyal customer of Jasper Cinemas
Age 18-50
Family units (children 5+)
Anyone who is a loyal customer or potential loyal customer of Jasper Cinemas
Loading Bar: The loading bar should be visible but not intruding so the user can know that the next screen will pop up soon. I might take some inspiration from the Sims loading screen and add some witty sayings that accompany the loading bar.
Cards: I utilized the vertically scrollable cards design to show different movies. This design seems overused to me but no matter how I design this landing page, this seems be to the most efficient way to show many movies in a short amount of time without many pain points or errors.
Menu: Menu placement is always tricky. You can either save space by putting a hamburger menu in the top left or, ideally, right corner of the screen or use bottom-bar menus for that work for people both left-handed and right handed. I chose to have a bottom-bar menu for people who are left and right handed. This satisfies accessibility issues that hamburger menus might cause.
Research: https://medium.com/swlh/why-should-mobile-menu-be-placed-below-701bbf7cd83e
Login/Sign Up Titles: I’ve done so many iterations of login/sign up pages but this design seems to work the best on mobile platforms. I’ve also done this iteration on web but the animations don’t pay off on web interfaces.
Continue as guest: When people don’t have time to sign up, they can continue as a guest. However, this theatre has a loyalty program they want to market to the user. The pay off of signing up to Jasper Cinemas should be automatically being part of the loyalty program and earning points on movies tickets and concessions. This should be portrayed on this interface.
Continue as guest: When people don’t have time to sign up, they can continue as a guest. However, this theatre has a loyalty program they want to market to the user. The pay off of signing up to Jasper Cinemas should be automatically being part of the loyalty program and earning points on movies tickets and concessions. This should be portrayed on this interface.
Cards: I utilized the cards design to show different movies. This design seems overused to me but no matter how I design this landing page, this seems be to the most efficient way to show many movies in a short amount of time without many pain points or errors.
Menu: Menu placement is always tricky. You can either save space by putting a hamburger menu in the top left or, ideally, right corner of the screen or use bottom-bar menus for that work for people both left-handed and right handed. I chose to have a bottom-bar menu for people who are left and right handed. This satisfies accessibility issues that hamburger menus might cause.
Search Bar: When clicked, the search bar is an overlay of the search icon. Usually, users are typing in the name of a movie, therefore I kept the search bar small housing up to 15 characters.
Marketing Banner: Marketing banner placement is so important when designing for mobile. I had to find a sweet spot that the marketing banner is noticeable but not intrusive, much like the loading bar in the loading pages. I tried different primary colors such as yellow and blue but black is the least intrusive. This decision would actually go through testing if I was working with a research team.
Menu: I chose the bottom-bar menu to be the official menu of this app but I wanted to show different ways a menu can be implemented into the design. I added a hamburger menu as a second iteration
Since I already made a browsing page the home page, I went ahead and made a details page where a user goes to view the details of a certain movie. In this case, only the Avenger’s Endgame card is interactive.
Details Page: The poster also acts as the trailer mp4 player and is therefore is interactive. This is denoted by having a play button in the middle of the poster. I had to ask myself what is the most important information a user needs to know about a movie. I did some research on other movie ticketing services (amc.com, regal.com, cinemark.com) and found that the genre, rating, other trailers, and play time were all important feature. However the most important feature is having a CTA to get people to buy a ticket. I added a “Get tickets” button near the title to make it easier to find. I might switch the placement of the button with the genre pills. There is a back button that keeps its placement when scrolling so that a user can easily go back to the browsing page.
Changes: I tried making the “+” button in the right hand corner of the card interactive but the scrolling of the page would mess up the placement. I also made changes to the actual card by making the width stretch to span all columns of the page. Having that marginal space between the edges and the card didn’t make any sense.
From the movie’s detail page, when the play button is clicked the trailer video will overlay so there’s an easy transition. To decrease the amount of pain points, the only way a user can exit out of a trailer page is to click the “x” in the top left corner. If I was working with a research team, I’d want to test this. The buttons should be very simple to process because I took inspiration from Youtube (seen below) and Vimeo video players.
Research for "Search"
Twitch separates their search results based on types; categories, live, channels, videos, etc. An important factor to note when using this style is to include a “more” option for each type to allow users to easily view more search results of that specific type.
A prefiltered search will help save the user’s time as they wouldn’t need to click into that specific category through the navigation before starting their search. One main consideration for using this design style is that you need to have a fixed list of categories. This applies to the hamburger menu and the bottom menu.
Accessibility
It’s our job to make sure every user can comfortably work with our product. Are search results scannable and readable with a text-to-speech service? Are font size and contrast readable? Can people read them on a mobile display on a sunny day? Are the colors you use recognizable by everyone? Refer to the feedback about my search design below.
Less typing, more tapping
Serendipity is key to reducing the burden of user input and previous search behaviour can help predict current search requirements.
Less typing, more talking
Voice search is a step further (in reducing the cost of user input) and has consequently become increasingly popular, especially in younger demographics, with more than 20% of Google and Bing searches conducted this way.
In response to this trend, Google invested heavily in ASR (Automated Speech Recognition) technology… reducing error rates from 80% to 20% and now around 8% (in the past couple of years)! Refer to the feedback about my search design below.
Feedback from mentor:
1) "people who rely on text-to-speech to read will have problems with this: I would go for "normal" text instead in the project editor, you can even define the text size, font and other details"
Better search capabilities
· Contextual search
· Voice search
As discussed earlier, the rapid evolution of voice recognition technology is evolving voice input from an error-prone novelty to a viable and efficient input method.
As discussed earlier, the rapid evolution of voice recognition technology is evolving voice input from an error-prone novelty to a viable and efficient input method.
· Conversational search
Advancements in AI have enabled us to converse with search engines / virtual assistants in a more intuitive and human manner.
Advancements in AI have enabled us to converse with search engines / virtual assistants in a more intuitive and human manner.
Add Favorites Page
On the home page, there is a plus sign icon on every movie card. That is supposed to take the user to their favorites page. This is how they can keep track of movies that are coming soon or ones that they want to review.
Add pages for the Hamburger menu
The only interaction for the hamburger menu is the preferences page. I would add pages for "Wallet" to show how the app pairs with your phone's wallet and for "History" to show points allocated for movies and concessions.
Feedback from Adobe
