Janarayson

CineMy for Android, in Material Design

Design4 min read

Last year CineMy got the iOS 7 treatment on the iPhone. Now it's Android's turn, redesigned properly in Material Design instead of ported over.

Last year I redesigned CineMy for the iPhone in the flat look of iOS 7. Now it’s Android’s turn, in Material Design, the design language Google brought out last year with Lollipop.

I didn’t want to port the iPhone version over. Every platform deserves its own redesign, which is what I keep telling people in my UX training, so this is me practising it. It keeps the same red and the same camera, and everything else follows Android.

The Android splash screen: the white CineMy camera on red, movie showtimes at your fingertips, and Sign Up and Sign In along the bottomSign up: a Sign up with Facebook button, or a username, password and email address in Material text fieldsMovies as a two-column grid of posters: Pokemon the Movie, Transformers, Big Hero 6 and Monsters, Inc.The navigation drawer: the user name, then Movies, Cinemas, Box Office, Favourites and Go Now!, with Settings and Log out at the bottom
Signing up, movies as a poster grid, and the navigation drawer.

Movies

Movies are a grid of posters now, and the navigation drawer slides out from the side the way it does on Android. A movie opens with its poster up top, the Rotten Tomatoes score, and tabs for more info, trailers and showtimes. The showtimes have a dropdown for the day.

Big Hero 6: the poster across the top, English, PG-13, 102 minutes, an 89% Rotten Tomatoes score, the synopsis, and More Info, Trailers and Showtimes tabsThe Big Hero 6 page scrolled down, with the rest of the synopsisTrailers: a list of Big Hero 6 trailers with thumbnailsShowtimes for today: TGV Sunway Pyramid, GSC Midvalley and Growball Cinemax with their times, and a Today dropdown at the top
A movie, its trailers, and its showtimes.

Cinemas

Cinemas are split into nearest and all. A cinema has a map with a round navigate button, and tapping it lets you pick Google Maps, Waze or Papago to get there. Its showtimes are the posters again, each with that day’s times underneath.

Cinemas, Show Nearest and Show All tabs, listing TGV Sunway Pyramid, Growball Cinemax, GSC Midvalley, MBO Citta Mall and more with their distancesA cinema page: a map with a round orange navigate button, the cinema name and address, a contact number, Favourites and ShowtimesThe navigate button pressed: a choice of Google Map, Papago and WazeA cinema showtimes for today as a grid of posters, Big Hero 6, Pokemon, Transformers and Monsters, Inc., with times under each
Cinemas, one cinema, getting there, and its showtimes.

Go Now! and the rest

Go Now! has tabs for distance and showtimes, and tapping a movie gives you its details or the cinema’s. In settings you can set how far around you to look, and how far ahead Go Now! looks, from thirty minutes to two hours. Favourites swipe away with an undo, and there’s the box office, a search across movies and cinemas, and screens for when there’s no connection or no location.

Go Now! with Distance and Showtimes tabs: Pokemon at GSC Midvalley starting at 11:15 AM, 2.1 km away, then Transformers and Big Hero 6Go Now! with each result turned into two coloured buttons, Movie Details and Cinema DetailsFavourites after a swipe: two cinemas left and an Entry Removed bar with UndoBox Office, US and Malaysia tabs, with the top five films numbered in large type beside their posters
Go Now!, its shortcuts, favourites, and the box office.
Search results for Big Hero 6 under Movies and Cinemas tabsSettings: Location Radius 5 km, and a Go Now! Time Range dropdown open on 30, 60, 90 and 120 minutesMovies with no internet connection: an exclamation mark in a circle and the words No internet connectionGo Now! with a bar at the bottom saying Your location couldn't be found
Search, settings, and when things go wrong.