Movie Night App: Visual Design
Part 2: Bringing the app to life! Part 1 here
1. Finding My Direction
After the previous phases of paper and interactive prototyping, I knew that my initial layout and user flow was effective, so now it was time to breathe some life into the interface and give it a personality.
I began by initially translating 3 screens from my paper sketches into low-fidelity wireframes within Sketch. This helped me to gain a better feel for the layout and spacing while also beginning to look at details like font size and UI labelling.
The key to the usefulness of this app will primarily be in its simplicity and time-saving design. Therefore, I wanted to keep the layout as straightforward as possible without too many unnecessary UI elements.
From the user feedback in the first round of prototyping I was fairly confident that for the time being, the information on the screens was essential and I could begin increasing the fidelity and finding a suitable theme for the design.
Mood boards, Colour Palettes & Brand Values
From responses obtained at the user interview stage I had found that my user, Julien, was fond of classical cinema aesthetics but primarily watched movies at home; so the challenge was how to translate the feel of the cinema experience into an app that would potentially be used for choosing a movie to watch on a laptop in bed.
Creating a mood board offered me an insight into a potential aesthetic for the design while also helping to remind me of the atmosphere and nostalgia behind the cinema-going experience. I felt that if I could include these nostalgic cues without sacrificing clarity or simplicity, it would help to create a strong brand identity which could potentially add to the experience of using the app.
From the mood board I also began to get important cues for potential colour palettes that could help to translate the atmosphere of the cinema experience onto the small screen.
Now that I had a clear visual direction to move in I could start thinking about how that would translate into a set of brand values. These values would help to steer my decisions and create an experience that visually and functionally represented the needs and preferences of the user.
Here is what I decided on for my ‘Movie Night’ app…
Now to translate these ideas, values, colour palettes and aesthetics onto the screens, or as Saul Bass would say: “Design is thinking made visual.”
2. Refining My Direction
In the image above you can see the high-fidelity versions of the wireframes I arrived at. Taking into account the aesthetics from the mood board, colour palettes and brand values I tried to create an interface that instantly felt both familiar and unique at the same time. Here is how I arrived at this current iteration:
Profile Screen
The standout feature from the mood boards that conjured up nostalgia was the marquee cinema sign. My user had mentioned that he’d like to see something written in neon or in lights for the profile page, as it made him think of classic cinema experiences. I adapted this idea and created the header to look like an old cinema marquee complete with lights and vintage lettering.
After some searching, I found that the Bebas font had the look of old cinema marquee lettering and fitted the aesthetic perfectly. The header now felt as though you were about to walk into the cinema foyer, so it made sense that the next step of the process would be going to the ticket booth.
I had the idea for a ticket stub user icon very early on in the process. I researched some designs from real cinema tickets then created the UI icon in Sketch. My thinking behind this choice was that it would save time by not requiring the user to set a profile picture while at the same time adding some valuable character to the profile icon. The red carpet is another element synonymous to vintage cinema foyers; therefore it made sense that the bottom element of this screen, the ‘Randomise’ button, would echo this aesthetic as a red strip across the bottom of the screen.
The dark background colour, combined with the red lettering and button elements, would keep it modern and familiar, as it’s in line with Netflix aesthetic.
Initial feedback from my user for this screen was positive. He liked the ticket stub icon, the marquee and the ‘randomise’ button in terms of aesthetic and felt that overall it had a good sense of character. This meant that for now, iteration could be paused on this screen while the others were developed.
“It looks great, like a real app! I can imagine this on my phone”
Ranking Screen
The next screen’s goal is to get the user to rank the displayed movies in order of preference.
I decided that the marquee header would be present on all pages for consistency and to reinforce the cinema aesthetic throughout.
Posters are a huge part of the cinema and movie experience. I felt that utilising this powerful and striking form of imagery would add an extra dimension of character to the interface while also potentially reminding the user of a cinema lobby full of movie posters.
I chose to add the ranking number icon to the top left-hand corner of the poster cards in order to keep the posters as the main focus, but still clearly visible to the user. Previous iterations had this number in the centre of the movie poster (see image below) which added to the crowding and competed for attention with the other elements too much. In keeping with the idea of highlighting the poster design, I needed a font that would still be readable over some very busy and bright imagery but not diminish the visual appeal of the poster design. The DIN Condensed font worked perfectly for this and keeping the font and number icons in a muted white tone helped to make them clear but not too competitive for the user’s attention.
The additional UI elements of the ‘back’ and ‘done’ buttons were again designed to be simple and unobtrusive yet clear in their purpose. The ‘back’ button uses the same muted tone of white as the other UI elements so as not to be too intrusive, whereas the ‘done’ button uses a muted green colour that was derived from the initial moodboard and colour palettes. This colour choice was made to contrast with the red of the other UI elements and also help to gently guide the user to the next stage of the flow, green usually means go so it only makes sense!
This ranking screen took more time to arrive at than that of the previous profile screen. The nature of having a lot of busy images on one small screen is that it can feel crowded, so a few iterations were tested with users to try and get the balance right.
A number of different heights, widths, spacings and layouts for displaying the posters were tested. After considering user feedback, I settled on a combination of the poster card size and ranking number icon from screen 2 (in the image above) coupled with the spacing from screen 1.
Result Screen
Once the user has completed the process they are presented with the movie which received the highest ranking overall.
This screen had to be clear, simple and leave no ambiguity as to what the result was, so I felt that the movie poster could again be used as the star of the show here.
All of the previous UI and header elements are present on this screen, along with a callback to the ‘red carpet’ element from the first screen. the ‘see user’s ranking’ button has the same appearance as the ‘randomise’ button on the profile screen to help unify the overall aesthetic throughout the app.
In a similar fashion to the first screen, primarily due to its simplicity, there weren’t really any issues with this layout and design for the user so no real changes had to be made at this stage. This will likely change with further user testing…
Feedback, feedback and even more feedback!
With the high-fidelity screens at a presentable stage it was time to get some second, third, fourth & fifth opinions! Overall, extended user testing yielded positive responses. Here are some examples of the positive user feedback:
“The old school marquee gives an excited feeling, definitely something I would be jazzed up to use! Keeps movies as special occasions :)”
“Great expression of the brand values via the visuals, it is indeed retro but in a fun and definitely not boring way!”
Positive feedback is always good to hear and shows that the design is on the right track, visually at least. However, something that popped up a number of times in feedback was the issue of finding out more about a movie from the ranking screen.
“Can I see some info about this movie before I decide to try again or go with it?”
Julien, my target user, is a big movie fan and knows a lot about films of all kinds, so he always recognised films from their posters and had and idea of what they were about. This was something I had initially failed to account for, that often a user may be unfamiliar with a movie from the poster and title alone, so I wanted to come up with a solution.
My initial idea to solve this was to add an extra UI element that would give users more info on the movie, although I didn’t want to add to the already busy visuals on this page so attempted to make this button as unobtrusive as possible (see magnified button on above image). However, users found this button too small and it also unbalanced the page slightly making it feel more cluttered. One of the users I tested with said:
“It’s clear that I can click and drag to re-order the movies but I feel like if I just clicked on the name then that would take me somewhere”
This seemed like an intuitive action for a number of users I spoke to so it made sense that clicking the movie name would offer more info about the movie. I didn’t want this action to interrupt the flow of the screens or the act of ranking the movies too much so opted for this information be served in a pop-up, as can be seen below.
Conclusion
Overall I am pleased with the aesthetic of the app at this stage. I feel that the brand values and user requirements have been met at least at a basic level. Aiming to keep everything as simple as possible in terms of design and functionality has been key so far! I’ve found that it’s much easier to have a basic structure which you can add to when the need arises, as opposed to having a more complex and ambitious approach and then needing to strip features and elements away.
My goal is to continue to work on and develop the design and overall concept further, keep user testing, refining and iterating and see where I can take this idea. The process up to this point has been very enjoyable, informative and interesting and I feel that there is plenty more that can be done from here.
