Optimization of coupon interaction design in B2C website shopping process

We often buy things on the internet and receive coupons. Recently, we have a small survey. on a website, 30% of users have more than 10 effective coupons. However, when we use coupons, we find a problem. Many websites only display 10 coupons on the shopping settlement page. How can we choose to use more than 10 coupons?

I simulated a user. When I went to a supermarket and bought many or single-piece products, I found that my bag had N coupons, and I began to struggle, which one should I use? So I started to flip the coupons and see which ones are about to expire. Which one is what I want to use this time? I will not pay attention to these coupons at ordinary times, you can only take a look at it when using it.

I have seen N B2C sites in China and have never had such interactions on coupons.

However, I found that as online shopping increases, more and more people have more coupons.

So I'm doing this interaction.

In B2C, how can we meet the needs of these users?

There are several solutions:

1. For good looks and not many front-end page loads, there will be a limit of 10. As a result, 30% of users cannot use out-of-display coupons.

2. for use, 30% of users will see several pages of coupons, which may be difficult to find.

Now let's take a look at the logical relationship.

1. What problems do I need to solve in the interactive design of coupons?

A:

The coupon interaction design is designed to meet the convenience and simplicity of using more than 10 coupons on the B2C website for 30% users.

2. The interactive design of coupons aims to make it easy and understandable for users who have no more than 10 coupons in 70%.

2. What are the benefits of coupon interaction design?

A:

The Interactive Design of coupons can meet the complex needs of users who have more than 10 coupons online. At the same time, it will not reduce the complexity of operations for those who have fewer than 10 coupons, but also improve user experience, easy to use, not angry

First, we will solve the Sorting Problem. According to the data of most network names, sorting by End Time in reverse order is a kind of sorting method that I prefer.

During the payment process, when listing the coupons, You can first filter out the coupons that meet your needs based on the order amount and commodities, for example, if you purchased 100-50 RMB, you don't need to display it.

Second, if there is a coupon of the same type, it will be better to display it in one line. There is a small + number to expand. Otherwise, they will be received in the same period from 200 to 100. Show all, it seems a headache.

First, we will solve the user's selection needs if there are less than 10 coupons

These users are simple. By default, five coupons are displayed. If there are five or fewer coupons, all of them will be displayed, and the page will be beautiful.

　　

 

 

Of course, some users have more than five coupons but less than 10. After clicking more, the figure below will be displayed.

　　

 

From the figure above, we can see that there are already more than 10 coupons,

At this time, I have a coupon I want to use. What should I do? As a user, I naturally think of adding coupons.

Then, you can click "Add new coupon" to add a coupon, because only 35% of the users who actually add a new coupon in the payment process, I deprecated the new coupon button so that users can use it more clearly.

　　

 

But where else?

The problem arises.

The order of coupons is roughly as follows:

1. sort by start time of valid time

2. sort by the end time of the effective time

3. The top of the last active arrangement

In fact, these are not the main reasons, because they do not solve the user's needs.

The user's requirement is that I can choose the one I want to use.

So with my new page, when there are more than 10 user coupons, there will be more complex interactions.

　　

 

After you click more filter conditions

　　

 

At the beginning, I was very entangled in two things,

1. Do you want to flip the page feature? I am not going to deny it because it is too heavy for a payment page that only uses one coupon at a time.

2. Do you want to increase the activation time, that is, some users want to view the coupon they just activated? Finally, it was rejected by me. I think, if he just activated it, he can check the coupon number after entering it. If he wants to view it, he can click your total of X coupons to open the user center coupon page on the new page, just take a look

3. In fact, the user's page flip function and view are not what he wants to do currently. what he wants to do is to select a coupon and use it, in this way, you can