User Interface Design

FoodFeed

I designed a conceptual and interactive cross-platform Android application called FoodFeed. The application serves as a restaurant aggregator while offering the benefits of a social networking platform. This was my first attempt at creating a mobile-application but through various online and offline courses, conducting surveys and multiple test-runs, I was able to accomplish this feat.

Less complex, more reliable

  • FoodFeed provides users with a common platform to explore new places, upcoming events, order food online and connect with like-minded people.
  • It  allows customers to get trustworthy and verified reviews from their friends and order their favorite meals without a flicker of doubt!

Problems with the existing applications

  • Trust factor: It is difficult to buy products on the basis of reviews from random customers, as it can easily be bribed. On the contrary, with reviews from friends and family, the consumers are less likely to be deceived.
  • Confusing interface: Most applications have jumbled up icons or a complex functionality leading to a slower and confusing user experience.
  • Juggling between applications: There is no single application which connects food-lovers while ordering lip-smacking meals.

My Goal

“Some people think design is how it looks. But, of course, if you dig deeper, it’s really how it works.”- Steve Jobs.
I strongly believe in the words of Steve Jobs, that the work of a designer is to create an experience which is much more than a visual presentation. Following the same philosophy, I aim to create an application which makes user experience seamless for not just Millennials but also Gen Y and Z.

My Responsibilities

As a sole proprietor of this application, I undertook all the steps for developing a mobile app, which include generating brand identity, user-research, wireframing, user Interface designing, and prototyping.

Process

Hover over the cards

To understand the market requirements, I prepared a questionnaire and surveyed a set of 50 people from different age groups

Survey

To identify milestones of a customer’s journey on FoodFeed.

Storyboard

To understand movement of a user within the application

Information
Architecture

I created high fidelity screens to establish a realistic brand image and to enhance users’ experience

Design

Lets dig into the project!

User research

The First step of creating an application is to understand the user requirement and figure out if the application how it will simplify their life. I accumulated a list of questions(link for the questionnaire) and surveyed 50 people of different age group.

I have listed 2 user personas -

Isha Sahni

26-year-old, female

Occupation: Assistant Manager in an MNC
Interest: She likes going to elite restaurants and explore their innovative menus.
In her free time, she likes reading, baking, exploring highly reviewed places.
Frequency of ordering food online: Almost every day
Time spent on social networking application: 4-5 hours a day
Problems faced: She gets a hard time trusting reviews about a restaurant from strangers.

Rajesh Singh

42-year-old, male

Occupation: Working as a Human Resource Manager
Interest: Loves to explore new food junctions, visits food-centric events. He spends his free time chatting with friends and trying new delicacies.
Frequency of ordering food online: 4-5 times a week
Time spent on social networking application: 4-5 hours a day
Problems faced: Use of multiple applications drains battery life extensively and also occupies more mobile space.

Storyboarding

Storyboarding reveals issues and key factors in the initial stage of the product development process, which reduces cost and gives a fair idea about the layout of the product.

Search for upcoming food festivals and events- People can book tickets for a plethora of events, and also keep track of friends who are attending the same event.

Search for a good restaurant- A customer can order food online, reserve a table, post check-ins, search for amazing restaurants.

Social media journey- A user can share their experience through images, videos or text, connect with food enthusiasts and friends, get access to suggested restaurants directly through the feed menu.

Information Architecture

To pinpoint how the user will move within the application and which screen to focus on first.

Based on the user flow, I selected three screens as the main screens.

Home

Primary focus of this application is to act as a restaurant aggregator. Home page will take a user on a seamless food ordering expedition.

Feed

This window will connect  food enthusiasts and give real time updates about their friends through an endless scrolling experience.

Personal Profile

A user can edit their profile according to their preferences.

Branding the product!

One of the most crucial steps of creating an application is its branding. Furthermore, selecting a name which not only captivates a customer but also sticks with them forever is an uphill task. My idea was simple, I wanted the name to be short, easy to spell and also convey my ideology behind this application.  After throwing a lot of names on the canvas and searching through the web for available domains,
I landed up on combining ‘Food’ and ‘feed’ which formed ‘FoodFeed’.

Food + Feed = FoodFeed

Colour selection

Colour selection for the application is one of the most crucial tasks. To overcome this hesitation, I learned about colour theory and trends, researched colour-schemes of different competitors, and considered opinions given by the audience.

Finally, I chose yellow as the primary colour as it gives a warmer effect, arouses cheerfulness, stimulates mental activity, and generates muscle energy. The colour is often associated with food. Yellow is very effective for attracting attention, so I have used it to highlight buttons and icons in the application.

The secondary colour in my application is Pink. The colour is often used to communicate playfulness and attract customers to explore the product.

#FFEA00
#FFEA00
#FFEA00
#FFEA00

Logo Designing

I wanted the logo to be minimalist, conveys brand colours, and justifies all the aspects of my application. I like using morphological matrix to generate Ideas. I mixed and matched different symbols and doodled until I created something which made sense. I liked the idea of combining a food bowl, a chat icon and a camera shutter.

Iconography

Customer Journey

A customer goes on a expedition to find mouth watering food and interact with like minded people on the same platform

1.

After downloading the application, the user can log in with just two clicks.

4.

After choosing the restaurant, the user can simply select dishes from the menu and order online within a fraction of seconds. Every buyer gets reward points for each purchase, which they can use afterwards.

7.

The application also showcases the details of food centric events and even facilitates booking tickets with just one click.

10.

A user can connect with people, message them and even scroll through their feed. 

2.

The user can then navigate through various restaurants and reviews from the main screen of the application.

5.

The customer can then simply share their experience on the platform, eliminating the need to multiple applications.

8.

 In addition, it gives the consumers an opportunity to connect and communicate with like-minded people

11.

Editing the user profile also hardly occupies any time. With just one click, the user can alter their profiles to make it more interactive.

3.

The application provides the consumer with the restaurant’s intricacies and gives them trustworthy reviews from their friends.

6.

The ‘Feed’ section enables the user to discover, curate and also share their liking and disliking with their peers.

9.

It also allows the user to ‘order what the next table is eating’ by offering direct links to the dishes and restaurants reviewed or suggested by their friends.

12.

The navigation menu, on the left-side, provides users with the ability to discover deals, reward points, buying history, etc.