I’ll go over my design process and explain my reasoning and thoughts behind the decisions I made.

Time spent on exercise: 3 weekends but still ongoing

Microinteraction for scrolling down on the Menu tab.


My friends and their lovely photos of .
My kerning can be improved.

What is the human problem we are trying to solve ?

According to Maslow’s hierarchy of needs, humans are social creatures that need a sense of belonging and acceptance among social groups. and social media as a whole have hit this human need in the bull’s eye.

The concept of taking pictures of food before consumption and sharing it on Instagram fits into two levels on Maslow’s Pyramid. There is the physiological need of consuming food for nutrition, allowing our body to function. When other people see delicious pictures of food (#foodporn), it triggers a salivating reaction. The love and belonging need is also met since sharing anything on Instagram is an execution of social influence. By sharing the highest quality and most drool dropping photos of food on Instagram, we are showcasing status (you can’t eat with us), taste (taste level ain’t at my waist level), culture (salt bae) or some combination of these.

Why is there so much indecision in choosing what to order ? As consumers in capitalist society, we suffer from paradox of choice. How do things go viral in today’s world ? How can we help more mom and pop stores exist in this ever competitive ecosystem ?

Most mom and pop stores don’t possess the technological savvy or deep pockets necessary to create a new viral product. They may post on Instagram but they may not know how to effectively garner hype.

There are two sides that we need to design for. One is for the end consumer, for people browsing Instagram. They should easily be able to browse a restaurant / food vendor’s menu before going there.

The other side is for the food creator. They should have the ability to control how they want to display their menu to the world on Instagram.

Everyone wants recognition for their work. For the food producers, the problem is on the esteem level. We need to give them the opportunity to showcase their work (the food).

For the food consumers, the problem is on the belonging level. We share what we eat on Instagram so that we document the delicious food we ate and show the world we ate it. But we need to find the newest, coolest, most delicious, most photogenic foods. The standard black coffee from Starbucks doesn’t cut it anymore — we need the Blonde Espressos.

Solving the problem:

I decided on the following mission statement:

Get more people to try different foods from restaurants and food vendors.

Give restaurants and food vendors control on how they present themselves on Instagram.

This will be achieved through three goals:

1. Craft a virtual menu on Instagram driven by photos

2. Highlight mom and pop stores as well as big chains

3. Help people discover new foods and drinks to try

I know what to achieve through the UI so we can start designing.

Sketches and wireframes

This will be a feature extension off of Instagram so I kept the original actions, content, and brand guidelines consistent. However, this new feature requires creating a completely new layout. Here is a quick sketch mapping out the user flow:

After drawing some screens, I realized that it’s much easier to prototype in Sketch since I’m building off an existing app that I am a user of. Time to start taking screenshots of the current Instagram user flow!

The features I want to build are:

  1. An Instagram menu for restaurants and food vendors where they list what products they are selling
  2. A flow where a restaurant gets professional grade photos and uploads them themselves
  3. A flow where a restaurant browsing Instagram incorporates high quality photos found into its own menu

We want to create this tool for businesses of all types, not just those that can afford to hire a professional photographer and get the best studio photos. Hence, it’s important that restaurant owners can use existing photos.

Going into detail for the three most important parts of the user flow:

Browsing the Instagram menu:

Low fidelity

High fidelity

The most significant change on the profile view is the added tabs reading Feed, Popular, and Menu. It is important to note that this is not on everyone’s profile. Most profiles will still have the normal layout. Only restaurants / food vendors that opt to use Instagram Food will have this added tab on their profiles.

I added muted color tabs because it maintains the visual branding and aesthetic of the Instagram profile. Making the tab menu any color other than neutral colors (black, white, grey, off-white) would be disrupting the hierarchy of Instagram, specifically the psychological hierarchy.

Instagram is a social network (graph with vertices and edges), so the most important visual display should be a tool to allow vertices (people) to have edges (follows). Hence the follow button is prominently displayed and colored blue because it is the DNA of Instagram as a social network. If I colored the feed, popular, and menu tabs, blue, yellow, orange, or any bright color for that matter, it would clash with the follow button. People’s eyes would be distracted because there would be two things to focus on. But in the hierarchy of importance, follows and follow backs, (creating the social graph) is more important than seeing the menu.

The tab has three buttons: feed, popular, and menu. We need ‘menu’ because people need to be able to discover what products the restaurant/food vendor serves.

The popular tab is driven by human psychology. Just like how we are inclined to buy something off Amazon with 4.5 stars/1000 reviews over 5 stars/4 reviews, and how we are more inclined to watch something on Youtube with 1 million views vs 20 views, adding a popular tab on Instagram has the same effect. Popular items add ethos — namely credibility and trust — to a particular restaurant/vendor and food item. If 1 million people tried this food item and they liked it and posted photos of it, then it must be pretty good!

People have inclinations toward hype. We were told that ‘What is popular isn’t always right and what is right isn’t always popular’ in elementary school but most people browsing on Instagram aren’t looking to discuss ‘Beyond Good and Evil’ by Nietzsche. Rather we are trying to maximize our pleasure by looking at visual stimulation or seeing what are our friends up to. Therefore, giving the option for people to see what other people most like is more than just useful, it is vital.

The menu tab was harder to design. In a traditional menu the foods are grouped by category, e.g. appetizers, entrees, teas, coffees. When we display images in the Instagram grid, we lose the option to have a perfect grid since not every category will have items perfectly divisible by 3. Instead we may have negative space with some categories having 1 or 2 trailing products. One option would be to stick with the visual interface of the Instagram profile and just display images at first on the menu, and on tap we could show the product name, product description, and price with an option to see additional images.

The other option would be to have one square on the side and product names and descriptions in the negative space to the right. I chose to place the images on the left side rather than the right because again we stay consistent with the Instagram brand. The profile picture is on the left and when we add pinned stories to the feed, it also starts on the left. Hence, menu items should also display from the left in keeping with the vision of the eye as it goes down the screen.

Microinteraction for scrolling down on the Menu tab.

However, after much thought I ruled out this option. Instagram’s DNA is a photo and visual sharing service. Visuals are key to its success. Therefore although menus are traditionally text based, we must take this convention and turn it upside down. Instagram will be the visual based menu. When we tap on the image, we will see the product name and description.

I added an ivory colored background to the product item detail view. This is necessary because we need people to know that this isn’t just a normal post. It is in fact a menu item! The product name is stated and an (optional) short description as well as an (optional) price. Lastly more photos of the product can be seen with more scrolling.

Ivory was chosen as the color because again we need something that is different than the standard background but also does not clash with the content. The Instagram redesign from the blue top bar to the white top bar is the catalyst toward letting user-created content be the visuals to the app. Making the text background ivory is in the same vein. The difference between a menu post and a normal post has to be very subtle hence a nice luxury shade of off-white, ‘ivory’.

Source link


Please enter your comment!
Please enter your name here