Multiple Pipeline Frontend Styling
At PipelineDeals the product development process goes like this:
Product team scopes and writes the requirements for a new feature and the product designers then take those requirements and turn them into designs.
Once all design deliverables are finished the engineering team takes over and builds out all the functionality of the feature. The UI is left in varying degrees of a basic HTML format. When they have finished building out the backend and all functionality is complete they hand it back to the product designers.
At this point the product designer who designed the project comes in to apply all styling for the frontend. They are responsible for creating a production-ready UI.
Multiple Pipelines
Prior to this feature being developed, all PipelineDeals accounts operated with a single set of stages that all deals went through. Multiple Pipelines, you guessed it, gave accounts the ability to create multiple pipelines each with a unique set of stages. Deals could then be added to any of the pipelines in their account.
The functionality to create and edit stages already existed but I took this opportunity to redesign the stage administration functionality and combined that with the new pipeline administration functionality. It was a great opportunity to improve upon an outdated UI and create a better user experience.
There were many other small UI additions and improvements throughout the application. Another important area was the stage column dropdown on the deal listview. Users would now be able to do much more advanced filtering based on pipelines and/or stages. I went through many iterations of how this filtering would work. There were design and technical constraints that made it difficult come to the best approach. By creating multiple prototypes and user testing them I was able to come to the design that is in the application today. You can see the original dropdown and the improved dropdown below.
For more information on this project, read the Multiple Pipelines Case Study.
Before
After
