Client
Dineout
(Now Swiggy Dineout)
Contribution
UX Design, User Research, Interaction, UI Design, Prototyping & Testing.
Other Contributors
Snehil Singh, PM. Now working at Auto1.com, Germany
Tools
Figma, FigJam, Hotjar, Google Analytics
Timeline
Sept 2019 - Dec 2019
Dineout is a restaurant table reservation app with multiple benefits on one platform for all dining out needs. It's a product of Times of India Group. It has been around for the last 10 years. As India’s largest dining out platform, Dineout helps more than 40 million diners annually to discover restaurants as per their preference. As a customer you will get great discounts, complimentary dishes with Dineout Passport, offers on food, drinks and buffets; pay restaurant bills and receive cashback, and view restaurant menus, reviews, photos across 50,000+ restaurants all over India.
It is an exclusive membership program that offers Dineout Passport members attractive discounts, complimentary dishes or drinks every time they dine out. Dineout Passport members can simply walk into a Dineout Passport partner restaurant and can redeem offers at the time of billing.
By the end of 2019, Dineout wanted to provide a premium experience to the customers who wanted to dine-out.
For the restaurants, we wanted to increase engagement, loyalty and customer retention.
For Dineout, we as a team felt that due to too many offerings on Dineout's RDP users gets confused & it causes paralysis analysis. A quick Hallway test also suggested the same.
So, we decided on designing a membership program which will not only provide a premium experience but will also solve the problem of excessive offerings on one single restaurant in our app which confused the users.
For subscription services, it's implied at the time of purchase that your customers’ repeat business. Provided you keep your subscribers happy, this type of model ensures a consistent source of recurring revenue from repeat customers.
Introduce Dineout Passport as a premium membership plan. Users should easily discover Dineout Passport restaurants and avail attractive discounts & complimentary offers. Make the Dineout Passport users feel part of an elite, premium group with classy & simple end-to-end experience.
Dineout Passport is a premium dining membership program on Dineout that offers unmatched value with offers such as:
1
Minimum 25% off & access to 1+1 on Food, Drinks & Buffets at top restaurants.
2
Premium dining out experience with maximum savings.
3
Free access to premium events, food festivals & live concerts at partner restaurants.
We have followed these key steps for aligning my UX design with the Dineout's business goals and, ultimately, building Dineout Passport:
• Be clear about the user needs, business goals and objectives.
• Use personas to keep the whole team on the same page.
• Try to align user needs with our business goals.
• Organize design review meetings to attain a shared understanding.
My goal was to create that sweet spot where it is a win-win situation for all 3 — Users, Restaurants, and Dineout.
While researching we found that there is a boom in the subscription-based businesses. This is because there are many advantages to billing customers on a recurring basis.
With a recurring billing model, your business could see substantial and sustained growth as well as higher revenues and customer lifetime values (CLVs). This helps you to scale your business easier and faster.
This was the membership plan Dineout was coming up with after scrapping many other confusing offerings on the restaurant display page. It was important for us to look at some of the most popular and successful membership plans across India & the World like Netflix, Amazon Prime, Entertainer (in Dubai), Zomato Gold, Swiggy Super etc.
We looked at their product flow, understood the primary objectives, and noticed the strategies they used to hook users onto their product.
After conducting the online research, we wanted to have some detail insights into our target audience.
Target Audience
Understanding our target customers' demographics & psychographics helped us determine exactly what we should offer through our membership program. It also helped us understand their pain points and motivations.
To create the persona,
• First, we collected as much knowledge about the users as possible keeping all the factors in mind. Conducted contextual inquiry for the target audience.
• Compiled all the data from our research.
• We analyzed our data & built our persona.
Gopi was our primary persona:
• How they use a subscription-based app...
• What motivates them to use our competitor apps...
• What are their needs...
• What kind of experience they expect from our product etc...
We gave the users a hypothetical situation: where he/she is buying a Dineout Passport membership from our Dineout App; told them to explain in detail about the steps he/she will take and things he/she will look for before buying the membership. They can be anything: offerings, plans, features etc.
This exercise helped us to understand the kind of questions a customer might have while buying Dineout Passport membership, their needs & motivations.
• they want to know about Dineout Passport's offerings.
• They wanted to know about the list of Dineout Passport partner restaurants. Who all are included in the list? Are they premium & top class? etc.
• Check & compare membership prices.
• Do Dineout Passport have any city-specific cheaper alternatives?
• They wanted to understand how the membership will work.
• They wanted to know if there is any trial pack, which they can try?
Keeping the value proposition in mind, we listed down some key principles which defined Dineout Passport as a product and helped us make better design decisions. Some of the principles are as follows:
Create a premium membership experience.
Make a genuine, truthful connection with the consumer. Dineout Passport users should feel exclusive and classy. Also, build a feeling of trust in the user’s mind.
Communication about the product should be simple, clear & straight-forward.
Make it easy for users to discover Dineout Passport restaurants.
Make the process of redeeming the Dineout Passport offer easy for users.
The brainstorming & interview sessions helped us understand the user's needs & goals. We also analysed the business requirements.
We discussed our findings with all the stakeholders and created the journey of our target user group. This exercise helped us empathize with our target audience & attain shared understanding as a team.
Showing here one of the journeys of Gopi with respect to a specific scenario:
After conducting brainstorming exercises with my team members we figured out the core scenarios of how this membership will be used.
Visualizing how users will interact with our product while exploring and buying Dineout Passport made it easy to understand and remember which features are necessary for our users to complete the specific scenarios. By the end of this exercise, we had a storyboard ready with 2 major flows:
Scenerio 1 : Discovering & buying Dineout Passport.
Scenerio 2 : Exploring & finding a Dineout Passport restaurant and redeem offer there.
With the help of storyboards, we had a detailed understanding of the UX flow covering all scenarios.
First…
We started to visualize the basic idea, to get clarity about how Passport membership can be bought and redeemed at the restaurants through basic wireframing on a whiteboard.
One of the iterations of the basic flow for a non-Dineout Passport member purchasing a membership.
One of the iterations of the basic flow for a Dineout Passport member (Redeem Visit)
In the next step...
We created various iterations of the flows mapping out each and every step the user is taking while buying, exploring & using Dineout Passport.
Entry points to buy Dineout Passport membership
Dineout Passport Membership, Exploring Plans & Buying
How to redeem a Dineout Passport offer at the restaurant.
Explore & redeem Dineout Passport from membership page.
What's next…
With the help of the wireframes, we then created low-fidelity prototypes in Figma. We bought together all the stakeholders in our project and ensured that their expectations are met with the prototype. The goal was to attain a shared understanding.
We tested our prototype among a few users.
We noted down their feedback from each testing session. We made detailed notes of what was working well and what was not going so well. Then we created a list of refinements to be included in the next iteration.
After finalizing our prototype, it was time for us to give it some visual identity. These were some of the emotions we wanted a Dineout Passport user to experience, it also defines our brand tonality:
Jovial…
Happy, Celebratory, Warm. We love spreading joy, we love celebrations. We love to engage and entertain.
Approachable…
Genuine, Conversational, Honest. We are an unpretentious host & always up for a friendly chat.
Purposeful…
Passionate, Intentional, Action-Oriented. We are passionate about what we bring and are ready to go the extra mile.
The visual style is how the design should look, the fonts we’ll use, the colors and photography. Being a premium offering from Dineout we wanted to keep the visual experience as simple as possible to maintain the premium look & feel.
The motive was to keep the basic elements of the user interface as unadulterated as possible, so that the user interacts with it spontaneously and effectively.
We created this moodboard keeping in mind the characteristics of minimalist designs:
Taking inspiration from the mood board, we came up with the branding, colour palette, iconography and developed the entire user interface.
Giving it a visual identity: logo & colour palette
We have created many versions of the Dineout Passport logo. First hand-drawn and then vectorize them in illustrator. For this final logo, we have used the same font family as Dineout logo ie. Proxima Nova. we gave plenty of attention to kerning for better clarity. Also modified the terminal of certain letters like 't' & beak of 's' to make it more modern and aesthetically appealing.
We already have Wine (dark reddish-purple) as our secondary colour, so decided to combine it with our primary Dineout Coral brand colour so that the customers can relate it to our brand.
Icons and illustrations
While creating the icons and illustrations we have kept in mind the existing icon & illustration styles of Dineout & added Dineout Passport flavours to them.
Image choice
The tonality and mood of food, drinks or ambience shots we will be using in our UI designs should complement the brand tonality.
Flow 1
Buying Dineout Passport
Flow 2
Redeem your membership benefits at Dineout Passport partner restaurant
According to Dineout Passport partner restaurants, there has been a considerable increase in new customer acquisition. Additionally, we found a considerable increase in traffic at Dineout Passport restaurants.
Dineout Passport will ensure members have an unforgettable experience each time they dine out. With big savings that’ll come with the unmatched offers of Dineout Passport, dining out will now be more accessible than ever before. The world is undergoing a massive change currently, and keeping pace with it, we’ve created a super product that is sure to be applauded both by our members and our partner restaurants.
In the last two months, Dineout Passport has sold more than 6,000+ memberships (and the numbers are growing).
Note: Last updated 30 Nov, 2020
Swiggy acquired Dineout on May 2022. Since then it is merged with Swiggy One.
