Dropezy
Designing a grocery quick-commerce app which easy to use, modern, and striking in the market.
Designing a grocery quick-commerce app which easy to use, modern, and striking in the market.
Dropezy is your one-stop shop for groceries and household essentials, including vegetables, fruits, meats, snacks, cleaning supplies, and more. Operating on a quick-commerce model, Dropezy guarantees deliveries within 15 minutes, 24 hours a day.
We collaborated with the team to completely redesign their mobile app, focusing on creating a simple, easy-to-use interface and user experience.
Industries
e-Commerce, Quick-Commerce, Groceries.
What we did
- Stakeholder interview
- Desk Research
- UX Design Audit
- Competitive Study
- Information Architecture
- Userflow
- UI Design
- Design System
Available on
When Dropezy approached us with their redesign needs, we were eager to understand the rationale behind it. To achieve this, we conducted a comprehensive design audit to identify any existing issues with the product.
Our team performed an in-depth evaluation by analyzing every aspect of the Dropezy application's flow. We meticulously documented each design pain point and provided recommendations on how to enhance the overall UX design.
Some of issues we found are:
The choice-overload effect.
Users often found the home screen confusing due to an abundance of calls-to-action, leading to prolonged decision-making about their navigation choices.
Lack of visual differentiation.
The illustrations used to represent main categories appeared too similar, causing users to exert extra cognitive effort to differentiate between them quickly.
Lengthy checkout journey.
A high drop-off rate occurred due to the numerous steps required to reach the checkout screen, increasing the overall effort needed for users to place orders seamlessly.
To gain insights into UX design strategies, we conducted a competitive study, analyzing both local and international competitors such as Segari, HappyFresh, Gorillas, Flink, and others. By comparing features, drawing conclusions, and extracting key design principles, we identified valuable recommendations applicable to Dropezy's design approach.
Some of findings from competitive study are:
Prominent Price Information.
Many applications prominently display price information, suggesting that users often prioritize pricing as their primary consideration.
3x Click to Checkout.
The majority of apps feature a streamlined and efficient checkout process, requiring just three clicks for users to complete their purchase.
Add to Cart Button Interaction.
In most applications, each product listing includes an add-to-cart button styled with an outline. Upon clicking, this button transforms into plus or minus buttons, allowing users to easily adjust the quantity of products in their cart.
Dropezy aims to visually stand out from its competitors by combining a striking and distinctive appearance with a clean, simple, and minimalist design ethos. Additionally, with a target audience of young users, particularly millennials, the app's visuals must be modern and engaging to capture their interest.
Meeting these requirements posed an intriguing challenge. Following the creation of the UI moodboard, we initially developed two design versions, which are presented below. Through extensive discussions, iterations, and design adjustments, we ultimately merged the best elements from each design to make a final decision.
Version 1.
Two tone: black & white theme
Prominent search box
Grid category icons
Linear icon pack
Version 2.
Two tone: blue & white theme
Prominent wallet information
Swipe category icons
Solid icon pack
In collaboration with Dropezy's branding team, we revitalized the outdated app design, embracing a thoroughly modern, fresh look, and a striking UI design. Through numerous design iterations, we crafted a new user interface for the mobile app. Concurrently, we developed a Design System to ensure consistency across all products and facilitate the seamless scalability of this new interface within Dropezy's design and development team.
Before.
After.
Before.
Bad information hierarchy caused the choice-overload effect
Lack of visual differentiation of categories menu because it use illustration with similar colors
Complicated navigations
Old school and dull
After.
Better information hierarchy, from top to bottom the content is easier to understand
Introducing the unique selling point of Dropezy: 10 minutes delivery, Dropezy points, and Voucher
Improve clarity with photographic menu icons
Simpler navigations
Fresh, modern, and outstanding from competitor
We've elevated the search box to the forefront of the interface, making it the most prominent component. This ensures that users can quickly find and purchase items. Categories are conveniently accessible through a tab bar, while filters are presented as chip buttons, allowing users to easily customize their search.
In addition, when users search for specific keywords, we display their search history, enabling them to quickly revisit previous searches. To further enhance the search experience, we've implemented an autocompletion feature and offer recommendations based on the popularity of certain keywords.
Before.
Difficult to access filter and sort
Too big text size make it feel disorganized
Unclear label because it has similar color with main button
Unclear separation between each product
After.
Easier to access the filter and sort with tab bar and chips format
Easier to access the product variant
Faster to add to cart and customize the quantity
More clear label design
Better hierarchy with prominent price information
Clear separation between each product
We've streamlined the checkout flow to be as quick and easy as possible, ensuring a seamless transaction experience for users. Understanding that our users value efficiency, we've condensed the process to just three clicks, with the courier arriving at their door within 10-20 minutes.
To further enhance user experience, we've implemented measures to prevent mistakes or unintended purchases. Our cart page provides detailed information about selected items, empowering users to make informed decisions before completing their transaction. This proactive approach helps users avoid any potential issues and ensures a smooth checkout process.
1st click - Add to cart
2nd click - Continue (Lanjut)
3rd click - Pay (Bayar)
Success!
Following the Heuristic principle that design should keep users informed, we've implemented a robust delivery tracking system in the Dropezy app. This feature ensures users are always updated with the latest tracking information, accessible from multiple points within the app.
When users are outside the app, we send notifications to keep them informed. Upon re-entering the app, we display this information through engaging pop-ups or directly on the home screen. Additionally, users can access tracking details through their transaction history, providing a seamless and informative experience.
To enhance user engagement, we've introduced gamification elements like referral and discount bonuses to the Dropezy service. Our goal is to create a compelling user experience that fosters addiction to our platform.
By applying win-win solution principles, our referral bonus benefits both the sender and the recipient, amplifying user motivation to utilize this feature. This approach ensures that users are not only incentivized but also delighted by the rewards, making their experience with Dropezy even more fulfilling.
We've streamlined the registration process to be as quick and straightforward as possible, requiring only a phone number and OTP code. To further motivate users, we've included a referral code option, allowing users to earn points as rewards right from the start.
The landing page serves as a gateway to introduce Dropezy products, guiding users to download the application from Google Play or the App Store. Maintaining design consistency is paramount; hence, the visual design of this landing page aligns closely with the application's design language.
The content on the landing page highlights various features of the Dropezy application and includes positive user feedback to enhance user trust. This strategic approach aims to provide users with a seamless transition from the landing page to the application, ensuring a cohesive and engaging user experience.
It is crucial for us to uphold design consistency, not just for UI/UX but also for product branding. The design system serves as a fundamental guide for all involved parties, including designers, developers, and marketers, ensuring cohesive and harmonious work across the board.
Project Owner
Year
2021 - 2022
Design Lead
“Not only is he an excellent designer, but he is also a great friend and mentor. His leadership skills are unparalleled and he always goes above and beyond to support his team members.”
“Rizqi & team is a UI/UX design genius! Their work on our project was flawless, delivering a design that not only looked amazing but also functioned beautifully.”
“Working with them was a pleasure. Their UI/UX design expertise is unmatched, and they were able to take our project to the next level.”
“Rizqi transformed our vision into a user-friendly, visually stunning reality. Their expertise and professionalism were evident from start to finish.”
