In Summer 2018, I worked as a product design intern at UrbanClap. In this blog, I have described one of the exciting problems we solved during my internship i.e. Designing for Variants. The problem involved designing the flow for the user to buy multiple variants of a product which has staggered pricing and at the same time ensuring that she is making a good deal (i.e. Value for money).
Role: Product Designer Intern
Team partner: Fozail Ahmed (Product Designer)
Duration: 2 weeks
Tools: Sketch, Zeplin, Marvel
I followed the Double Diamond approach for the project. We started by gathering data from PMs and business teams and did a competitive study to better understand the problem. Then we narrowed down the data to some of the key problems/constraints we need to address while designing. After that, we explored multiple solutions for solving these problems, and finally, we narrowed down to a final solution.
Variants and Staggered Pricing
Before starting with the design process, it was necessary to understand the variants and their pricing model.
If service price(Sp) is dependent on time(t) and material used(m), then for different value of t and m, S would have different values.
This is called a staggered pricing model and each value of the price(S) is called a variant.
In our case, We wanted to solve for the Massage category and Massage was available for two durations: 60 and 90 min.
For these two time values, the service price was not a linear function of time. The price(y) for 90 min massage was lesser than what it would be for a linear pricing model (y<1.5x; x=price for 60 min massage). Thus, A higher variant type was available for a discounted price which makes it a value for money deal for the user. Through our design, we wanted to entice her into buying this high price variant.
Understanding Variant Flow and Business Requirements
For understanding the variant flow, I first looked at how UrbanClap app was dealing with the problem of variants earlier. I found out that there were separate SKUs (Stock Keeping Unit) for each variant type which was increasing the scroll length of the page. Thus, we wanted to eliminate the need of having separate SKUs.
Also, the goal of this project was to scale the variant flow to other categories too. For this, I talked with different category heads to understand the various requirements. e.g. for some of the variant types, the only short heading wouldn’t suffice and we needed some description of the variant along with the heading while for some other cases, we needed pictures also.
There was also a limit to the number of items a user could buy for a variant type. For some cases, we needed to give the ability to the user to buy multiple quantities of a variant type while for some cases, she could buy only one.
There was also a limit to the number of items you can buy for a variant type. For some cases, we need to give an ability to the user to buy multiple quantities of a variant type while for some cases, she can buy only one.
We also looked into the variant flow of some e-commerce products- Amazon, Flipkart, and Grofers.
Defining the Problem
After gathering data and understanding the requirements, we formulated a set of problems we needed to consider while designing. We did this using the “How might we” method in which each problem is converted to a “How might we” question.
- How might we up-sell the higher variant to the user and at the same time ensure that she is making a good deal?
- How might we give an ability to the user to view all variants associated with the product/SKU and add them to the cart without going into the details page?
- How might we make it scalable so that the same design can be extended to other categories?
- How might we give the user the ability to buy multiple quantities of “A” type and “B” type of same variants in one go?
- How might we inform the user that she has already selected multiple variants of an SKU without going further into the flow?
Ideating and Brainstorming
We started sketching the various solution possible for variant flow and tried to figure out how the SKU card could inform the user that multiple variants were available for the product.
For the SKU card, we had to make decisions for-
1. How to up-sell higher price variant over other?
Since the pricing was not linear, We thought of showing a table for price comparison of all the variants on the card itself and showing the benefits of buying higher value variant by showing the savings on that variant. This solution was good for a service where only 2 variants were available but increasing the variants would increase the length of the card and thus have increased the scrolling length. To avoid this, we thought of making the list items horizontally scrollable on the card. But this would hide the best price available for the service and it would become difficult to show description along with each variant.
We also thought of adding an offer tag in the card to inform the user that they could make a good deal out of the standard price by spending some extra bucks and placed it close to variant selection button so that it is easier for the user to take action (of changing variant).
2. What information(price, details, quantity, variant selected) to show upfront?
Details- Since we were selling a service, only title and image wouldn’t suffice the information needed to sell the service. Therefore we added some pointers(e.g. benefits, pressure points, oils used for massage, etc.) to help the user to make the decision easier without going into the Details page.
Price- Deciding what price to be shown upfront was the most difficult challenge. e.g. We thought of showing price range as Amazon does it for variants. But the price range was not a clear indicator of the price for an item as for some category (like Bathroom cleaning) where bulk purchase model (the more you buy, the more discount you get) is followed, the price of a single item may be less than what is shown by the minimum of the range.
Quantity, Variants, and Variant Selected- The card should inform user that multiple variants are available for the product and also provide a way to switch between variants and add them to cart. It should also be made clear from the card itself that how many items were already selected and what was the selected variant.
Finalising the Solution
From the above solutions, we narrowed down to a solution where-
- We showed the standard price and gave the ability to change the variant through a bottom popup sheet which would appear as soon as the user clicks on the add button or variant selection button.
- We highlighted the offer bar to show that the given product could be purchased for a better deal and placed it closer to the variant selection button.
- Using the bottom sheet also allowed us to use the same design for other categories. The vertical variant list helped us to add the description whenever needed to the particular variant type.
- We also added a local “Add” button to each variant so as to facilitate multiple additions of a variant.
- We used a “Multiple” tag and showed their “price range” to inform when multiple variants were selected by the user.
1. Design to meet both business and user needs.
While designing, business goals should be considered as important as the user goals. A business goal needs to be considered as another constraint while solving the design problem. e.g. I thought of showing only the standard price on the card and then writing the different variants available in the plain text. Then my VP told me that we needed to highlight the offer associated with variant informing that the user could make a better deal by spending some extra bucks on a higher variant. The highlighted offer would catch user attention and she might think of buying it. Thus our business goal of up-selling would be met.
2. Break the objective into a set of small constraints and keep them in mind while designing.
To solve a problem easily, we can simplify/break it down further into a set of smaller problems or constraints. The best solution should take care of all the constraints. Noting down all the constraints at one place will also prevent us from overlooking any edge cases in the design.
3. Treat edge cases as edge cases only.
Your design should be such that it is optimized for all edge cases. While solving for edge cases, it should be kept in mind that the users will encounter them rarely. They should not be optimized more than the cases which are encountered quite often. e.g. in the process of solving for edge case of buying multiple quantities of multiple combinations of variant type, I proposed a solution wherein the flow for edge case had better UX than the case of buying 2 different variants of a single type which was encountered most often.
Summing it up
This small project was a fun and interesting challenge. It taught me how design thinking can be applied for designing small features like the variant selection and I learned how to design for scalability. This project has taught me many lessons. That’s why I thought of sharing it separately.