Define

Frontrunner wanted to redesign the mobile order slip to help simplify the order process. We had received feedback that users were overwhelmed with the choices they had to make in the order slip, and this was causing confusion and less placement of orders in general.

‍

Research

We researched different ways that sports books were showing their order slips, what was working, and what common elements were showing up in those order slips. We also looked at financial apps like Venmo, PayPal and Robinhood - apps that are more UI focused and also have a payment screen to see what was working and providing the easiest user experience. 

‍

Testing Internally

We stripped away as much of the information as we could from the main order slip screen. We were also redesigning the event page, and we migrated as many choices as we could to the event page, so when the user entered the order slip, there were less choices to be made. We prepared for the designing to begin by gathering the info that needed to be on the order slip, and the hierarchy of that information, and creating a wireframe. 

Using the wireframe, we set up a prototype in Figma for the order slip, and tested it internally and with friends and family. Our users gave the feedback that this new order slip was easier to use, and they no longer felt lost when they opened the order slip, so we we went ahead to high fidelity design. 

‍

Design

Many iterations of the order slip followed, and lots of exploration. 

‍

Handoff

Handoff to developers always included redlines in Figma and a design spec in Notion. 

‍

Measuring Success and Iteration

With this new order slip, we saw about a 15% decrease in time to place an order, and significantly less random button tapping. We set up hot spots in our user tracking software, and figured out potential pain points we might want to keep an eye on in this new design for later improvement.

‍

‍

‍