Based on the previously stated problems, it was not too hard to put on paper few principles we wanted to built this app on. Although we have done some tinkering and pivoting in the early design stages, it has quickly become clear what we want to build.
So here is the list of the principles:
1. Big idea. “Movie ratings just turned very personal” Enable friends to have a social experience of checking or wanting a movie, leveraging their pre-existing knowledge of personal movie taste. Provide content and the venue for enabling discussion around movies in the natural environments: a messaging system, the facebook, a coffee shop, a bar…
2. Simple. As Tufte would say “lose administrative debris” and bring the content up. The way of removing UI elements is by the means of progressive disclosure. Add options only when needed, rather than having standard ever-present iOS top and bottom toolbars. Have all calls to action really easy to do. The ChiWi is not a micro blogging, it is like micro tweeting. Perhaps even nano tweeting.
3. Personal. User need to be able to install the app and have a feed of movies right there. In the beginning it is the new movies and the ChiWi editorial theme of the week. Running the app doesn’t require a user account in the beginning. However, Facebook login is requested only when the user tries to Check or Want a movie. Facebook login is as easy as one tap, upon which your feed suddenly becomes populated with all of your friends chiwis and your chiwis that are now stored on the server. All Facebook friends with their photos are now stored under Following, where you can easily access their respective ChiWi pages (screenshot)
4. Beautiful. Movies are beautiful visual experiences, so it shouldn’t be that hard to create visually rich app. We needed to find a source of visuals that create signal rather than noise. What do I mean by that? We are using a great database for our app, themoviedb.org and we only use a fraction of available data. For this particular point, themoviedb has a fantastic choce of “wallpapers” 16:9 images either produced by marketing dept of the production company or a frame from the movie itself. There are only handful of those per movie, but that is more than enough. Why are they better than posters? First, they are clean hirez photos, no graphic elements or typography on top. Second, one single wallpaper image is worth 1000 words, it shows characters in a situation important for the movie, facial expressions that tell a story, actors that are recognized, without their names shown. The only text piece ChiWi overlays on top of the clean image is the title of the movie. No production date, cast list, or average ratings… One individual rating is shown though, only if and when one of your friends star rate the movie. A gap between the tiles is defined so the movie graphics do not spill into each. This content is presented in a tile view over black background, rather than white, adding the notion of a movie theatre.
5. Safe. It is very important that the user is in full control. Consistent UI elements across all the screens are back button, the page title and the menu button. Back button allows deep browsing experience, exploring by users, actors, directors etc. and still being able to see the history and the initial place browsing has started on. Each page with a set of movies is easily filtered and sorted so the relevant subset is shown. Although the personal rating of a movie is not socially very sensitive category, in the Settings panel we have included easy to access controls over what is shared and with whom. Aside from the Setting panel, other items in the main many include ChiWi Feed, My ChiWi, Following, New Movies and Theme of the Week.
6. Self-similar. Ideally we hoped that we could create a single pattern of presenting the content in the app. Current tile structure is based on fibonacci numbers. Math was easy, 640px width of iPhone rez divide by 8 defined 80x80px basic cell. We use tile sizes of 1×1, 3×5, 5×8 etc. As opposed to services like instagram or airb’n’b we didn’t use single size cell to present all the movies, even thought real estate wise, that would utilize the pictures the best. The thing is, when you have everything emphasized, nothing is emphasized. Instead, we established 3 sizes, small 3×3, medium, 3×5 and large 5×8. Small and medium are alternating after each large tile, creating a rhythm. This way, not only the large tile is emphasized, but the smaller one actually get more attention too. Content is browsed as a magazine rather than a conveyor belt. Another unusual elements is the toolbar that does not sit on top, but below first row of tiles – to begin with. This is mimicking magazine headers and aims at creating simple but iconic layout structure. Self similar elements (fonts, dotted grid overlay, a highlight colour, icons etc) are not only used within the apps but in the marketing collateral as well.