How to Prototype a Realistic Cart Experience in Axure RP

A user-friendly and seamless checkout process is critical for e-commerce businesses. By prototyping, gathering feedback, and conducting user testing, you can identify pain points early on and refine your cart design to eliminate obstacles that might discourage users from completing purchases. In Axure RP, prototyping realistic and functional representations of your app or website’s shopping flow is made easy with repeaters.

Since repeaters are used to display repeating patterns of widgets, they are the ideal choice for designing layouts such as product listings and shopping carts. To get started, you can either drag the repeater card or repeater table widget onto the canvas, or you can start by designing the layout you want repeated, select those widgets, right-click, and select Create Repeater.

Once you have created a repeater, you can start to display text and images from each dataset column onto widgets in the repeater’s item. In Axure RP 10, this process is made easy with the floating dataset table, where you can simply click Connect Widget, and then choose a widget from the target dropdown. In the dataset table, you can also easily import data with the  + Import CSV option. Alternatively, you can use the repeater’s Item Loaded event to connect data to widgets, which can be useful when dynamically generating text or numeric values with math expressions.

In this example, you can see that the repeater card we created for a coffee roaster product listing has a product image, product name, brand name, roast type, and price. By connecting each dataset column to a corresponding widget and then filling out the dataset cells, we now easily have a full product listing without having to create the same design over and over again.

Once you have a product listing, you can also use a repeater to have a shopping cart that updates when a user adds a product to their cart. To do so, design your shopping cart to include elements such as the product name, quantity, and price, and turn it into a repeater just like with the product listing repeater. To display data on the shopping cart repeater, we chose to use the Item Loaded event in our example prototype, so that the text and images could be dynamically displayed via math expressions.

Once the shopping cart repeater is set up, you can create an interaction that will trigger the shopping cart to update when users add products to their cart by following the steps below:

1. Go back to the product listing repeater, add a button widget, and label it Add to Cart. 
2. With that button selected, click New Interaction in the Interactions pane.
3. Choose the Click or Tap event, and then choose the Add Rows action.
4. In the Target dropdown, choose the shopping cart repeater. This will make it so that a new row is added to that repeater whenever a user clicks the Add to Cart button.

Now that you have a product listing with a functional Add to Cart button, and a shopping cart that updates based on the user’s selections, you’ll have a realistic prototype that represents a user’s shopping flow.

Overall, prototyping a shopping cart with repeaters in Axure RP helps you create a more interactive, realistic, and scalable representation of the shopping experience. Through iterative design, prototyping, and user testing, you can continually improve the usability of your app or website’s shopping flow, making it more easy, efficient, and enjoyable for users.

You can download the .rp file of the example prototype featured in this article here. As always, if you have any questions or want to submit feedback, you can contact us at support@axure.com. Happy Prototyping!