Services

Product Design

Company

Frontrunner

Year

2022

Define

Frontrunner wanted to redesign the events page on the web app to optimize the page experience, and ultimately drive more efficient trades. The graph was the largest component of our original event page design, and we had received feedback that users did not find the graph very useful, and that they in fact were looking for information that was not surfaced on this level. We wanted to reconsider the graph design, and add in the information that we had heard users asking for. 


Before

Research

We looked at how all the major sportsbooks were showing events, and what information they had surfaced at the “event” level. We looked the top sports scoring platforms, like ESPN and Google, to see how these platforms were displaying live game information, which was one feature users had been asking for. We also checked out trading platforms and stock markets to see how they showed graphs. 


Prototyping & Testing

We created wireframes of the event page with the new information, and without the graph. We tested some of our power users from Discord to see if they felt like they could easily make trades, if they could still make trades without the graph, and if they still felt key info was missing. 


Design

Once we were happy with the results of our testing with our power users, we went forward with the design. 

Exploration, exploration, exploration!


Launch

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

Notes for developers in Figma


Success Metrics & Iteration

Once we implemented this new design, we ran some user interviews/user test with the new product. We actually found users hardly traded from the menu or the market detail page (the next page deeper into the product), and instead stayed directly on the event page for trading. This was a positive result, because it confirmed our hypothesis that adding the info users had been asking for on the event page would lead to more effect trading. However, it raised new questions for iteration, such as “What is the purpose of the market detail page?” and “How can we potentially surface all important information from the market detail page to the event page?” 


After

mockups of web designs mockups of web designs mockups of web designs