Provantage x (buy workflow)

Provantage X / Product Design / 2019

redesigning the experience of creating a buy spec (where everything begins)

In order to initiate a Buy, a user first needs to create a Buy Spec. This is a spec sheet with the list of all conditions and restrictions on purchasing inventories from Suppliers. The Buy Spec is very important as it becomes the base of every step from this point. Not only is it important but it is also extremely complicated and difficult to change, because it will have multiple ripple effects on each and every step in the Buy process. However, the negative feedback on the Buy Spec creation process has grown over the past years to a point where it could not be ignored anymore, and a decision was made that we need to redesign it.


Users & issues



  • PVX Demand Side Platform users

    • The Buy Spec would be created by Planners and/or Buyers in most of the cases

Issues with the Buy Spec creation process

  1. Users get lost in the process very easily

    • There is no clear starting and ending point, which is why the users often don’t know what to do when they arrive at this page.

    • In the middle of this long process, there is no indication for the users to know where they are in the process and how much more they need to complete.

  2. Users feel stressed during the process

    • Users complete a set of multiple stages, feeling like they are done, only to find out that they actually have multiple more rounds of those sets.

    • The way the multiple rounds are set up is very repetitive and tedious for the users.

    • Separation between mandatory fields and optional fields are vague. Users often end up inputting more information than needed.


In the current design, users have too many options at the starting point. The placement of these options are not easy to follow, and this leads to a confusing workflow for the users.
(User’s workflow on this screen: 1-2-3-4-5)

It is not clear which parts of this process is completed by the users. This often leaves the users feeling lost, not knowing where they are in the process and how much more they need to complete. (1)
The structure has too many tabs under tabs under tabs. This makes it very easy for the users to miss sections unintentionally. (2)


Once the users are done with the setup wizard, they feel like they are done with the entire process. However, this is only the first step, and there are still many repetitive steps left to complete.

While there are * for fields that are mandatory(1), there are no clear indications of which steps as a whole is mandatory for which actions(2,3). Different steps are required for different actions, but the users have no way of knowing this.



Process (asking Questions)

Current “Buy Spec Create” workflow (Rough draft in notebook)

Current “Buy Spec Create” workflow
(Rough draft in notebook)

Current “Buy Spec Create” workflow

Current “Buy Spec Create” workflow

Redesigned “Buy Spec Create” workflow (Rough draft in notebook)

Redesigned “Buy Spec Create” workflow
(Rough draft in notebook)

Redesigned “Buy Spec Create” workflow

Redesigned “Buy Spec Create” workflow

  1. Why is the structure the way it is currently?

    • This is mainly because our company likes to group information by “Dayparts” during the Buy process. The initial design of the Buy Spec was simply mimicking the physical documents used in the process as well. Unfortunately the temporary design stuck and was not modified very much ever since.

  2. What are advantages and disadvantages of the current structure?

    • The current Buy Spec structure makes it easy for our company employees to work as they are used to it. However, each agency has their own way of working, and the majority of them tend to group information by “Markets” instead of “Dayparts.”

    • Since this is product is not an internal tool, and it is targeting to be sold to agencies in the industry, optimizing it to our own use only is not a good decision.

  3. How could we improve the structure?

    • It seems like there is a dilemma with giving the Daypart, Market, Length information a hierarchy, because each company ( or agency ) has different orders for grouping them.

    • If it is impossible to satisfy everyone anyways, we could try to group by function instead of the traditional method of grouping by Daypart, Market or Length.

  4. What are advantages of grouping by function?

    • The information would be presented in a way that the users will feel like they focus on one function and then move on to the next, instead of repeating over and over, feeling like they are running in circles.

    • Because the users work on one function and then move onto the next function, it would naturally create a step by step process. The process would become linear with a clear starting point and ending point.



redesign and next steps


Redesign Solutions

  1. Design a linear process that clearly has a starting and ending point.

    • Limit the options in the early stage of the process. Currently there are too many options available for no good reason. Users should know where to start as soon as they arrive at the page.

    • Let the users know at what point they are able to take the action they have been preparing for.

  2. Create a status bar or check off list

    • Organize all the steps in order and display them at all times. This will allow the users to know what they need to go through in advance.

    • Use the status bar or check off list to let the users know where they are in this long and complicated process.

  3. Create the steps by grouping information based on functions instead of grouping by either Dayparts or Markets.

    • Users can fill in all Dayparts and Markets information within each step. When the users advance to the next step they will be able to work on something actually new instead of repeating a cycle numerous times.

  4. Divide the process in half in order to set a clear distinction between mandatory and optional steps.

    • A mid-way checkpoint helps users know what kind of actions they can take by completing just the mandatory steps.

  5. Auto-save anytime users advance to the next step.

InVision prototype that explains how the side progress/navigation bar works  Click on image above to view the InVision Prototype

InVision prototype that explains how the side progress/navigation bar works
Click on image above to view the InVision Prototype

Image displays how each step takes care of all different Dayparts at once.

Figuring out which steps are mandatory vs optional is simple. The first half of steps before the first check point are always required, while the rest is only required for specific actions.


Current state and Next Steps

  • We have presented the designs to the Business team and have already received a great amount of positive feedback.

  • We are currently having meetings with the Development team, assessing the feasibility of the designs as well as working out a schedule and road map.

  • While the Development team starts setting up the structure based on the wireframes, I will be preparing the actual UI screens. By the time the developers are ready for front-end coding, I will have all the design material they need, ready for handoff.