a dropezy intro screen design in a phone shaped screenshota dropezy home screen design in a phone shaped screenshot
Dropezy
Quick Commerce App for Groceries
Dropezy is a one-stop shop for all groceries and household essentials like vegetables, fruits, meats, snacks, etc. Dropezy also brings a quick commerce concept that promises quick deliveries in 15 minutes 24x7.The team at Dropezy reach us to help them redesign their mobile app with their new brand look and better experiences for the user.
Dropezy
Topic
UX Fundamentals
Design Thinking
Human Centered Design
Engagement
5th April  - 21st May 2021
Scope of Work
Ui Design
UX Research & Design
Ui Design
UI Design & Styleguide
Ui Design
Icon & Illustration
Discover Dropezy App UX Issues
We start with a design audit to understand what is the problem with the current app. Discovering the app issues can help us to provide a better experience design for the user. Here are some of the design lack we found in the current app:
an old dropezy home screen design
1
Too Many Options
Users are confused when facing the homepage because there are too many call-to-action they can see. "Which one do I need to click?"
2
Menu Similarities
The illustration used for the main menus is visually too similar. It makes the user feel difficult to differentiate each other.
3
Too Many Options
There are too many steps the user needs to do for checkout. It makes the user feel the effort to place an order for the items and pay.
1
Search for Nothing
When the user searches for something, usually the out-of-stock items appear on the top of the list. It makes the user feel that there is no item available.
2
Ineffective Space Usage
The design components are too big that is consuming too much screen space. It makes the user need the effort to scroll to see more information.
a dropezy design displaying ineffective space usage of search screen
1
Search for Nothing
When the user searches for something, usually the out-of-stock items appear on the top of the list. It makes the user feel that there is no item available.
2
Ineffective Space Usage
The design components are too big that is consuming too much screen space. It makes the user need the effort to scroll to see more information.
Be Outstanding with Visual Rebranding
Dropezy has the vision to be one of the most outstanding quick commerce in Indonesia. To achieve this goal they start with the logo rebranding to make the visual more prominent compared with competitors. We analyze the look and feel of the new logo and make sure to create a UI design that is aligned with it.
Look & Feel Analysis
We analize the logo characters and the UI design need to be developed based on the keyword below:
Bold
Brave
Standout
Vibrant
Modern-Retro
Experimenting with Style Explorations
We experimenting with some UI styles to achieve our goal become a quick commerce groceries app that is outstanding from its competitor. We analize the pros and cons for each exploration and brainstorm with the client to decide the final design.
Dropezy
a floating new dropezy home design in a phone mockupanother variant of dropezy home design in a floating phone mockup
an illustration of a shopping bag in dropezy style
Get More Clear with Photographic Menu Icons
We create menu icon in photographic style. With this approach, user can differentiate each menu easier as well as understand it faster even without read the caption.
a tiles of dropezy categories
Efficient Browsing Experience and Effortless Checkout
We improve the information hierarchy of homepage so that user understand what they need to do. We make search box become the most prominent component because we want to make seamless browsing experience and make it quick to purchase something.
a screenshot of dropezy home screena screenshot of dropezy search screena screenshot of dropezy search screen with recent searcha screenshot of dropezy search screen with on-screen keyboard
a screenshot of dropezy cart screena screenshot of dropezy collection of payment methoda screenshot of dropezy delivery waiting screen
Tracking System Made Easy
Users can monitor the progress and estimated-time delivery easily from transaction history and even from the home page directly.
a screenshot of dropezy successfully delivered screena screenshot of dropezy home screen with ongoing order statusa screenshot of dropezy transaction history screena screenshot of dropezy transaction detail screen
Referral and Gamification
We make it more fun by adding gamification activities such as referral and discount bonuses. We want our user to be addicted with the Dropezy service, and this kind of gamification can trigger to make it happen.
a screenshot of dropezy referral screen
a screenshot of dropezy points tutoriala screenshot of dropezy referral pop up
Design System
Very important for us to maintain design consistency not only for the UI & UX but also for the product branding. The design system would become basic guidance for all related people to work like designers, developers, marketing, etc.
View the design system
Montserrat
Aa
Bold
Aa
Medium
Aa
Regular
Shade 1
#1368E5
Shade 2
#115DCC
Shade 3
#003753
Shade 4
#082E66
a collection of dropezy illustration in a bubble form
a collection of different state of dropezy buttons
Read other stories on how we design for better experiences