Midnight Snack
My personal project endeavour — dabbling into the world of Visual Elements of User Interface Design. This would be Part 1/4 UI & UX Design specialization by California Institute of the Arts (CalArts) which I’m currently enrolled in. The concepts presented in the course are foundational to user interface design, with opportunities to build on skills in the subsequent courses in the specialization.
The Problem
Working late into the night is part of life. If you’re like me, I always find myself feeling peckish when it’s past midnight. I’m a snacker, so I prefer small bites to full meals. Most people would be satisfied with one snack, but I like some variety — chocolates, pretzels, gummy bears. I’m also the kind of person that prefers eating a bit of everything, so I’m usually not able to finish the entire bag of pretzels myself in one sitting. I usually open a big bag of something, eat just a handful of it just to store it away then throwing it out because it has turned stale/expired the next time I decide to eat it again. What a waste of food and money, right?
The Solution
So why not have all the variety you want without wasting food and have someone bring it to you? Midnight Snack is a solution I created to solve this problem.
The goal of the project is to create a simple app with emphasis on user interface, thus the main functionality of the app + user activity is contained in 1–2 screens. Submissions from each week were randomly assigned and reviewed by 2 students also enrolled in the course, and I’ll share their feedback and what improvements I made along the way.
Task 1: Create an app that finds a specific food within a given area
The main idea behind the app is for users to order a variety of snacks they crave for at night, giving rise to the name Midnight Snack. As the demographics of those who are likely to sleep late consists of students and young adults, the app aims to serve students and young adults that stay up late at night while providing affordable food options. This sets the app apart from existing food delivery platforms like Grab, foodpanda and Deliveroo as food options there are limited after midnight and surcharges may raise the total amount of the bill, making it costly. Midnight Snack operates late into the night and serves a wide variety of cheap alternatives for all.
Task 2: Create a mood board to define the mood/attitude of your product or service, or as possible content in your interface
Some comments I received from other students were:
- some images out of place, and images are mix of light & dark & don’t really create cohesive look & feel
- the pictures doesn’t convey anything about use of the app to find/order food, just general pictures of food
- if the app is for snacks, mood board has to reflect it
- mood board could be a bit more unified by color and overall mood
So I made some changes, as per the revised mood board here:
I struggled quite a bit on finding photos that would unify the mood and colour, but I think it helped neaten things a bit. I chose to go for a blue aesthetic and feel, but there’s only so many photos out there on food with a blue background. The colour palette in 1 was quite all over the place, so I decided to stick with one colour and make variations from it to be consistent. Also, the type of food in the boards are also very different, with board 2 having mostly finger food/snacks instead of main dishes in board 1 to better reflect the main offerings of the app — midnight snacks.
Task 3: Create a small pattern library of interface elements for the app, applying look and feel established in mood board.
Task 4: Sketch static interface
Here’s a demo of my product:
Final thoughts
This is a fairly simple prototype, but it took me 3 days to complete. I was frustrated at how I had spent a fair bit of time to create just one screen, but I figured that I shouldn’t be so hard on myself because I got to practice some of my Figma skills out of this activity. I know that with time, rapid prototyping would (hopefully) be second nature to me :)
