Movie Munch; a ‘date-in-a-box’ concept
For my first ever visual design challenge I was tasked with creating four screens for a conceptual ‘date-in-a-box’ product. There were no limitations to scope other than the 1 week timeframe, with an emphasis on branding & UI design over functionality.
Ideation
My mind went immediately to cinemas, specifically Secret Cinema (or the lack thereof) when this brief was set. It was early June ‘20, at the height of lockdown in London and I had just been ruing my cancelled Dirty Dancing tickets. Why not bring that immersive experience into peoples’ homes?
I decided to incorporate meal kits, another lockdown craze, and thus Movie Munch was born. The app would enable users to pick a movie, and have all the ingredients needed to recreate a meal from it delivered to their home. I would be designing for myself as a part of the large target market of bored Londoners, accustomed to unending possibilities but indefinitely confined to their homes.
Definition
To define my brand identity I started a mood board and became set on using vintage red and antiquated gold as my primary colours. I wanted that old-school cinema vibe, all plush velvet seats and lightbox signage. The brand values were clear; the app should be accessible, affordable luxe, and induce a feeling of nostalgic adventure.
Colour
After a quick play on paper, I opened Sketch and got to work. My good mood lasted as long as it took me to put the hex codes into my nifty tint/shade generator and realise that I hated the red from my mood board. Not only was the red terrible, but the accompanying gold looked flat and unappealing when reduced to a single hue with all of the texture and tarnish removed. At this point I learnt several valuable lessons regarding colour, not least the importance of viewing it away from its original context before setting your heart on it.
Eventually I stumbled across an innocuous photo of a blue velvet sofa. This gave me the clarity I needed and I was able to create styles based on my palette. The richness of the blue made for AAA rated contrast levels so that was one less worry moving forward.
Type
Happily I didn’t have as much trouble compiling the typefaces. I knew that I wanted sans-serif with a clean lightbox feel. They needed to be easily legible, and I wanted some weight to the headings.
Compilation + iterations
The design itself came together relatively quickly as the objective was to create a strong visual identity rather than a highly functional app. I find blocking really helpful in ensuring that every element that needs to appear on a screen doesn’t get lost or forgotten; creating a named layer for each gives plenty of flexibility in determining the best layout.
The layout of the onboarding screen evaded me for a while and still isn’t quite right, but the product display page follows the design conventions that my user would expect (I ordered through Deliveroo in the name of research). I love how using the old style poster helps to create the feeling of nostalgia I was looking for and I wanted to reflect that distressed feel in some of the other elements. Initially I went overboard with the texture I created on Affinity but that was straightforward to clean up.
There were also several iterations to the bottom drawer menu while I scaled the icons and decided how it should be opened and closed.
One of the most useful things I learnt on this project was to configure my layout to a 4px grid, and then ensure that the ‘line’ value for all text was a multiple of 4. Getting the layout settings right saved me a huge amount of time and kept my spacing even. I also taught myself to draw with vectors; the box on the onboarding screen was a labour of love but I got there in the end.
Retrospection
Overall I’m happy with my concept and design; I feel that it’s a unique offering and does a good job of portraying the brand’s identity. I wanted the app to encourage ongoing interaction from its users, and I believe that the blog posts and tongue-in-cheek copy provide incentive for them to explore the content further. The visual design elements have a consistent style throughout and the icon set that I created is in keeping with this.
I know now that I shouldn’t have used modal boxes on the blog page and the PDP. The inclusion of a ‘back’ button would improve the user experience and this simple omission highlights the importance of usability testing! I really enjoyed working on the copy for the app, and found it interesting to develop the right tone. I exported the file to Zeroheight to get a feel for the software and created a style guide template on Sketch that I could use for future projects.
