Enhancing User Engagement with Favorites Feature on Flink Mobile App
Flink is an online supermarket that provides fast deliveries of everyday items right to your doorstep. The company was founded in 2021, during the height of the pandemic, to address the challenges faced by people in lockdown who needed a reliable and convenient way to shop for groceries. With the Flink mobile app and webshop, customers can easily place orders and enjoy a hassle-free shopping experience. The Flink app offers a range of innovative features to enhance the convenience of online shopping. Customers can save their favorite items and use them as a shopping list for quick and easy ordering.
Problem Statement
After analyzing the mobile app usage data, we found that the favorites feature had a low engagement rate among users. However, those who did use the feature had a higher ROI in terms of order volume and AOV compared to non-favorite feature users. Therefore, we wanted to drive higher engagement with the favorites feature to improve retention among active users. Additionally, we sought to identify ways to enhance the feature for future iterations.
Who is (not) using the feature, and why?
In this project, our primary focus was on the active users of Flink who perform various activities regularly but do not engage with the Favorites feature. We aimed to understand the reasons behind their reluctance to use this feature. Additionally, we also interviewed users who were already using the feature to learn more about their preferences and gather feedback on what they felt was missing or could be improved in their experience. Our goal was to identify potential usability issues and design opportunities that could enhance the user experience for both groups.
Who did what
I led design in the Retention squad within the Consumer Domain at Flink, I collaborated closely with various stakeholders, including Product and Engineering Managers, iOS and Android developers, Frontend and Backend developers, Data Analysts, and UX Researchers. I also worked with stakeholders from different departments such as CRM, Marketing, and Branding.
In my role as a product designer, I oversaw the entire end-to-end product design process, from ideation to implementation. This included conducting user research, designing user interfaces, creating wireframes and prototypes, and testing and iterating on the design to improve user experience.
What did we work on
During the period from mid-August to November 2022, I collaborated with the retention team to enhance a particular feature. As a product designer, I worked closely with EM, PM, and Data Analyst to ensure the project’s success.
Our process began with a discovery phase, during which we held workshops to communicate the project’s scope to the entire team. We then focused on ideation and collaborated to identify changes that could be implemented and tested within a short timeframe. Throughout the project, the scope of work evolved based on insights from the Data team, user interviews, and benchmarking.
The final screens were completed in September, and we conducted A/B testing in October to ensure the new design was successful. After iterating on the design, we launched all the updates in November 2022.
How did we do that
Analyzing the Current User Flow: Identifying Pain Points and Areas for Improvement
Together with the PM, we investigated the existing user flow for Flink. We meticulously mapped out the entire process and documented all of the pain points that users may encounter when saving items as their favorites or trying to access them later.
Our analysis revealed that locating the icon to save items was relatively easy, but there was no clear indication or direct access point on the homepage for users to view their favorite items. Additionally, the “heart icon” was placed quite far into the user journey, specifically on the Product Details Page, which not every customer reaches.
Analyzing Past Updates: Understanding the Reasons Behind Design Changes
The Flink app has undergone several redesigns, but there is little documentation explaining the reasoning behind the changes. To shed some light on this, I reached out to one of the designers who had worked on the app for an extended period to understand why the previous layout was dramatically altered.
Upon investigating, I discovered that the first app design allowed users to add items to their favorites list directly from the homepage. However, due to a lack of tracking events, the available insights indicate that less than 1000 existing customers interacted with the “bookmark” icon between June and October 2021.
Based on this information, the decision was made to remove the “bookmark” icon and replace it with a “heart” icon on the Product Details Page. There was no significant decision made based on research or customer feedback.
Insights on Favorites Usage from Looker Data
Our next priority was to examine the data available from Looker. Initially, we found that there wasn’t much tracking data to work with. However, we discovered that the number of users who viewed and used the Favorites list had been steadily increasing since the introduction of the feature in April 2021. The number of users grew from an initial 1,000 to 2,000 in November 2021, to 3,000 in February 2022, and 4,000 in April 2022. However, in August 2022, the number decreased to 1,500 (with 1,200 from Germany, 208 from the Netherlands, 75 from France, and 45 from Austria). In addition, we observed that a new feature called Last Bought which was introduced in April 2022, enabled Flink users to add previously purchased items to their carts from a swimlane on the homepage. We hypothesized that this feature was more valuable to users, which might explain the decrease in the use of the Favorites feature.
We discovered that the Favorites feature users typically ordered 22 items on average, three times more than other customers who didn’t use it. Additionally, their Average Order Value (AOV) was 31€, which was around 4€ higher.
Finally, we observed that users added items to their cart mainly from Categories (40%), followed by the Last Bought swimlane and the PDP (20%). The Favorites feature had the lowest entry point, with only 0.1% of active users adding items to their cart from it.
Insights from User Interviews, Research, and Customer Support Feedback
For the Favorites feature, we were unable to conduct extensive research due to limited capacity. However, we managed to gather some useful insights from the research on the Last Bought feature and from a workshop with the Customer Support Department at Flink. We recognized that understanding our customers’ feedback and their understanding of the Favorites feature would be crucial to its success of it.
Our interviews with users revealed that shopping lists were important to them and they wanted to create and use them. However, the current setup and naming of the feature were confusing. Many interviewees didn’t understand the difference between Favorites and Last Bought. They considered Last Bought to be their shopping list, which was automatically created for them. They used Favorites to save items they wanted to buy in the future or that they stumbled upon while browsing.
One common issue that users faced was forgetting where Favorites were located. Moreover, some customers were not aware of the Favorites feature until the interview but were excited to use it once they learned about it. Several customers who were also Rewe shoppers appreciated the ability to shortlist products they frequently purchased, such as those for weekly shopping. They suggested having customized shopping lists for groceries, non-food items, and household items, which they could buy with just one click. They also wanted filtering options for in-stock products and other search functionalities.
One particularly insightful point that emerged was that users did not know who created the lists. Some customers had products saved in Favorites by accident, leading them to believe that Favorites was a list of Flink’s preferred products.
Overall, we learned that improving the shopping list feature required clearer labeling, streamlined functionality, and the ability to customize lists and filter search results. With these changes, we could ensure that customers have a more positive and efficient shopping experience on Flink.
Building opportunity tree (focusing on NOW, NEXT, and LATER solutions)
The business outcome that we’re focusing on in Q3 was to increase the re-order rate of existing Flink customers by improving favorites feature utilization and engagement. We built an opportunity tree that helped us organize all the insights we gathered from our previous steps. The opportunity tree was divided into three phases: NOW (Increase visibility), NEXT (Increase Usage), and LATER (Increase Functionality) to achieve our goal.
In the NOW phase, we focused on increasing user awareness of the Favorites feature. To achieve this, we proposed an onboarding tutorial for new and existing users, displaying favorites on the home screen, and making the heart icon more prominent on the PDP screen for easier adding items to favorites. Additionally, we investigated implementing the Favorites feature on the web and allowing users to save items as favorites from their order history.
In the NEXT phase, we aimed to allow users to create custom shopping lists from the Flink catalog, add all products from their lists to their shopping cart with one click, buy all products from the list with one click, and receive suggestions from Flink on which products to add from Favorites.
Lastly, in the LATER phase, we focused on personalization and buying behaviors. This involved automatically creating lists based on users’ buying history, categorizing them, suggesting items to add from Favorites at checkout, and allowing users to share their lists with others.
The opportunity tree exercise helped us prioritize the most urgent and least time-consuming solutions, and we were able to identify ideas that were not feasible due to technical limitations.
Benchmarking — how do others do that?
During the discovery phase of our project, one of the most important exercises was benchmarking our direct and indirect competitors. We wanted to explore how they approach creating lists and saving favorite items, which is a popular feature on e-commerce platforms. To truly understand the landscape, I conducted a detailed competitor analysis.
Since this project focused on both mobile apps and webshops, I divided my research into two steps. I selected companies that built both mobile apps and online platforms from various industries, including food, fashion, and beauty, big online retailers, and music and sports activities booking platforms from around the world.
I recreated all the steps the user has to take to add items to their favorites lists, find them, and use them. Through this process, I identified the most common naming for users’ lists of liked items, the most common icon used on both platforms, how the liked items lists were laid out, and the amount of detail presented to the users.
Additionally, I identified how users were informed that the items they selected were successfully saved and where they could find them. I also analyzed the entry points where users could access their lists (navigation or user profile) and how far into the user journey these entry points were located.
This exercise and its summary helped me gather the most common solutions and best practices that were missing from the user flow. I was able to generate recommendations based on the findings that I presented to the team for discussion and incorporated them into our user story mapping.
Improving UX through Benchmarking: Recommendations
Through benchmarking, I gained valuable insights into our competitors and their decision-making processes. Based on this research, I identified two points that could be quickly tested and improved upon.
The first point was the naming of our “Favorites” feature. Through user interviews, we found that Flink customers were confused about who created Favorites, whether they were Flink’s favorite items or the customers’ own. To address this, I proposed adding “MY” or “You're” to the title to make it clear that the list was created by the customer, not Flink. We chose two options, “MY Favorites” and “MY List,” as customers are familiar with the concept of shopping lists. Given that we already had “MY Profile” in the Flink app, it made sense to stick with that naming convention. Our final recommendation was to test both options with users and determine which one they preferred.
The second point was the placement of the heart icon used to signify “Favorites.” Benchmarking showed that a heart icon was the most commonly used symbol for this feature. However, our current placement of the icon on the product detail page (PDP) was hidden and difficult to find. To address this, I made the following recommendations:
- Bring back the heart icon on the product tile to see if users are more likely to interact with it.
- Switch from side navigation to bottom navigation with a new entry point for favorites.
- Add different entry points for favorites, such as in the voucher wallet, home screen, and user profile, and test which one user interacts with best.
- For the webshop, create a fake door test to see if users are interested in the favorites feature since it was not yet live there.
These recommendations were presented to the team and discussed during a user story mapping session.
User story mapping
To determine the easiest and fastest solutions for increasing feature usage, we turned to user story mapping. Our focus was on four key user activities: entry points, adding an item as a favorite, managing the favorites list, and using it.
For Milestone 1, we focused on our hypothesis that increasing the visibility of the feature would lead to higher usage. However, since the old home screen was being redesigned, we had to refrain from changing or adding anything related to favorites from that screen.
We decided to begin by changing the name of the feature in the user profile from “Favorites” to “My Favorites.” The Onboarding Squad created a user profile in the Flink app, and we agreed to make Favorites more prominent.
After presenting our previous findings to stakeholders, it was decided that we should start with the product detail page (PDP) screen. We went with changing the existing “+” button (for adding items to the cart) to “Add to Cart” and moved the heart icon into the image area. To explain the heart icon’s purpose and what happens when the user clicks it, we added a tooltip. We also agreed to include a success message to inform users that their actions were successful.
Once we confirmed the final scope of work with stakeholders, I began designing user flows and low-fidelity screens.
From User Flows to Low-Fidelity Wireframes
Creating user flows was a quick and effective way to improve collaboration within the team. Not only did user flows help me in the design workflow, but they also gave decision-makers and stakeholders a better understanding of the user experience architecture behind the planned improvements. By creating user flows, we minimized misunderstandings and sped up the process.
My primary goal in creating user flows with the team was to understand our technical restrictions and identify which components we could reuse and which ones needed to be built from scratch. This allowed me to move on to designing low-fidelity screens that would visualize the proposed improvements.
High-fidelity wireframes & why I designed them that way
After finalizing the planned changes and dividing them into two milestones, my next step was to transition to Figma and create high-fidelity wireframes. Our team worked in two-week sprints, and we prioritized updates that could be completed within each sprint. With this approach, we ensured that our updates would be easy enough to finish within the given timeframe.
In the first milestone, I made a cosmetic and translation update by changing the name of Favorites to My Favorites. I also redesigned the PDP screen by moving the heart icon to the bottom right corner of the image area and adding an outline to improve its visibility. However, I encountered a problem with having two primary buttons on the page. At that time, Flink was using an outline plus icon as an add-to-cart button in the app. The primary function of that page was to add items to the cart. After investigating, I discovered a misalignment between the app and webshop in the browser, which I resolved by aligning the add-to-cart buttons.
In milestone two, I made several updates to improve the user experience. Firstly, I added an animation to the heart icon to provide feedback when a user clicks on it. Additionally, I proposed a change where users could easily remove items from their favorites list by clicking on the heart icon on the PDP screen again. Previously, users had to go to their favorites list to remove an item.
I also added a success message that appears after a user adds an item to their My Favorites list. This message allows the user to check their favorites directly from the snack bar by clicking the action button, without having to search in their user profile. Lastly, I included a tooltip that points to the heart icon, explaining its function. This ensures that users understand the icon’s purpose and how to use it to save items to their favorites list.
My Favorites was only accessible to registered users, leaving guest users without a clear solution or explanation. To address this, I proposed a solution where guest users could click on the heart icon and receive a message explaining that the feature is only available for registered and logged-in users. This allows all users to understand the purpose of the heart icon and why they cannot currently use it while also encouraging them to sign up for an account.
The changes that were proposed were implemented and tested in November 2022.
Fake door test in the webshop
Flink offers two ways for customers to order groceries: through their mobile app and webshop in a browser. However, while the mobile app has a favorite feature, it was not available in the webshop. To determine if customers would be interested in this feature on the webshop, my team decided to conduct a fake door test. We created two entry points on the home screen: one in the sidebar and another next to the cart in the top navbar. We exposed 33% of users to each option, while the remaining ones continued to use the existing home screen. Upon clicking on one of the options, the users in the experiment group received a message explaining that we were testing a new feature that would go live soon.
Our goal was to engage more than 1% of users, which we achieved. The experiment lasted from January 10th to January 14th, 2023. After analyzing the results, we found that the sidebar placement was the preferred option. This test helped us understand our customers’ needs and potentially improve the webshop’s design by adding the favorite feature.
A/B testing on mobile platforms and results
One of the most critical steps in implementing the favorite feature was to verify if the proposed changes solved the identified problems and supported our hypothesis. In October 2022, we conducted A/B testing on both Android and iOS mobile platforms, exposing 10% of users to the updated PDP screen.
From October 14th to 21st, 2022, we rolled out the updates on Android. Within just seven days, we observed a significant increase in the number of users adding items to favorites, which rose by 237%. Additionally, two other key metrics we were tracking, such as viewing favorites and adding items from favorites to the cart, also increased (by 4.8% and 0.8%, respectively).
Similarly, from October 24th to 27th, 2022, we experimented on iOS, and the results were similar. Adding items to favorites increased by 87%, and the two other metrics, viewing favorites and adding items from favorites to the cart, were consistent with the Android results.
The A/B testing conclusively confirmed that the proposed changes in the PDP screen significantly increased the visibility and usage of the favorite feature. Moreover, the experiment was a tremendous success and the most successful one in Flink’s history, with unprecedented improvement in the observed metrics.
Next steps
The next steps that were proposed after the earlier discovery and multiple workshops with the team, included more updates to the My Favorites list. I designed the new layout using the same grid Flink uses in the category overview. It would allow having more products visible than a list of products. The second improvement would sort the items showing the ones out of stock at the very bottom of the screen. The users were complaining in multiple interviews they were not happy seeing lots of products that were out of stock, they didn’t need to know that. Eventually, we agreed that customized shopping lists are necessary as well as adding all of the items from My Favorites to the cart.
