Dine.Club App

Community. Cuisine. Delivered.

January 2022 to May 2022

Dine.Club is a local food community with curated dishes that aim to provide customers with a food experience that is unmatched.

The Dine.Club App aims to extend this experience to the comfort of peoples’ homes by delivering the taste to the customers’ doorstep.

Tools used: Figma, Photoshop, Procreate, Google Jamboard, Pen and Paper

The Problem

The food-curious, health-conscious, explorative minds of the current generation do not have enough time to go and visit restaurants or pick and choose options that will be healthy enough for their physical and mental well-being. This may lead to an imbalanced lifestyle or overall dissatisfaction in daily life.

The Goal

Features included in the app will help in hassle-free delivery of healthy food as per the preferences of the customer.It will help in choosing a healthier diet and explore different cuisines in a seamless checkout-delivery process.

User Research

Summary

I conducted Personal Interviews and created Empathy Maps for a wide range of people and narrowed the main user groups down to two types of people. One, being people who are busy working and do not have time to cook at home, and the second, being youngsters and food-curious minds who want to explore new cuisines from the comfort of their homes.

Pain Points

TIME:

Working Professionals are often too busy to prepare their own food.

HEALTH:

People are looking to choose what they eat by opting for healthier options of food.

PAYMENT OPTIONS:

People want more digital options included as well as being able to pay in cash.

ETA:

Users want a clear ETA on when the food will reach their doorstep and want it to be adhered to.

Personas

Based on User interviews that we conducted, we were able to create some personas which would represent the majority user group who would use our app.

One of the personas we created looked like this.

We were then able to create a User Story for this persona.

The Persona and their Journey Map

"As a food-curious youngster living in a small town , I want to know an exact ETA of delivery and try out more variety of food and healthier options so that I can focus on my work properly and stay fit and healthy to upskill myself. "

Competitive Audit

To understand how a user would interact with our design, it was important to understand how users dealt with some of the alternative offerings that were already widely established in the market. Thus we conducted a Competitive Audit and compared what the current players were offering to the users.

To do this, we went through the apps of the following restaurant/food chains to understand the pluses and minuses of their offerings:

Oven Story Pizza

Behrouz Biryani

Old Spaghetti Factory

Starbucks Coffee

OvenStory Homepage

Old Spaghetti Factory Dish Page

Behrouz Biryani Hompage

Starbucks India Order Tab

Looking through these apps and watching a lot of people interact with them, we were able to understand and pinpoint what the essential features common to all apps were. We also got an idea of what the user liked and what they were still uncomfortable with.

User Flow

With our findings for the competitive audit, we outlined a User Flow, which would mark the steps for the user. This would be from the login phase to successful order placement and delivery.

Userflow for the Dine.Club App

This is a simplified version of how a user using our app would go about ordering a dish on the app.

Successful completion of the user flow would mean that the food is delivered securely to the users' preferred location.

Storyboards

Now with a clear objective of what the user can accomplish with the app, we try to formulate how the user will interact with the app on a daily basis. To do this we used Storyboards, which are mainly of 2 types.

Big Picture Storyboard

Close Up Storyboard

The storyboards assume the persona that we created from our user research, is following the steps and interacting with the final product. This helps us create an emotional bridge between the user as well as the app. In turn, this leads to a better understanding of how the user emotes when interacting with the product.

Information Architecture

Using the user research and the basic storyboards we get an idea of how the product would enhance the life of the user.

This helps us organize the information presented to the user on the screen and optimize the way it is presented to the user.

For our specific case, this takes the form of a sitemap.

Sitemap for the Dine.Club app

Low Fidelity Design

Wireframes

After finalizing the sitemap it was time to get into the visual aspect of information presentation. This is where we start to see the design of the Dine.Club App come through.

Throughout this project, my iPad proved invaluable time and time again. Being able to quickly iterate with sketches on Procreate, I could create and alter ideas with the stroke of a pen. This enabled me to get instant feedback from my peers on marketing and product concepts, allowing me to iterate on concepts rapidly.

Some of the more polished paper wireframes for the Dine.Club app are as shown here.

Initial Ideas for the Home Page

Crucial elements identified from various iterations (i-iv) marked in red and consolidated in the final design (v) .

Once a rough design is finalised, we transitioned to a digital wireframe.

The Digital Wireframe gave us a better idea of how the final product would look on a screen.

This digital wireframe included a lot of placeholder text and a basic layout of the elements present in the app

Some interactions were added to this design and this was the low fidelity-prototype.

Home Page Digital Wireframe

Profile Page Digital Wireframe

Affinity Mapping

Throughout my ideation process, we used sticky notes repeatedly to organize my thoughts. We used sticky notes in mapping potential user flows, customer journey maps, and my competitive analysis.

Product Solution

The Dine.Club App emerges as an optimized solution to get good hot tasty food delivered to your home with minimum hassle. The variety of features in the app take care of how fast the food reaches the user as well as keeps the user in the loop regarding its ingredients and constituents so as to aid a healthy lifestyle.

The visual feel of the app includes the brand colours which helps the app feel vibrant, light and breezy. The contrasting and bright colour scheme aids in easier reading and differentiation of important information.

We also see a video demonstration of the main user flow here along with the screens in the graphic above. This includes the onboarding as well as the full process of ordering the food and getting it delivered.

User Flow

Record_2022-06-03-00-37-16.mp4

Complete User Flow from onboarding to the delivery of the food

Features

These are some of the main features that are seen in the final product. They were added after careful consideration of the findings from our user research and usability tests.

Filters

Based on usability tests we were able to understand that many users had preferences while ordering their food. Many people wanted to order only a particular course of the food they ate while others preferred a particular cuisine. Based on this 2 separate filters were added for the same.

Another important aspect of food ordering is allergies. Many of our users had specific allergies, thus we added a filter to help them out by excluding the dishes with that specific allergen.

We also added a feature to help sort the dishes by calorie value, keeping in mind the health of the user

Exact ETA And Easy Address Change

To make the user flow from ordering to checkout easy, we added a feature to change your address easily to any saved address and also optimized the process of adding a new address.

An exact ETA display also accompanied each address for an approximate timeline of order delivery.

We found that this increased the overall user satisfaction by reducing the uncertainty of the order.

Reorder

During user interactions, we were able to identify a trend that many users tend to order the same dishes that they have ordered before. To facilitate easy ordering in such cases we added a Reorder Button on the Your Orders page so that a particular set of dishes could very easily be ordered again.

We found that this was one of the most used features which facilitated the user flow aand led to completion in fewer taps/clicks.

Calorie Count and Ingredients

While identifying our personas we found that the only thing common among them was their health consciousness. We also found that many people have different diets, which means they prefer particular ingredients in or out of their food.

Keeping this in mind we added a description of all our dishes, listing out the major ingredients and the style of cooking that goes into it. we also added an approximate calorie count to our serving of the dish which would be very beneficial to everyone who is looking to eat healthily.

This feature also finds an extended use in the "Filter" where users can filter dishes by common allergens (ingredients) or sort by calorie count.

Restaurant-Specific Instructions

Personalization is key to the user experience. Keeping this in mind we try to provide the users with an experience which is unmatched. To enhance this idea even further we included a text box in which users could type in any additional requests or order preferences they have, regarding their order or delivery.

These would be relayed directly to the associate handling the order who would do their best to comply with the instructions or suggestions.

Media Assets

Brand Colours

The above colours were primarily used in the app, to positively convey the brand identity as a cool brand you could rely on. The Dine.Club App aims to cater to customers by creating a culinary experience which makes the visual aspect very important part of the experience.

Assets

App Icon

App/Restaurant Logo

Print Media

Business Card Front

Business Card Back

Delivery Packaging and Box

Wrapping Paper and Tag

Napkin Print

Keeping up with the brand values and standards, we envision all packaging to be eco-friendly and the brand to be plastic-positive. Thus all the packaging materials would be made of recycled paper and cardboard and the napkins of reused tree pulp. The business cards would also with the same cadre and are sustainable as a product. The colours convey a cool brand with black bringing the exclusivity of the club element of our app which defines community.

Takeaways

Impact

The Dine.Club app provides a sense of community and its extension to the culinary sense directly to the user’s doorstep.

One quote from peer feedback:

“The Dine.Club App is a very hassle-free way to experience the magic of different cuisines in the comfort of your home. I would definitely see this as part of my daily routine.”

What I Learned

While designing the Dine.Club app, I learned that the first ideas for the app are only the beginning of the design process. Usability studies and peer feedback are necessary to ensure that the final product that ends up with the users makes their lives easier.

Next Steps

In the next iteration, I would aim to add a recommended or a specials section based on the user and their order history so that the users get a chance to widen their culinary bounds.

This would help users try out new dishes and decide if they want to try more of the same kind.

Expanding the user base of the app by identifying more user groups and conducting usability tests to make the apps more appealing for them.

This would help us increase the number of personas that we cater to and lead to a wider target audience.

A logical step would be to move into the wearables ecosystem, where an app that prioritizes order tracking and easy ordering could be introduced. This would closely be integrated with the mobile app and would make ordering your favourite dishes or visiting your nearest Dine.Club branch smoother using the user turn-by-turn navigation.

Page updated

Google Sites

Report abuse