Designing a comparison app for ecommerce products and services
Imagine you’re looking to buy an accessory for your phone from your favorite online retail store. You’re in the product details page and looking at the price. How good would it be if you can know at the click of a button if it’s available cheaper elsewhere? Especially good if you’re a typically price-conscious Indian shopper. That’s what MakkhiChoose does. Its primary goal is to save money for the users while shopping, booking flights and ordering food or groceries. Originally MakkhiChoose was a browser add-on for Chrome and Firefox. Its founder Sai Gaddam approached me to bring it into Android, the prevalent mobile OS in India.
MakkhiChoose works in two ways:
- Inside other supported ecommerce apps: Tapping the MakkhiChoose icon on a product screen would show a quick comparison of product price and shipping charges from other stores.
- As a standalone shopping app that lists products from all supported online retail stores.
MakkhiChoose also shows the price trend of products over a period of 3 months and allows the user to get notified once the price drops below a certain point set by the user. Another feature is displaying deals and offers from all the stores.
Designing MakkhiChoose inside other apps
The first challenge I encountered was to find a suitable position to display MakkhiChoose’s content inside other apps. The top and bottom of the screens of most of the apps were occupied by navigation and action buttons; some apps had a filter or navigation drawer that slides from the left. So, we positioned the MakkhiChoose drawer to slide from the right when activated.
Next I had to find the least intrusive way to activate MakkhiChoose. A gesture would the best way but since it’s out of sight it easily gets out of the mind too; So, I had to make it visible. After trying out few options we settled with a partially visible fly perched on the top right edge of the screen. The tilted fly would straighten once the MakkhiChoose drawer is fully visible. I made a small portion of the original app visible beneath the drawer indicate the user that she’s still inside the original app she was using.
This page could have been a lot simpler by just showing the store’s name and the price alone. But it’s not that simple because of real-world constraints. MakkhiChoose’s algorithm does a good job at finding matching poducts but it cannot be perfect because of the absence of standardized product IDs across the stores. So, I had to display the product photos from each store so that the users can find and ignore the mismatched items at a glance. How much a user saves or loses is what the users are most interested in, so I made it prominent. Also, I arranged the information similar to a table for quicker comparison of prices.
Similar to shopping, users can compare the prices of various flights from the flight aggregator apps. While in shopping apps users compared prices of a single product from multiple stores, here users compare prices of multiple flights falling within a specified time range from multiple flight aggregator apps. To accommodate the extra layer of information I placed the flight aggregators on tabs and displayed the flight–price information under each tab.
Here MakkhiChoose compares prices of individual products from the product screen or of the entire basket of selected products from the checkout screen. The user can also replace an item with alternatives.
Food related apps
In food related apps MakkhiChoose users can compare food delivery prices and read restaurant reviews from various apps.
MakkhiChoose standalone app
- For designing the app Sai categorized users into two groups.
- Users who passively browse for interesting products.
- Users who actively seek the product that they have in mind. They’re further categorized into 3 groups: those who have a clear idea of what they want, people who have some idea and those with no idea at all.
The design had to cater to all these users. For example, for the passive browsers the design should enable them to discover interesting products through popular lists, deals, curated lists etc. While users with a clear idea would use search prominently those with little idea would use category listing and filter according to the features familiar to them. For the third group we planned to provide a list of recommended products based on their answers to a few questions.
One of the concerns we had was whether the designer would understand how different users might want to explore and use our app. While we had internalized this over the many months we spent poring over consumer data, we weren’s sure if the designer would recognize and appreciate the differences. Getting the user flow and activity flow was as important as getting the aesthetic right. Rakesh’s work is obviously lovely to look at. But what really impressed us is how he did an excellent job of taking our brief, diving in further with his own research, and capturing what we had in mind.
It was Rakesh’s nuanced understanding of user experience and the clarity with which he charted out the use-cases and potential problems. We found quite a few designers who were great in the visual aspect of work, but Rakesh was the only one who combined clarity in design thinking with beautiful and clean execution.
Rakesh helped us clarify our own thinking in how the user should experience the app. Judicious use of space and display of information are especially important on smaller screens. While we appreciated that, it was Rakesh who helped create a design that adhered to this important principle without sacrificing in the looks department.
The two most significant improvements that have resulted: Greater clarity in how the user would interact with different elements in the design, and an enhanced appreciation for how the interface can influence user decisions.
Have a conversation with Rakesh and gauge how well he understands your requirements, and what he thinks are important ideas that should be captured in your design. That should convince you that he really does get design in ways most don’t!