Publication process

The brief

The process of publication consisted in a series of forms where the user enters the pertinent data to be able to put their tickets for sale. The process is based on four steps: Description of inputs, sales price, user data and transaction data.

The intention of this project was to devise a new process model to achieve two clear goals:
· Get the user to correctly complete all data without forgetting anything.
· Try to provide information to the user without distorting their price intention.

  • Image

Original situation when I approached the redesign

Navigation Flows

We opted for a step-by-step model by segmenting the four previous forms into small questions. This decision was made with the intention of creating more focus in all the steps and to be able to adopt a same model to the experiences in mobile and desktop.

  • Image

First iterations to arrange all the steps through the process.

  • Image

Final navigation flow with all possible cases. To see a bigger version click here (pdf).

  • Image

Wireframes of some steps of the process designed for different breakpoints (mobile, tablet, desktop).

Pricing tool

For the pricing step we wanted to provide information in a more human tone than the current price tables. These tables were confusing for the perception of the value of their tickets since they showed as reference the average prices and the extremes including the most expensive, distorting the average price shown

  • Image

The bottom table showed as reference the average and extreme prices, distorting the price value the user had in mind.

The new proposal eliminates the price tables and helps to incorporate the price with a more human tone. It is still based on minimum, medium and maximum prices but representing them in stripes of color and messages based on the ease of sale.

One of the objectives of this project was to make the users publish cheaper prices, so the jump from easy (green) to difficult (yellow) was placed in the minimum published price minus 10%, this way we direct the user to keep this price range competitive.

  • Image

Color code providing information os ease of sale. 

  • Image

Wireframe iterations for the design of the screen and the final solution implemented at stubhub.es