© 2025, All Right Reserved ✦ Last update Feb 2025
Bakkal is an American foodtech startup. We store and deliver authentic products along the West Coast of the United States. We have several warehouses and our own courier service.
Our primary audience consists of first- and second-generation immigrants who want to find their national ingredients and products in America.
Problems
1. Bounce Rate 42%
A high bounce rate indicates that nearly half of the users leave the app shortly after landing on the homepage, suggesting that the page isn’t engaging or relevant enough to retain them.
2. Conversation Rate 2%
With a low conversion rate, only a small fraction of users who visit the homepage proceed to make a purchase.
3. Slow Loading
The homepage takes too long to load, frustrating users and potentially causing them to abandon the app before it fully loads, negatively impacting user experience and retention.
4. Difficult Navigation
Users find it challenging to navigate through the homepage, leading to confusion and frustration as they struggle to find the information or features they need, which can deter them from using the app.
5. No Personalization
The lack of personalized content on the homepage fails to engage users on an individual level, making the experience feel generic and less relevant to their preferences and needs.
Task
Redesign the Home Page for Customer App to Improve User Engagement
and Conversion Rates
Research
The preparation process began with analyzing user behavior. It was interesting to understand how and why they use the homepage in our app and where they navigate from there.
Next, I compared the metrics between new and existing users. For existing users, I selected those with good 30-day retention. It was interesting to observe the trends and see how users adapt to the created conditions.
To understand the basic UX patterns of users in food delivery apps in the USA, I conducted benchmarking. I identified the main elements of the home screen (navigation, search, categorization, profile, cart, personalized offers) and their typical placement.
Hypotheses
If the main page interface is simplified by reducing the number of visual elements and improving the logical grouping of content, users will find it easier to perceive the information, which will reduce the bounce rate by 10% and increase the overall engagement time with the app.
If the process of adding items to the cart is simplified and purchases can be made directly from the main page (e.g., through "quick buy" buttons), users will complete purchases faster, which will increase the conversion rate by 6% and reduce the churn rate.
If personalized recommendations and offers are added to the main page (e.g., based on purchase history or user preferences), users will more frequently find relevant products, which will increase the conversion rate by 8%.
Design
I started the design rethinking process by identifying the main blocks and elements that would be there.
For now, they are all divided into main and additional elements. First and foremost, I based this on our current needs while keeping in mind the possibility of incorporating new features.
After that, I began to work out the detailed design for the main blocks from the homepage.
This includes the main categories block. Also the cards for products, stores, and recipes. As well as banners, cuisines, and the tab bar itself.
In the Categories block, I aimed to reduce the visual load and, while maintaining consistency, display the actual products that belong to each category.
For the cards of products, recipes, and stores, I also wanted to simplify them first and foremost. In the description, I kept only the necessary information and characteristics. For the content - product images, dish images, and store photos - I wrote guidelines and specifications. All of this would allow creating a unified visual language and establish order among the large abundance of various types of offerings.
Despite offering a very wide variety of authentic cuisines from around the world, the ability to browse and select them was hidden behind an icon next to the search. In essence, this is one of our key features. Therefore, I decided to bring them directly onto the screen. But before that, I designed icons for each cuisine.
Banners are needed for promoting specific products to draw attention to seasonal/holiday promotions and offers. Recently, they haven't been changing often, but I still designed them in the style of category cards and prepared guidelines. Also, in the new version, they became proportional to the banners from the web application, which accelerated the preparation of new creatives.
The first thing I wanted to change in the tab bar was to remove the red color. In our app, it's an accent color, and it feels odd to use it in navigation. Next, I used filled icons for better readability and increased the font size.
After assembling all the blocks together, I ended up with a clean yet informative main page for the app. All the familiar user patterns were preserved. Products are grouped into special personalized collections, with separate sections for recipes
and discounts.
Based on the results of the A/B test, where we compared the new version of the homepage with the previous one, we managed to significantly reduce the Bounce Rate and increase conversion, thanks to personalizations and navigation through cuisines/categories. The test results are presented after two weeks of measurements.
I decided to take the changes to the homepage even further. I was concerned about the original purpose of this page in the app and how we could build everything around it. I started with something simple—I took a critical look at the tab bar, or more specifically, I analyzed all its navigation points in detail.
Home — Essentially, this is where we are now. For the user, this element is important for returning to the initial state.
Categories — Many users navigated here to understand the assortment and choose the right direction. What if we moved them to the homepage? Wouldn’t that simplify the user journey?
Cart — A necessary element for any delivery app. But until we add something to it, it feels unnecessary. I would suggest showing it only after the user has added something.
Favorites — This information is directly related to the user. It’s their choice. Therefore, we could move this section to the profile.
Profile — Let’s keep it on the homepage. After all, this is where the user sets up their data, addresses, and additional features.
Next, I refined a few more things:
Quick access to categories via a button at the bottom of the screen (left screen).
A fixed global search bar at the top of the screen (middle screen).
A dynamic cart button that appears with relevant information about free delivery or progress toward eligible delivery.
4. A form suggesting new products when overscrolling the home page.
5. A dynamic block displaying the current order (or orders).
Results
It was very interesting to see how users would react to the changes and the optimization of navigation in the new version. To ensure everything was clear, I conducted 3 usability tests.
1. The first task was designed to show how easy it became to find the Favorites section in the app. For 97% of respondents, this was not a problem.
2. The second task involved searching for a specific product. I wanted to test how easy and convenient it was to use category navigation and special collections. Here, the success rates were also high.
3. The third test was about finding a specific category with discounts. I wanted to check how clear the concept of product collections was and where users could find discounted products.
After implementing new changes to the main page and navigation elements, we achieved improvements based on A/B testing results. New users started spending more time in the app, registering, and making purchases. By introducing personalized selections and providing simple access to search/cart and categories, we managed to increase conversion rates.
In parallel with UI changes, we decided to update our development approach. The entire new interface was created using SwiftUI, and at the same time, images were optimized.
And, of course, a new base of components, styles, and basic tokens was created and partially documented. I added new indents, typography, and icons to the project before the redesign began, which simplified development.
