Attempt to increase conversion of the Eatsure app by adding a curation widget feature
Hello All 👋
I’m here with another project I worked on as a part of the Product design challenge. For this challenge, we were divided into 7–10 groups of people and given the same product but were supposed to work on different problem statements.
That means each person has to work on different problem statements which mainly included building a feature within 48 hours in an attempt to increase the conversion of the product.
I would like to thank my mentor “UX Anudeep” for providing constant support whenever required and suggestions when in doubt. Would also like to thank Growth School for providing such a platform.
Index
Designing UI screen and making decisions
Getting feedback and moving ahead from setback
Now you know what I did, let’s see how I did
🤔 Thinking about what to do
For our team, we were assigned Eatsure as a product and were asked to select the feature to design from the set of given features. We were advised to discuss among ourselves what feature each person would like to work on. I decided to work on the “influencer curation widget”.
Problem statement: Creating an influencer curation widget feature in the Eatsure app which allow food blogger to share their curation(combination) experience and helps users to have different varieties of food.
You might be wondering what a curation widget means.?
Curation means selecting, organizing, and combining items all together to form one curation 🤔 Still didn’t get it.? Let me help you with an example of food items and dishes😋. Curation can be referred to where you or someone for you combines the food items all together to form a whole meal 😄 or bringing a combination of dishes based on tastes, cuisine style,s and much more.
Reasons to select: Due to the cloud kitchen model, it becomes easier for users to try different food items at one time. Users can try different cuisines based on their moods and tastes. Let’s state a few examples of a user story
Story 1: Say it’s your friend’s birthday and you want to throw a small party for him at your friend’s house. Now planning for a party is not that easy you know!! From deciding on what to eat and getting suggestions from others it does takes a lot of effort. So why not have already a curated combination for yourself from the foodies who like to try different food styles and cuisines? Wouldn’t it would easy to just order the curation which you already have and get the party going!!
Story 2: Say you want to eat something spicy and sweet as well, sounds crazy right.? How it would be if you have someone with a similar taste and have already tried such a taste combination and provided it for you? No hustle right!! It will feel so easy peasy to just order and get done with the cravings!!
And many more based on occasion and for no occasion, cause why not!! These will help businesses to have more food items getting sold in one order. Can increase the overall order value.
This will allow users to visit the product to check on the new combinations and try them out by following their favorite blogger profile. This can be a win-win situation for food bloggers, businesses, and for users. Eatsure gives sure points (loyalty points) on placing orders, this will increase both food curator and users
Target Audience: Working professionals as these curations can help them decide quickly on what to order.
Business metrics: Attempt to increase Conversion and session length metric
📱 Designing UI screen and making decisions
Curation of any service is more widely used across several platforms, nowadays using users' search history and based on the user's behavior the curation is created which makes it feel like someone personally suggesting user about the service what the user likes, and whatnot.
Having the curator onboarded platform makes it easier for users to find new varieties and try out different things. I tried to implement the same feature on the Eatsure app, where I created a curation feature where food bloggers can suggest combinations based on their tastes and experience.
What can be included in the feature.?
How user can see the curated suggestion?
How the user will trust the curation suggested?
Why user would trust and buy the curation suggested?
If buying, how the flow will be?
If the user wanted to edit the suggested curation, how it can be done?
Will users want to know more about the curators?
How this will help business?
Prototype video of UI screen before usability testing
Curated suggestion page
Interaction and details on the curated items page
- Users will be able to see a list of curation suggested by different curators
- User can see their profile information, how many curations each curator have offered, and how many people have bought the curation
- Users can swipe the cards to see all the food items available in the curation before going to the details page
- Users can search for the curations based on the users taste
Cart page
Interaction and details on the curated items cart page
- After tapping on curation, the user will be able to see all the food items available
- Users have the option to edit the curation, user can remove items or can change the items
- Users also have the freedom to buy an individual food item
- Users can have the option to increase the quantity of the food items available and proceed to check out
Profile Page
Interaction and details on the curated profile page
- On the curator, profile page user can see the description of what the curator likes and what not
- Users can see overall followers and posts by that curator
- Users can also view all the curation suggested by that curator
📑 Getting feedback and moving ahead from setbacks
After designing the feature, I made the functional prototype and tested it with the users. I made a few pointers before on what I want to observe and what task can be given to users.
Pointers I wanted to observe
- Is the user able to understand the flow of how to buy curations?
- Is the user able to understand what curation is?
- Is the user able to understand the options provided on the screens?
- What are all the options and why user choose those options to click on
- Is the user able to understand that the curation provided can be customized?
- Is the user able to understand by whom the curation is suggested
Tasks given to the user
- For this feature first I explained the basic idea of the curation widget what it is and how it can help users.
- I asked the user to explore the prototype as the user wanted by considering one primary task on buying curation and understanding what curation is
Below are the feedback I got from doing user testing on their behavior and while having a conversation with the users. I asked users questions based on their decisions taken while exploring the feature.
Based on the user's feedback and I noted down all the suggestions and started to create the user flow again mentioning what users will think and what actions users will take while interacting with the screens. Here I narrowed down the flow, so as to have a more clear idea of how to proceed
After getting feedback from users I started to note down what the user would like to see on each element of the screen and how users will interact with those elements. I was noting all those pointers by thinking out loud and simultaneously drawing elements on paper to have my ideas dumped. Below were the questions which I asked myself and based on those iterated my screens
Below is the revised user flow after user testing
Changes made to Screens after user testing
Here I have marked the sections on the screen where I have made changes after user testing and have mentioned the changes below.
The screen which has highlighted part is screens designed after user testing
Curation suggestion page
👉 Curated suggestion page before and after usability testing
Changes made to the curated suggestion screen
1️⃣ Added banner on top of the screen for helping users to understand what curation is
2️⃣ Added details like how many persons the curation will serve
3️⃣ Added “Add to cart” option directly
4️⃣ Added option to view more details of the curation
5️⃣ Highlighted curation suggestion name
Curation details page
👉 Curated details page before and after usability testing
Changes made to the curated suggestion screen
1️⃣ Added information on how the curation tastes like, and curators details who has suggested the curation
2️⃣ Added the name of restaurants from where each food item will be available, helping users to make decisions based on their fav restaurant
3️⃣ Added option “Add to cart”. Which will help users directly add curation to the cart and proceed with the payment
Cart page
👉 Cart page before and after usability testing
Changes made cart page
1️⃣ Added option to edit curation for users to edit the curation on the cart page
2️⃣ Option for users to have multiple orders of the same curation
3️⃣ Added coupons option on the cart page
A few other changes were made to the cart page
Removed individual buying option for food items in the curation
Added more suggested curation based on the user's selected curation
Added option to have cooking instruction
Edit curation (Bottom sheet)
Added bottom sheet for edit curation option, to prevent users from to go on next screen and help users with quick action. This worked well with the competitors like Zomato, and Swiggy.
Added option for users to remove and add items based on their choice
Added option for the delivery address showing current selected address and option to edit if required to change the current address
Profile Page
👉 Profile page before and after usability testing
Changes made on the profile page
1️⃣ Added “Add to cart” option, which will help users to directly buy the suggested curation from the curator page
2️⃣ Provided information on how many users the curation serves
3️⃣ Gave the option to the user to view details of the curation
Below is a prototype video of redesign screens after user testing
🎬 Now you know what I did, let's see how I did
Search for inspiration and competitors
Before jumping into the solutions, I wanted to understand the business model of the eatsure app. How the cloud kitchen works. What are the benefits of the cloud kitchen to the user and business?
Before proceeding to the solution I asked few questions to myself and begin with the research
I started to map down the user flow, on how users will interact.
How many use cases are possible?
What are all the use cases I can consider now considering the given time limit?
Why users would buy from the suggested curation?
What and how the user will take the decision?
Do having an influencer profile will help to increase conversion?
If yes how it can be implement and how much impact it has
I looked for inspiration from the other apps which might have options based on curations provided by curators. Most of the food delivery apps didn’t provide the influencer curation option. So it was totally new to understand how users will understand the feature and how can I make the feature in a way where users don’t have to think much. I started to look for the apps which were selling combos, and how combos were sold. I was noting down all the pointers which will help me from those apps. For the influencer profile, I took inspiration from the Zomato app. Where food bloggers can write reviews on the food they have tasted either via Zomato’s listed restaurant or from the dine-in option.
Converting ideas from ambiguity to clarity
I started to note all the ideas on paper depending on my observation from the competitor apps. while ideating on paper, I kept in mind the pointers that I observed from the competitors
Food Card
How to show a curator/bloggers profile
What info to show about the curator
How foods items can be shown on the card
On showing how the ratings can be placed
How users can use multiple food items
Edit food card
On how to show food items of the curation added
How user can change the food items that user don’t want to buy
How to show the price tag and restaurant name
How user can remove one item and add another item that can be similar
How to show options to buy individual items
Benefits of becoming a contributor
How coupons can help the contributor
How current loyalty points can be used
Profile Page
What information can be provided on the profile image
How user info can be added
How and why user can need to see the curation from the curator
I made a high-fidelity prototype in order to better understand how the flow would operate and how users will engage. I wanted to test the functionality and try out different UI element placements. As I was developing a new feature wanted to understand how the feature can be easily understood by users.
I used already-existing screens for further reference and mainly focused on those screens that would primarily fall under the scope of my features here. Few of the the screens which come under my feature scope are show below
🧩Real battle started designing UI Screens
For screens to design firstly, I started to look at the current design pattern followed by the Eatsure app. I created a color style based on their design like marking primary colors, secondary colors, background colors, text colors, and all.
After that I made the text style depending on how they are used throughout the app. The reason for doing this was to have as much as possible design consistency. As it will help with consistency and can make it easy to understand the new feature and users might not feel that they are totally on the new app or feature.
I started to create the required components which can be used several times. Look for the CTA buttons and what are standards currently the app is following. How product cards can be created. By referring to all the decisions taken from the wireframe I started to build the design of the screen
📝Key takeaways
Considering all use cases is necessary while designing a feature
Understanding the why’s helps to narrow down the problem and helps in ideation
While designing screens, the information provided is as important as the interaction on the screens
Designing the screen can become easier if we start considering small-small UI elements than designing the whole screen at once
It is important to internalize the feedback and suggestions
Thank you for reading till the end!!! 🤟🤟
Clap and comment if you find it interesting and helpful 😄
👉 Here are the other projects I worked on
Redesigning Cultpass flow from the Cult.fit app for better conversions
